Merge pull request #2337 from Civolilah/feature/1875-stripe-connect

[Feature] Settings Card For Stripe Connect | Payment Gateways
invoiceninja · Feb 5, 2025 · e62ffa9 · e62ffa9
2 parents 824fd4f + fe2e6d1
commit e62ffa9
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 2 deletions.
diff --git a/src/common/interfaces/company-gateway.ts b/src/common/interfaces/company-gateway.ts
@@ -8,6 +8,16 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
+interface Settings {
+  general: Record<string, string>;
+  requirements: {
+    currently_due: string[][];
+    past_due: string[][];
+    verification: string[][];
+  };
+  capabilities: Record<string, string>;
+}
+
 export interface CompanyGateway {
   id: string;
   gateway_key: string;
@@ -38,6 +48,7 @@ export interface CompanyGateway {
   token_billing: string;
   test_mode: boolean;
   always_show_required_fields: boolean;
+  settings?: Settings;
 }
 
 export interface FeesAndLimitsEntry {

diff --git a/src/pages/settings/gateways/edit/Edit.tsx b/src/pages/settings/gateways/edit/Edit.tsx
@@ -116,7 +116,7 @@ export function Edit() {
         id="gateways"
         url="https://raw.githubusercontent.com/invoiceninja/invoiceninja.github.io/refs/heads/v5-rework/source/en/gateways.md"
       />
-      
+
       <TabGroup
         tabs={tabs}
         defaultTabIndex={Number(searchParams.get('tab')) ?? 0}

diff --git a/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx b/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx
@@ -8,14 +8,15 @@
  * @license https://www.elastic.co/licensing/elastic-license
  */
 
-import { apiEndpoint } from '$app/common/helpers';
+import { apiEndpoint, isHosted } from '$app/common/helpers';
 import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany';
 import { CompanyGateway } from '$app/common/interfaces/company-gateway';
 import { Card, Element } from '$app/components/cards';
 import { useTranslation } from 'react-i18next';
 import { CopyToClipboard } from '$app/components/CopyToClipboard';
 import { Gateway } from '$app/common/interfaces/statics';
 import collect from 'collect.js';
+import { STRIPE_CONNECT } from '../../index/Gateways';
 
 interface Props {
   companyGateway: CompanyGateway;
@@ -26,6 +27,92 @@ export function WebhookConfiguration(props: Props) {
   const [t] = useTranslation();
   const company = useCurrentCompany();
 
+  const { companyGateway } = props;
+
+  if (companyGateway.gateway_key === STRIPE_CONNECT && isHosted()) {
+    return (
+      <Card title={t('settings')}>
+        {Object.entries(companyGateway?.settings?.general || {}).length > 0 && (
+          <Element leftSide={t('general')}>
+            <ul className="list-disc space-y-2">
+              {Object.entries(companyGateway?.settings?.general || {}).map(
+                ([key, value], index) => (
+                  <li key={index}>
+                    <div className="flex space-x-4">
+                      <span className="flex-shrink-0 min-w-[16.5rem] font-medium">
+                        {t(key)}:
+                      </span>
+
+                      <span>{t(value)}</span>
+                    </div>
+                  </li>
+                )
+              )}
+            </ul>
+          </Element>
+        )}
+
+        {Object.entries(companyGateway?.settings?.requirements || {}).length >
+          0 && (
+          <Element leftSide={t('requirements')}>
+            <ul className="list-disc space-y-4">
+              {Object.entries(companyGateway?.settings?.requirements || {}).map(
+                ([key, arrays]) => {
+                  if (!arrays.length) {
+                    return null;
+                  }
+
+                  const flattenedValues = arrays.flatMap((arr) => arr);
+
+                  return flattenedValues.length > 0 ? (
+                    <li key={key}>
+                      <div className="flex items-center space-x-4">
+                        <span className="font-medium min-w-[16.5rem] flex-shrink-0">
+                          {t(key)}:
+                        </span>
+
+                        <ul className="list-disc ml-0">
+                          {flattenedValues.map((value, index) => (
+                            <li key={index} className="ml-4">
+                              <span className="block break-all">
+                                {t(value)}
+                              </span>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    </li>
+                  ) : null;
+                }
+              )}
+            </ul>
+          </Element>
+        )}
+
+        {Object.entries(companyGateway?.settings?.capabilities || {}).length >
+          0 && (
+          <Element leftSide={t('capabilities')}>
+            <ul className="list-disc space-y-2">
+              {Object.entries(companyGateway?.settings?.capabilities || {}).map(
+                ([key, value], index) => (
+                  <li key={index}>
+                    <div className="flex space-x-4">
+                      <span className="flex-shrink-0 min-w-[16.5rem] font-medium">
+                        {t(key)}:
+                      </span>
+
+                      <span>{t(value)}</span>
+                    </div>
+                  </li>
+                )
+              )}
+            </ul>
+          </Element>
+        )}
+      </Card>
+    );
+  }
+
   return (
     <Card title={t('webhooks')}>
       <Element leftSide={t('webhook_url')}>