Creating solution for notification modal of duplicating gateways

invoiceninja · Jan 21, 2025 · eb9fcfb · eb9fcfb
1 parent 0a65cb0
commit eb9fcfb
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 31 deletions.
diff --git a/src/common/queries/company-gateways.ts b/src/common/queries/company-gateways.ts
@@ -19,6 +19,7 @@ import { $refetch } from '../hooks/useRefetch';
 
 interface CompanyGatewaysParams {
   status?: string;
+  perPage?: string;
 }
 export function useCompanyGatewaysQuery(params?: CompanyGatewaysParams) {
   const { isAdmin } = useAdmin();
@@ -30,9 +31,13 @@ export function useCompanyGatewaysQuery(params?: CompanyGatewaysParams) {
     () =>
       request(
         'GET',
-        endpoint('/api/v1/company_gateways?sort=id|desc&status=:status', {
-          status: status || 'active',
-        })
+        endpoint(
+          '/api/v1/company_gateways?sort=id|desc&status=:status&per_page=:perPage',
+          {
+            status: status || 'active',
+            perPage: params?.perPage ?? '100',
+          }
+        )
       ),
     { staleTime: Infinity, enabled: isAdmin }
   );

diff --git a/src/pages/settings/gateways/create/Create.tsx b/src/pages/settings/gateways/create/Create.tsx
@@ -13,7 +13,10 @@ import { Button, Link, SelectField } from '$app/components/forms';
 import { useTitle } from '$app/common/hooks/useTitle';
 import { CompanyGateway } from '$app/common/interfaces/company-gateway';
 import { Gateway } from '$app/common/interfaces/statics';
-import { useBlankCompanyGatewayQuery } from '$app/common/queries/company-gateways';
+import {
+  useBlankCompanyGatewayQuery,
+  useCompanyGatewaysQuery,
+} from '$app/common/queries/company-gateways';
 import { Settings } from '$app/components/layouts/Settings';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -39,6 +42,7 @@ import { arrayMoveImmutable } from 'array-move';
 import { useHandleGoCardless } from '$app/pages/settings/gateways/create/hooks/useHandleGoCardless';
 import classNames from 'classnames';
 import { HelpWidget } from '$app/components/HelpWidget';
+import { DuplicatingGatewayModal } from './components/DuplicatingGatewayModal';
 
 const gatewaysStyles = [
   { name: 'paypal_ppcp', width: 110 },
@@ -82,29 +86,81 @@ export function Create() {
 
   const { documentTitle } = useTitle('add_gateway');
 
-  const { data: blankCompanyGateway } = useBlankCompanyGatewayQuery();
-
-  const [companyGateway, setCompanyGateway] = useState<CompanyGateway>();
+  const pages = [
+    { name: t('settings'), href: '/settings' },
+    { name: t('online_payments'), href: '/settings/online_payments' },
+    { name: t('add_gateway'), href: '/settings/gateways/create' },
+  ];
 
-  const [errors, setErrors] = useState<ValidationBag>();
+  const defaultTab = [t('payment_provider')];
 
-  const [gateway, setGateway] = useState<Gateway>();
+  const additionalTabs = [
+    t('credentials'),
+    t('settings'),
+    t('required_fields'),
+    t('limits_and_fees'),
+  ];
 
-  const [filteredGateways, setFilteredGateways] = useState<Gateway[]>([]);
+  const gateways = useGateways();
 
-  const [createBySetup, setCreateBySetup] = useState<boolean>(false);
+  const { data: blankCompanyGateway } = useBlankCompanyGatewayQuery();
+  const { data: companyGatewaysResponse } = useCompanyGatewaysQuery({
+    status: 'active',
+    perPage: '1000',
+  });
 
+  const [gateway, setGateway] = useState<Gateway>();
   const [tabIndex, setTabIndex] = useState<number>(0);
-
-  const gateways = useGateways();
+  const [errors, setErrors] = useState<ValidationBag>();
+  const [tabs, setTabs] = useState<string[]>(defaultTab);
+  const [createBySetup, setCreateBySetup] = useState<boolean>(false);
+  const [companyGateway, setCompanyGateway] = useState<CompanyGateway>();
+  const [filteredGateways, setFilteredGateways] = useState<Gateway[]>([]);
+  const [isDuplicatingGatewayModalOpen, setIsDuplicatingGatewayModalOpen] =
+    useState<boolean>(false);
 
   const onSave = useHandleCreate(companyGateway, setErrors);
 
   const handleChange = (value: string, isManualChange?: boolean) => {
     const gateway = gateways.find((gateway) => gateway.id === value);
 
+    const isDuplicating =
+      gateway &&
+      companyGatewaysResponse?.data.data.some(
+        (companyGateway: CompanyGateway) =>
+          companyGateway.gateway_key === gateway?.key
+      );
+
+    console.log(gateway, isDuplicating);
+
+    if (isDuplicating) {
+      setIsDuplicatingGatewayModalOpen(true);
+    }
+
     setGateway(gateway);
 
+    if (gateway?.key === '80af24a6a691230bbec33e930ab40666' && !isDuplicating) {
+      return handleSetup();
+    }
+
+    if (gateway?.key === 'd14dd26a47cecc30fdd65700bfb67b34' && !isDuplicating) {
+      return handleStripeSetup();
+    }
+
+    if (
+      gateway?.key === 'b9886f9257f0c6ee7c302f1c74475f6c' &&
+      isHosted() &&
+      !isDuplicating
+    ) {
+      return handleGoCardless();
+    }
+
+    if (isManualChange && value && !isDuplicating) {
+      setTabIndex(1);
+    }
+  };
+
+  const handleOnDuplicatingGatewayConfirm = () => {
     if (gateway?.key === '80af24a6a691230bbec33e930ab40666') {
       return handleSetup();
     }
@@ -117,9 +173,16 @@ export function Create() {
       return handleGoCardless();
     }
 
-    if (isManualChange && value) {
+    if (gateway) {
       setTabIndex(1);
     }
+
+    setIsDuplicatingGatewayModalOpen(false);
+  };
+
+  const handleOnDuplicatingGatewayCancel = () => {
+    setGateway(undefined);
+    setIsDuplicatingGatewayModalOpen(false);
   };
 
   const handleSetup = () => {
@@ -154,23 +217,6 @@ export function Create() {
 
   const handleGoCardless = useHandleGoCardless();
 
-  const defaultTab = [t('payment_provider')];
-
-  const additionalTabs = [
-    t('credentials'),
-    t('settings'),
-    t('required_fields'),
-    t('limits_and_fees'),
-  ];
-
-  const pages = [
-    { name: t('settings'), href: '/settings' },
-    { name: t('online_payments'), href: '/settings/online_payments' },
-    { name: t('add_gateway'), href: '/settings/gateways/create' },
-  ];
-
-  const [tabs, setTabs] = useState<string[]>(defaultTab);
-
   const getGatewayNameByKey = (key: string) => {
     const gateway = gatewaysDetails.find((gateway) => gateway.key === key);
 
@@ -298,6 +344,13 @@ export function Create() {
         url="https://raw.githubusercontent.com/invoiceninja/invoiceninja.github.io/refs/heads/v5-rework/source/en/gateways.md"
       />
 
+      <DuplicatingGatewayModal
+        visible={isDuplicatingGatewayModalOpen}
+        setVisible={setIsDuplicatingGatewayModalOpen}
+        onConfirm={handleOnDuplicatingGatewayConfirm}
+        onCancel={handleOnDuplicatingGatewayCancel}
+      />
+
       <TabGroup
         tabs={tabs}
         defaultTabIndex={tabIndex}

diff --git a/src/pages/settings/gateways/create/components/DuplicatingGatewayModal.tsx b/src/pages/settings/gateways/create/components/DuplicatingGatewayModal.tsx
@@ -0,0 +1,60 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2022. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+import { Button } from '$app/components/forms';
+import { Icon } from '$app/components/icons/Icon';
+import { Modal } from '$app/components/Modal';
+import { Dispatch } from 'react';
+
+import { SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MdInfo } from 'react-icons/md';
+
+interface Props {
+  visible: boolean;
+  setVisible: Dispatch<SetStateAction<boolean>>;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function DuplicatingGatewayModal(props: Props) {
+  const { t } = useTranslation();
+
+  const { visible, setVisible, onConfirm, onCancel } = props;
+
+  return (
+    <Modal
+      title={t('existing_gateway')}
+      visible={visible}
+      onClose={() => setVisible(false)}
+    >
+      <div className="flex flex-col space-y-5">
+        <div className="flex items-center justify-between">
+          <div>
+            <Icon element={MdInfo} size={24} />
+          </div>
+
+          <span className="font-medium text-center">
+            This gateway is already configured for this company, do you want to
+            create a new one?
+          </span>
+        </div>
+
+        <div className="flex justify-between">
+          <Button behavior="button" type="secondary" onClick={onCancel}>
+            {t('no')}
+          </Button>
+
+          <Button onClick={onConfirm}>{t('yes')}</Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}