feat: Delete Stripe payment method

packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx

@@ -1,6 +1,15 @@
 // @ts-nocheck
 import styled from 'styled-components';
-import { Button, Classes, Intent, Text } from '@blueprintjs/core';
+import {
+  Button,
+  Classes,
+  Intent,
+  Menu,
+  MenuItem,
+  Popover,
+  Tag,
+  Text,
+} from '@blueprintjs/core';
 import { AppToaster, Box, Card, Group, Stack } from '@/components';
 import { StripeLogo } from '@/icons/StripeLogo';
 import {
@@ -9,10 +18,15 @@ import {
 } from './PreferencesPaymentMethodsBoot';
 import { StripePreSetupDialog } from './dialogs/StripePreSetupDialog/StripePreSetupDialog';
 import { DialogsName } from '@/constants/dialogs';
-import { useDialogActions, useDrawerActions } from '@/hooks/state';
+import {
+  useAlertActions,
+  useDialogActions,
+  useDrawerActions,
+} from '@/hooks/state';
 import { useCreateStripeAccountLink } from '@/hooks/query/stripe-integration';
 import { StripeIntegrationEditDrawer } from './drawers/StripeIntegrationEditDrawer';
 import { DRAWERS } from '@/constants/drawers';
+import { MoreIcon } from '@/icons/More';
 
 export default function PreferencesPaymentMethodsPage() {
   return (
@@ -26,12 +40,12 @@ export default function PreferencesPaymentMethodsPage() {
         <Stack>
           <StripePaymentMethod />
         </Stack>
-      </PaymentMethodsBoot>
 
-      <StripePreSetupDialog dialogName={DialogsName.StripeSetup} />
-      <StripeIntegrationEditDrawer
-        name={DRAWERS.STRIPE_PAYMENT_INTEGRATION_EDIT}
-      />
+        <StripePreSetupDialog dialogName={DialogsName.StripeSetup} />
+        <StripeIntegrationEditDrawer
+          name={DRAWERS.STRIPE_PAYMENT_INTEGRATION_EDIT}
+        />
+      </PaymentMethodsBoot>
     </PaymentMethodsRoot>
   );
 }
@@ -39,12 +53,15 @@ export default function PreferencesPaymentMethodsPage() {
 function StripePaymentMethod() {
   const { openDialog } = useDialogActions();
   const { openDrawer } = useDrawerActions();
+  const { openAlert } = useAlertActions();
+
   const { paymentMethodsState } = usePaymentMethodsBoot();
   const stripeState = paymentMethodsState?.stripe;
 
   const isAccountCreated = stripeState?.isStripeAccountCreated;
   const isAccountActive = stripeState?.isStripePaymentActive;
   const stripeAccountId = stripeState?.stripeAccountId;
+  const stripePaymentMethodId = stripeState?.stripePaymentMethodId;
 
   const {
     mutateAsync: createStripeAccountLink,
@@ -78,10 +95,24 @@ function StripePaymentMethod() {
     openDrawer(DRAWERS.STRIPE_PAYMENT_INTEGRATION_EDIT);
   };
 
+  const handleDeleteConnectionClick = () => {
+    openAlert('delete-stripe-payment-method', {
+      paymentMethodId: stripePaymentMethodId,
+    });
+  };
+
   return (
     <Card style={{ margin: 0 }}>
       <Group position="apart">
-        <StripeLogo />
+        <Group>
+          <StripeLogo />
+
+          {isAccountActive && (
+            <Tag minimal intent={Intent.SUCCESS}>
+              Active
+            </Tag>
+          )}
+        </Group>
         <Group spacing={10}>
           <Button small onClick={handleEditBtnClick}>
             Edit
@@ -102,6 +133,22 @@ function StripePaymentMethod() {
               Complete Stripe Set Up
             </Button>
           )}
+
+          {isAccountCreated && (
+            <Popover
+              content={
+                <Menu>
+                  <MenuItem
+                    intent={Intent.DANGER}
+                    text={'Delete Connection'}
+                    onClick={handleDeleteConnectionClick}
+                  />
+                </Menu>
+              }
+            >
+              <Button small icon={<MoreIcon size={16} />} />
+            </Popover>
+          )}
         </Group>
       </Group>
 

packages/webapp/src/containers/Preferences/PaymentMethods/alerts/DeleteStripeConnectionAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import { Intent, Alert } from '@blueprintjs/core';
+
+import { AppToaster, FormattedMessage as T } from '@/components';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import { useDeletePaymentMethod } from '@/hooks/query/payment-methods';
+import { compose } from '@/utils';
+
+/**
+ * Delete Stripe connection alert.
+ */
+function DeleteStripeAccountAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { paymentMethodId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { isLoading, mutateAsync: deletePaymentMethod } =
+    useDeletePaymentMethod();
+
+  // Handle cancel open bill alert.
+  const handleCancelOpenBill = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm bill open.
+  const handleConfirmBillOpen = () => {
+    deletePaymentMethod({ paymentMethodId })
+      .then(() => {
+        AppToaster.show({
+          message: 'The Stripe payment account has been deleted.',
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch((error) => {
+        closeAlert(name);
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.SUCCESS,
+        });
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={'Delete Account'}
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelOpenBill}
+      onConfirm={handleConfirmBillOpen}
+      loading={isLoading}
+    >
+      <p>Are you sure want to delete your Stripe account connection?</p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(DeleteStripeAccountAlert);

packages/webapp/src/containers/Preferences/PaymentMethods/alerts/PaymentMethodsAlerts.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import React from 'react';
+
+const DeleteStripeConnectionAlert = React.lazy(
+  () => import('./DeleteStripeConnectionAlert'),
+);
+
+export const PaymentMethodsAlerts = [
+  {
+    name: 'delete-stripe-payment-method',
+    component: DeleteStripeConnectionAlert,
+  },
+];

packages/webapp/src/containers/Preferences/PaymentMethods/drawers/StripeIntegrationEditForm.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import * as Yup from 'yup';
 import { Formik, FormikHelpers } from 'formik';
+import { useUpdatePaymentMethod } from '@/hooks/query/payment-services';
+import { AppToaster } from '@/components';
+import { Intent } from '@blueprintjs/core';
+import { usePaymentMethodsBoot } from '../PreferencesPaymentMethodsBoot';
+import { useDrawerActions } from '@/hooks/state';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 
 interface StripeIntegrationFormValues {
   paymentAccountId: string;
@@ -24,10 +30,34 @@ interface StripeIntegrationEditFormProps {
 export function StripeIntegrationEditForm({
   children,
 }: StripeIntegrationEditFormProps) {
+  const { closeDrawer } = useDrawerActions();
+  const { name } = useDrawerContext();
+  const { mutateAsync: updatePaymentMethod } = useUpdatePaymentMethod();
+  const { paymentMethodsState } = usePaymentMethodsBoot();
+  const stripePaymentState = paymentMethodsState?.stripe;
+  const paymentMethodId = stripePaymentState?.stripePaymentMethodId;
+
   const onSubmit = (
     values: StripeIntegrationFormValues,
     { setSubmitting }: FormikHelpers<StripeIntegrationFormValues>,
   ) => {
+    setSubmitting(true);
+    updatePaymentMethod({ paymentMethodId, values })
+      .then(() => {
+        AppToaster.show({
+          message: 'The Stripe settings have been updated.',
+          intent: Intent.SUCCESS,
+        });
+        setSubmitting(false);
+        closeDrawer(name);
+      })
+      .catch(() => {
+        setSubmitting(false);
+        AppToaster.show({
+          message: 'Something went wrong.',
+          intent: Intent.SUCCESS,
+        });
+      });
   };
 
   return (

packages/webapp/src/containers/Preferences/PaymentMethods/drawers/StripeIntegrationEditFormContent.tsx

@@ -44,7 +44,7 @@ export function StripeIntegrationEditFormContent() {
 export function StripeIntegrationEditFormFooter() {
   const { name } = useDrawerContext();
   const { closeDrawer } = useDrawerActions();
-  const { submitForm } = useFormikContext();
+  const { submitForm, isSubmitting } = useFormikContext();
 
   const handleSubmitBtnClick = () => {
     submitForm();
@@ -56,7 +56,11 @@ export function StripeIntegrationEditFormFooter() {
   return (
     <>
       <Group spacing={10}>
-        <Button intent={Intent.PRIMARY} onClick={handleSubmitBtnClick}>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          onClick={handleSubmitBtnClick}
+        >
           Save
         </Button>
         <Button onClick={handleCancelBtnClick}>Cancel</Button>