Fix/handle errors from payment provider (#2584)

* add error handling for pay action * fix table caption * add company payer to receipt * add company contact person to receipt
Altinn · Oct 23, 2024 · 663f64a · 663f64a
1 parent 86cc5a5
commit 663f64a
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 47 deletions.
diff --git a/src/features/payment/PaymentInformationProvider.tsx b/src/features/payment/PaymentInformationProvider.tsx
@@ -30,14 +30,14 @@ const usePaymentInformationQuery = () => {
   const instanceId = useLaxInstanceId();
   const enabled = useIsPayment();
 
-  const utils = useQuery(usePaymentInformationQueryDef(enabled, instanceId));
+  const result = useQuery(usePaymentInformationQueryDef(enabled, instanceId));
 
   useEffect(() => {
-    utils.error && window.logError('Fetching paymentInfo failed:\n', utils.error);
-  }, [utils.error]);
+    result.error && window.logError('Fetching paymentInfo failed:\n', result.error);
+  }, [result.error]);
 
   return {
-    ...utils,
+    ...result,
     enabled,
   };
 };

diff --git a/src/features/payment/types.ts b/src/features/payment/types.ts
@@ -61,6 +61,7 @@ interface Address {
 interface Company {
   organisationNumber?: string;
   name?: string;
+  ContactPerson?: Person;
 }
 
 interface Payer {

diff --git a/src/language/texts/en.ts b/src/language/texts/en.ts
@@ -291,6 +291,11 @@ export function en() {
         receiver: 'Receiver',
         payer: 'Payer',
         name: 'Name',
+        company_name: 'Company name',
+        org_number: 'Organisasjonsnummer',
+        contact_person: 'Contact person',
+        contact_phone: 'Contact phone',
+        contact_email: 'Contact email',
         phone: 'Phone',
         address: 'Address',
         org_num: 'Org number',

diff --git a/src/language/texts/nb.ts b/src/language/texts/nb.ts
@@ -293,6 +293,11 @@ export function nb(): FixedLanguageList {
         payer: 'Betaler',
         name: 'Navn',
         phone: 'Telefon',
+        company_name: 'Firmanavn',
+        org_number: 'Organisasjonsnummer',
+        contact_person: 'Kontaktperson',
+        contact_phone: 'Kontakttelefon',
+        contact_email: 'Kontakte-post',
         address: 'Addresse',
         org_num: 'Organisasjonsnummer',
         account_number: 'Kontonummer',

diff --git a/src/language/texts/nn.ts b/src/language/texts/nn.ts
@@ -292,6 +292,11 @@ export function nn(): FixedLanguageList {
         receiver: 'Mottaker',
         payer: 'Betaler',
         name: 'Navn',
+        company_name: 'Firmanavn',
+        org_number: 'Organisasjonsnummer',
+        contact_person: 'Kontaktperson',
+        contact_phone: 'Kontakttelefon',
+        contact_email: 'Kontakt-e-post',
         phone: 'Telefon',
         address: 'Addresse',
         org_num: 'Organisasjonsnummer',

diff --git a/src/layout/Payment/PaymentComponent.module.css b/src/layout/Payment/PaymentComponent.module.css
@@ -1,5 +1,16 @@
 .buttonContainer {
   display: flex;
   gap: var(--fds-spacing-3);
-  padding: var(--fds-spacing-3) 0;
+}
+
+.alertContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fds-spacing-3);
+}
+
+.paymentContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fds-spacing-6);
 }
diff --git a/src/layout/Payment/PaymentComponent.tsx b/src/layout/Payment/PaymentComponent.tsx
@@ -20,7 +20,7 @@ export const PaymentComponent = ({ node }: PropsFromGenericComponent<'Payment'>)
   const instanceGuid = useNavigationParam('instanceGuid');
   const { next, busy } = useProcessNavigation() || {};
   const paymentInfo = usePaymentInformation();
-  const { mutate: performPayment } = usePerformPayActionMutation(partyId, instanceGuid);
+  const { mutate: performPayment, error: paymentError } = usePerformPayActionMutation(partyId, instanceGuid);
   const paymentDoesNotExist = paymentInfo?.status === PaymentStatus.Uninitialized;
   const { title, description } = useNodeItem(node, (i) => i.textResourceBindings) ?? {};
   const actionCalled = useRef(false);
@@ -45,54 +45,56 @@ export const PaymentComponent = ({ node }: PropsFromGenericComponent<'Payment'>)
     }
   }, [paymentInfo, next]);
 
-  if (busy || paymentDoesNotExist) {
+  if ((busy || paymentDoesNotExist) && !paymentError) {
     return <SkeletonLoader />;
   }
 
   return (
     <ComponentStructureWrapper node={node}>
-      <PaymentDetailsTable
-        orderDetails={paymentInfo?.orderDetails}
-        tableTitle={title}
-        description={description}
-      />
-      <div>
-        {paymentInfo?.status === PaymentStatus.Failed && (
-          <Alert severity='warning'>
-            <Lang id='payment.alert.failed' />
-          </Alert>
-        )}
-        {paymentInfo?.status === PaymentStatus.Paid && (
-          <Alert severity={'info'}>
-            <Lang id='payment.alert.paid' />
-          </Alert>
-        )}
-      </div>
-      <div className={classes.buttonContainer}>
-        {paymentInfo?.status === PaymentStatus.Created && (
-          <>
+      <div className={classes.paymentContainer}>
+        <PaymentDetailsTable
+          orderDetails={paymentInfo?.orderDetails}
+          tableTitle={title}
+          description={description}
+        />
+        <div className={classes.alertContainer}>
+          {(paymentInfo?.status === PaymentStatus.Failed || paymentError) && (
+            <Alert severity='warning'>
+              <Lang id='payment.alert.failed' />
+            </Alert>
+          )}
+          {paymentInfo?.status === PaymentStatus.Paid && (
+            <Alert severity={'info'}>
+              <Lang id='payment.alert.paid' />
+            </Alert>
+          )}
+        </div>
+        <div className={classes.buttonContainer}>
+          {(paymentInfo?.status === PaymentStatus.Created || paymentError) && (
+            <>
+              <Button
+                variant='secondary'
+                onClick={() => next && next({ action: 'reject', nodeId: 'reject-button' })}
+              >
+                <Lang id='general.back' />
+              </Button>
+              <Button
+                color='success'
+                onClick={() => performPayment()}
+              >
+                <Lang id='payment.pay' />
+              </Button>
+            </>
+          )}
+          {paymentInfo?.status === PaymentStatus.Paid && (
             <Button
               variant='secondary'
-              onClick={() => next && next({ action: 'reject', nodeId: 'reject-button' })}
-            >
-              <Lang id='general.back' />
-            </Button>
-            <Button
-              color='success'
-              onClick={() => performPayment()}
+              onClick={() => next && next({ action: 'confirm', nodeId: 'next-button' })}
             >
-              <Lang id='payment.pay' />
+              <Lang id='general.next' />
             </Button>
-          </>
-        )}
-        {paymentInfo?.status === PaymentStatus.Paid && (
-          <Button
-            variant='secondary'
-            onClick={() => next && next({ action: 'confirm', nodeId: 'next-button' })}
-          >
-            <Lang id='general.next' />
-          </Button>
-        )}
+          )}
+        </div>
       </div>
     </ComponentStructureWrapper>
   );

diff --git a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
@@ -72,6 +72,7 @@ export const PaymentReceiptDetails = ({ title, description }: PaymentReceiptDeta
   const receiver = paymentInfo?.orderDetails?.receiver;
   const payer = paymentInfo?.paymentDetails?.payer;
   const privatePersonPayer = payer?.privatePerson;
+  const companyPayer = payer?.company;
   const cardExpiryDate = paymentInfo?.paymentDetails?.cardDetails?.expiryDate;
   const receiverPostalAddress = receiver?.postalAddress;
   const payerPostalAddress = payer?.shippingAddress;
@@ -100,11 +101,28 @@ export const PaymentReceiptDetails = ({ title, description }: PaymentReceiptDeta
       labelId: 'payment.receipt.phone',
       value: `${privatePersonPayer.phoneNumber.prefix} ${privatePersonPayer.phoneNumber.number}`,
     },
+    privatePersonPayer?.email && { labelId: 'payment.receipt.email', value: privatePersonPayer.email },
+    companyPayer?.name && { labelId: 'payment.receipt.company_name', value: companyPayer.name },
+    companyPayer?.organisationNumber && {
+      labelId: 'payment.receipt.org_number',
+      value: companyPayer.organisationNumber,
+    },
+    companyPayer?.ContactPerson?.firstName && {
+      labelId: 'payment.receipt.contact_person',
+      value: `${companyPayer.ContactPerson.firstName} ${companyPayer.ContactPerson.lastName}`,
+    },
+    companyPayer?.ContactPerson?.phoneNumber?.number && {
+      labelId: 'payment.receipt.contact_phone',
+      value: `${companyPayer.ContactPerson.phoneNumber.prefix} ${companyPayer.ContactPerson.phoneNumber.number}`,
+    },
+    companyPayer?.ContactPerson?.email && {
+      labelId: 'payment.receipt.contact_email',
+      value: companyPayer.ContactPerson.email,
+    },
     payerPostalAddress && {
       labelId: 'payment.receipt.address',
       value: `${payerPostalAddress?.addressLine1} ${payerPostalAddress?.postalCode} ${payerPostalAddress?.city} ${payerPostalAddress?.country}`,
     },
-    privatePersonPayer?.email && { labelId: 'payment.receipt.email', value: privatePersonPayer.email },
     paymentInfo?.paymentDetails?.cardDetails?.maskedPan && {
       labelId: 'payment.receipt.card_number',
       value: paymentInfo?.paymentDetails?.cardDetails?.maskedPan,

diff --git a/src/layout/PaymentDetails/PaymentDetailsTable.tsx b/src/layout/PaymentDetails/PaymentDetailsTable.tsx
@@ -22,7 +22,7 @@ export const PaymentDetailsTable = ({ orderDetails, tableTitle, description, ...
     {tableTitle && (
       <Caption
         title={<Lang id={tableTitle} />}
-        description={<Lang id={description} />}
+        description={description && <Lang id={description} />}
       />
     )}