From f72f6b8992f682df369a3e6190d1f6fd4c981425 Mon Sep 17 00:00:00 2001 From: Civolilah Date: Thu, 30 Jan 2025 19:51:48 +0100 Subject: [PATCH 1/4] Refactored edit payment page with settings object displaying --- src/common/interfaces/company-gateway.ts | 15 ++ src/pages/settings/gateways/edit/Edit.tsx | 57 +++++++- .../edit/components/WebhookConfiguration.tsx | 135 +++++++++++++++++- 3 files changed, 204 insertions(+), 3 deletions(-) diff --git a/src/common/interfaces/company-gateway.ts b/src/common/interfaces/company-gateway.ts index d849e3d2fc..08d69c6ea4 100644 --- a/src/common/interfaces/company-gateway.ts +++ b/src/common/interfaces/company-gateway.ts @@ -8,6 +8,20 @@ * @license https://www.elastic.co/licensing/elastic-license */ +interface Requirements { + requirements: ( + | { currently_due: Record[] } + | { past_due: Record[] } + | { verification: Record[] } + )[]; +} + +interface Settings { + general: Record; + requirements: Requirements[]; + capabilities: Record; +} + export interface CompanyGateway { id: string; gateway_key: string; @@ -38,6 +52,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 index c05f553ac2..23c5b7371e 100644 --- a/src/pages/settings/gateways/edit/Edit.tsx +++ b/src/pages/settings/gateways/edit/Edit.tsx @@ -79,8 +79,61 @@ export function Edit() { }, [companyGateway, gateways]); useEffect(() => { + const settings = { + general: { + 'Payouts Enabled': 'No', + 'Dashboard Display Name': '', + 'Dashboard Timezone': '', + 'Statement Descriptor': 'WWW.050SS.NET', + 'Statement Descriptor Prefix': '050SS', + 'Support Address City': '', + 'Support Address Country': '', + 'Support Address Line 1': '', + 'Support Address Postal Code': '', + 'Support Address State': '', + 'Default Currency': 'usd', + Country: 'CA', + }, + requirements: [ + { + currently_due: [], + }, + { + past_due: [], + }, + { + verification: [ + { + 'legal_entity.documents.proof_of_registration.files': + "Directors on the document don't match the account. The users that are missing from your account are: MARK TOKENSTEIN.", + }, + { + 'legal_entity.verification.additional_document': + 'The same type of document was used twice. Two unique documents are required.', + }, + ], + }, + ], + capabilities: { + acss_debit_payments: 'active', + affirm_payments: 'active', + afterpay_clearpay_payments: 'active', + bancontact_payments: 'active', + card_payments: 'active', + eps_payments: 'active', + giropay_payments: 'active', + ideal_payments: 'active', + klarna_payments: 'active', + link_payments: 'active', + p24_payments: 'active', + sepa_debit_payments: 'active', + sofort_payments: 'active', + platform_payments: 'active', + }, + }; + if (data?.data.data) { - setCompanyGateway(data.data.data); + setCompanyGateway({ ...data.data.data, settings }); } }, [data]); @@ -116,7 +169,7 @@ export function Edit() { id="gateways" url="https://raw.githubusercontent.com/invoiceninja/invoiceninja.github.io/refs/heads/v5-rework/source/en/gateways.md" /> - + + +
    + {collect(Object.entries(companyGateway?.settings?.general || {})) + .filter(([, value]) => value !== null && value !== '') + .map(([key, value]) => `${key}: ${value}`) + .unique() + .all() + .sort() + .map((element: string, index: number) => ( +
  • {element}
    • + ))} +
+ + + +
    + {companyGateway?.settings?.requirements?.map( + (requirementGroup, index) => { + if ( + ('verification' in requirementGroup && + Array.isArray(requirementGroup.verification) && + !requirementGroup.verification.length) || + ('currently_due' in requirementGroup && + Array.isArray(requirementGroup.currently_due) && + !requirementGroup.currently_due.length) || + ('past_due' in requirementGroup && + Array.isArray(requirementGroup.past_due) && + !requirementGroup.past_due.length) + ) { + return null; + } + + return ( +
  • + {'verification' in requirementGroup && + Array.isArray(requirementGroup.verification) && + requirementGroup.verification.length > 0 && ( +
    + {t('verification')}: + +
      + {requirementGroup.verification.map( + (verificationItem, vIndex) => + Object.entries(verificationItem).map( + ([key, value], subIndex) => ( +
    • + {key}:{' '} + {value?.toString()} +
      • + ) + ) + )} +
    +
    + )} + + {'currently_due' in requirementGroup && + Array.isArray(requirementGroup.currently_due) && + requirementGroup.currently_due.length > 0 && ( +
    + + {t('currently_due')}: + +
      + {requirementGroup.currently_due.map( + (currentItem, cIndex) => + Object.entries(currentItem).map( + ([key, value], subIndex) => ( +
    • + {key}:{' '} + {value?.toString()} +
      • + ) + ) + )} +
    +
    + )} + + {'past_due' in requirementGroup && + Array.isArray(requirementGroup.past_due) && + requirementGroup.past_due.length > 0 && ( +
    + {t('past_due')}: +
      + {requirementGroup.past_due.map((pastItem, pIndex) => + Object.entries(pastItem).map( + ([key, value], subIndex) => ( +
    • + {key}: {value?.toString()} +
      • + ) + ) + )} +
    +
    + )} +
    • + ); + } + )} +
+ + + +
    + {Object.entries(companyGateway?.settings?.capabilities || {}) + .filter(([, value]) => value !== null && value !== '') + .sort(([a], [b]) => a.localeCompare(b)) + .map(([key, value], index) => ( +
  • {`${t(key)}: ${t(value)}`}
    • + ))} +
+ + + ); + } + return ( From 196defc7a2e14f0dfb6b70e349aab4fed4044461 Mon Sep 17 00:00:00 2001 From: Civolilah Date: Fri, 31 Jan 2025 02:25:15 +0100 Subject: [PATCH 2/4] Adjusted solution --- src/common/interfaces/company-gateway.ts | 10 +- src/pages/settings/gateways/edit/Edit.tsx | 55 +----- .../edit/components/WebhookConfiguration.tsx | 162 +++++------------- 3 files changed, 43 insertions(+), 184 deletions(-) diff --git a/src/common/interfaces/company-gateway.ts b/src/common/interfaces/company-gateway.ts index 08d69c6ea4..bfcaf28893 100644 --- a/src/common/interfaces/company-gateway.ts +++ b/src/common/interfaces/company-gateway.ts @@ -8,17 +8,9 @@ * @license https://www.elastic.co/licensing/elastic-license */ -interface Requirements { - requirements: ( - | { currently_due: Record[] } - | { past_due: Record[] } - | { verification: Record[] } - )[]; -} - interface Settings { general: Record; - requirements: Requirements[]; + requirements: Record; capabilities: Record; } diff --git a/src/pages/settings/gateways/edit/Edit.tsx b/src/pages/settings/gateways/edit/Edit.tsx index 23c5b7371e..255efcff3f 100644 --- a/src/pages/settings/gateways/edit/Edit.tsx +++ b/src/pages/settings/gateways/edit/Edit.tsx @@ -79,61 +79,8 @@ export function Edit() { }, [companyGateway, gateways]); useEffect(() => { - const settings = { - general: { - 'Payouts Enabled': 'No', - 'Dashboard Display Name': '', - 'Dashboard Timezone': '', - 'Statement Descriptor': 'WWW.050SS.NET', - 'Statement Descriptor Prefix': '050SS', - 'Support Address City': '', - 'Support Address Country': '', - 'Support Address Line 1': '', - 'Support Address Postal Code': '', - 'Support Address State': '', - 'Default Currency': 'usd', - Country: 'CA', - }, - requirements: [ - { - currently_due: [], - }, - { - past_due: [], - }, - { - verification: [ - { - 'legal_entity.documents.proof_of_registration.files': - "Directors on the document don't match the account. The users that are missing from your account are: MARK TOKENSTEIN.", - }, - { - 'legal_entity.verification.additional_document': - 'The same type of document was used twice. Two unique documents are required.', - }, - ], - }, - ], - capabilities: { - acss_debit_payments: 'active', - affirm_payments: 'active', - afterpay_clearpay_payments: 'active', - bancontact_payments: 'active', - card_payments: 'active', - eps_payments: 'active', - giropay_payments: 'active', - ideal_payments: 'active', - klarna_payments: 'active', - link_payments: 'active', - p24_payments: 'active', - sepa_debit_payments: 'active', - sofort_payments: 'active', - platform_payments: 'active', - }, - }; - if (data?.data.data) { - setCompanyGateway({ ...data.data.data, settings }); + setCompanyGateway(data.data.data); } }, [data]); diff --git a/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx b/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx index d62ab5ccf2..d6fe388c49 100644 --- a/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx +++ b/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx @@ -32,129 +32,49 @@ export function WebhookConfiguration(props: Props) { if (companyGateway.gateway_key === STRIPE_CONNECT && isHosted()) { return ( - -
    - {collect(Object.entries(companyGateway?.settings?.general || {})) - .filter(([, value]) => value !== null && value !== '') - .map(([key, value]) => `${key}: ${value}`) - .unique() - .all() - .sort() - .map((element: string, index: number) => ( -
  • {element}
    • - ))} -
- + {Object.entries(companyGateway?.settings?.general || {}).length > 0 && ( + +
    + {Object.entries(companyGateway?.settings?.general || {}).map( + ([key, value], index) => ( +
  • {`${t(key)}${ + value ? `: ${t(value)}` : '' + }`}
    • + ) + )} +
+ + )} - -
    - {companyGateway?.settings?.requirements?.map( - (requirementGroup, index) => { - if ( - ('verification' in requirementGroup && - Array.isArray(requirementGroup.verification) && - !requirementGroup.verification.length) || - ('currently_due' in requirementGroup && - Array.isArray(requirementGroup.currently_due) && - !requirementGroup.currently_due.length) || - ('past_due' in requirementGroup && - Array.isArray(requirementGroup.past_due) && - !requirementGroup.past_due.length) - ) { - return null; - } + {Object.entries(companyGateway?.settings?.requirements || {}).length > + 0 && ( + +
      + {Object.entries(companyGateway?.settings?.requirements || {}).map( + ([key, value], index) => ( +
    • {`${t(key)}${ + value ? `: ${t(value)}` : '' + }`}
      • + ) + )} +
    +     + )} - return ( -
  • - {'verification' in requirementGroup && - Array.isArray(requirementGroup.verification) && - requirementGroup.verification.length > 0 && ( -
    - {t('verification')}: - -
      - {requirementGroup.verification.map( - (verificationItem, vIndex) => - Object.entries(verificationItem).map( - ([key, value], subIndex) => ( -
    • - {key}:{' '} - {value?.toString()} -
      • - ) - ) - )} -
    -
    - )} - - {'currently_due' in requirementGroup && - Array.isArray(requirementGroup.currently_due) && - requirementGroup.currently_due.length > 0 && ( -
    - - {t('currently_due')}: - -
      - {requirementGroup.currently_due.map( - (currentItem, cIndex) => - Object.entries(currentItem).map( - ([key, value], subIndex) => ( -
    • - {key}:{' '} - {value?.toString()} -
      • - ) - ) - )} -
    -
    - )} - - {'past_due' in requirementGroup && - Array.isArray(requirementGroup.past_due) && - requirementGroup.past_due.length > 0 && ( -
    - {t('past_due')}: -
      - {requirementGroup.past_due.map((pastItem, pIndex) => - Object.entries(pastItem).map( - ([key, value], subIndex) => ( -
    • - {key}: {value?.toString()} -
      • - ) - ) - )} -
    -
    - )} -
    • - ); - } - )} -
- - - -
    - {Object.entries(companyGateway?.settings?.capabilities || {}) - .filter(([, value]) => value !== null && value !== '') - .sort(([a], [b]) => a.localeCompare(b)) - .map(([key, value], index) => ( -
  • {`${t(key)}: ${t(value)}`}
    • - ))} -
- + {Object.entries(companyGateway?.settings?.capabilities || {}).length > + 0 && ( + +
    + {Object.entries(companyGateway?.settings?.capabilities || {}).map( + ([key, value], index) => ( +
  • {`${t(key)}${ + value ? `: ${t(value)}` : '' + }`}
    • + ) + )} +
+ + )} ); } From 3ddcff1bdd46426d2f40eff193291e22d70f2b41 Mon Sep 17 00:00:00 2001 From: Civolilah Date: Sun, 2 Feb 2025 19:06:04 +0100 Subject: [PATCH 3/4] Adjusted solution --- src/common/interfaces/company-gateway.ts | 6 +++- .../edit/components/WebhookConfiguration.tsx | 28 +++++++++++++++---- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/common/interfaces/company-gateway.ts b/src/common/interfaces/company-gateway.ts index bfcaf28893..74de53c065 100644 --- a/src/common/interfaces/company-gateway.ts +++ b/src/common/interfaces/company-gateway.ts @@ -10,7 +10,11 @@ interface Settings { general: Record; - requirements: Record; + requirements: { + currently_due: string[][]; + past_due: string[][]; + verification: string[][]; + }; capabilities: Record; } diff --git a/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx b/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx index d6fe388c49..d43d9730a5 100644 --- a/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx +++ b/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx @@ -49,13 +49,29 @@ export function WebhookConfiguration(props: Props) { {Object.entries(companyGateway?.settings?.requirements || {}).length > 0 && ( -
    +
      {Object.entries(companyGateway?.settings?.requirements || {}).map( - ([key, value], index) => ( -
    • {`${t(key)}${ - value ? `: ${t(value)}` : '' - }`}
      • - ) + ([key, arrays]) => { + if (!arrays.length) { + return null; + } + + const flattenedValues = arrays.flatMap((arr) => arr); + + return flattenedValues.length > 0 ? ( +
    • +
      + {t(key)}: + +
        + {flattenedValues.map((value, index) => ( +
      • {t(value)}
        • + ))} +
      +
      +
      • + ) : null; + } )}
    From 8350045803f65f3110424cb0f531ad2b4b629314 Mon Sep 17 00:00:00 2001 From: Civolilah Date: Mon, 3 Feb 2025 02:07:09 +0100 Subject: [PATCH 4/4] Adjusted solution --- .../edit/components/WebhookConfiguration.tsx | 44 +++++++++++++------ 1 file changed, 31 insertions(+), 13 deletions(-) diff --git a/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx b/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx index d43d9730a5..0e013b18f9 100644 --- a/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx +++ b/src/pages/settings/gateways/edit/components/WebhookConfiguration.tsx @@ -34,12 +34,18 @@ export function WebhookConfiguration(props: Props) { {Object.entries(companyGateway?.settings?.general || {}).length > 0 && ( -
      +
        {Object.entries(companyGateway?.settings?.general || {}).map( ([key, value], index) => ( -
      • {`${t(key)}${ - value ? `: ${t(value)}` : '' - }`}
        • +
      • +
        + + {t(key)}: + + + {t(value)} +
        +
        • ) )}
      @@ -49,7 +55,7 @@ export function WebhookConfiguration(props: Props) { {Object.entries(companyGateway?.settings?.requirements || {}).length > 0 && ( -
        +
          {Object.entries(companyGateway?.settings?.requirements || {}).map( ([key, arrays]) => { if (!arrays.length) { @@ -60,12 +66,18 @@ export function WebhookConfiguration(props: Props) { return flattenedValues.length > 0 ? (
        • -
          - {t(key)}: +
          + + {t(key)}: + -
            +
              {flattenedValues.map((value, index) => ( -
            • {t(value)}
              • +
            • + + {t(value)} + +
              • ))}
          @@ -80,12 +92,18 @@ export function WebhookConfiguration(props: Props) { {Object.entries(companyGateway?.settings?.capabilities || {}).length > 0 && ( -
            +
              {Object.entries(companyGateway?.settings?.capabilities || {}).map( ([key, value], index) => ( -
            • {`${t(key)}${ - value ? `: ${t(value)}` : '' - }`}
              • +
            • +
              + + {t(key)}: + + + {t(value)} +
              +
              • ) )}