first commit

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

@@ -0,0 +1,74 @@
+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 {Subscription} from '../../billing/subscription';
+import {
+  UpdateSubscriptionPayload,
+  useUpdateSubscription,
+} from './requests/use-update-subscription';
+import {CrupdateSubscriptionForm} from './crupdate-subscription-form';
+
+interface UpdateSubscriptionDialogProps {
+  subscription: Subscription;
+}
+export function UpdateSubscriptionDialog({
+  subscription,
+}: UpdateSubscriptionDialogProps) {
+  const {close, formId} = useDialogContext();
+  const form = useForm<UpdateSubscriptionPayload>({
+    defaultValues: {
+      id: subscription.id,
+      product_id: subscription.product_id,
+      price_id: subscription.price_id,
+      description: subscription.description,
+      renews_at: subscription.renews_at,
+      ends_at: subscription.ends_at,
+      user_id: subscription.user_id,
+    },
+  });
+  const updateSubscription = useUpdateSubscription(form);
+
+  return (
+    <Dialog size="md">
+      <DialogHeader>
+        <Trans message="Update subscription" />
+      </DialogHeader>
+      <DialogBody>
+        <CrupdateSubscriptionForm
+          formId={formId}
+          form={form as any}
+          onSubmit={values => {
+            updateSubscription.mutate(values as UpdateSubscriptionPayload, {
+              onSuccess: () => {
+                close();
+              },
+            });
+          }}
+        />
+      </DialogBody>
+      <DialogFooter>
+        <Button
+          onClick={() => {
+            close();
+          }}
+        >
+          <Trans message="Cancel" />
+        </Button>
+        <Button
+          form={formId}
+          disabled={updateSubscription.isPending}
+          variant="flat"
+          color="primary"
+          type="submit"
+        >
+          <Trans message="Save" />
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}