From 663f64a333abf9035a5b34a8cc55fed456cb13ec Mon Sep 17 00:00:00 2001 From: Magnus Revheim Martinsen Date: Wed, 23 Oct 2024 11:59:46 +0200 Subject: [PATCH] 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 --- .../payment/PaymentInformationProvider.tsx | 8 +- src/features/payment/types.ts | 1 + src/language/texts/en.ts | 5 ++ src/language/texts/nb.ts | 5 ++ src/language/texts/nn.ts | 5 ++ .../Payment/PaymentComponent.module.css | 13 ++- src/layout/Payment/PaymentComponent.tsx | 82 ++++++++++--------- .../PaymentReceiptDetails.tsx | 20 ++++- .../PaymentDetails/PaymentDetailsTable.tsx | 2 +- 9 files changed, 94 insertions(+), 47 deletions(-) diff --git a/src/features/payment/PaymentInformationProvider.tsx b/src/features/payment/PaymentInformationProvider.tsx index c5e9b3aa26..11bcbce1f7 100644 --- 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 index 3a4478ba57..d2a37c7944 100644 --- 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 index a568024410..700c02a9a6 100644 --- 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 index 02747e4b6b..6848b0feff 100644 --- 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 index 91c3bc1925..89ff4972be 100644 --- 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 index 2328636fcb..df8a49952a 100644 --- 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 index ade54b0842..98baf67d39 100644 --- 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 ; } return ( - -
- {paymentInfo?.status === PaymentStatus.Failed && ( - - - - )} - {paymentInfo?.status === PaymentStatus.Paid && ( - - - - )} -
-
- {paymentInfo?.status === PaymentStatus.Created && ( - <> +
+ +
+ {(paymentInfo?.status === PaymentStatus.Failed || paymentError) && ( + + + + )} + {paymentInfo?.status === PaymentStatus.Paid && ( + + + + )} +
+
+ {(paymentInfo?.status === PaymentStatus.Created || paymentError) && ( + <> + + + + )} + {paymentInfo?.status === PaymentStatus.Paid && ( - - - )} - {paymentInfo?.status === PaymentStatus.Paid && ( - - )} + )} +
); diff --git a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx index 865b3da803..75016754e3 100644 --- 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 index f84aeb495c..cf8d46c769 100644 --- a/src/layout/PaymentDetails/PaymentDetailsTable.tsx +++ b/src/layout/PaymentDetails/PaymentDetailsTable.tsx @@ -22,7 +22,7 @@ export const PaymentDetailsTable = ({ orderDetails, tableTitle, description, ... {tableTitle && ( } - description={} + description={description && } /> )}