first commit

common/resources/client/admin/subscriptions/create-subscription-dialog.tsx

@@ -0,0 +1,56 @@
+import {Dialog} from '../../ui/overlays/dialog/dialog';
+import {DialogHeader} from '../../ui/overlays/dialog/dialog-header';
+import {Trans} from '../../i18n/trans';
+import {DialogBody} from '../../ui/overlays/dialog/dialog-body';
+import {DialogFooter} from '../../ui/overlays/dialog/dialog-footer';
+import {Button} from '../../ui/buttons/button';
+import {useDialogContext} from '../../ui/overlays/dialog/dialog-context';
+import {useForm} from 'react-hook-form';
+import {useCreateSubscription} from './requests/use-create-subscription';
+import {Subscription} from '../../billing/subscription';
+import {CrupdateSubscriptionForm} from './crupdate-subscription-form';
+
+export function CreateSubscriptionDialog() {
+  const {close, formId} = useDialogContext();
+  const form = useForm<Partial<Subscription>>({});
+  const createSubscription = useCreateSubscription(form);
+
+  return (
+    <Dialog>
+      <DialogHeader>
+        <Trans message="Add new subscription" />
+      </DialogHeader>
+      <DialogBody>
+        <CrupdateSubscriptionForm
+          formId={formId}
+          form={form}
+          onSubmit={values => {
+            createSubscription.mutate(values, {
+              onSuccess: () => {
+                close();
+              },
+            });
+          }}
+        />
+      </DialogBody>
+      <DialogFooter>
+        <Button
+          onClick={() => {
+            close();
+          }}
+        >
+          <Trans message="Cancel" />
+        </Button>
+        <Button
+          form={formId}
+          disabled={createSubscription.isPending}
+          variant="flat"
+          color="primary"
+          type="submit"
+        >
+          <Trans message="Save" />
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}