fix: #10083 payments app timeout patch

reapit · Nov 9, 2023 · ad2af6c · ad2af6c
1 parent 31acce9
commit ad2af6c
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 17 deletions.
diff --git a/packages/payments-service/cdk/cdk.ts b/packages/payments-service/cdk/cdk.ts
@@ -12,5 +12,4 @@ const bootstrap = async () => {
   await createStack()
 }
 
-bootstrap()
-  .catch(error => console.error(error))
+bootstrap().catch((error) => console.error(error))
diff --git a/packages/payments-service/src/opayo/dto.ts b/packages/payments-service/src/opayo/dto.ts
@@ -1,4 +1,4 @@
-import { IsEnum, IsNotEmpty, IsNumber, IsObject, IsString } from 'class-validator'
+import { IsEnum, IsNotEmpty, IsNumber, IsObject, IsOptional, IsString } from 'class-validator'
 import {
   BillingAddress,
   CreateTransactionModel,
@@ -85,10 +85,10 @@ export class OpayoPublicHeaders {
 
 export class Opayo3DSecureDto {
   @IsString()
-  @IsNotEmpty()
+  @IsOptional()
   cres: string
 
   @IsString()
-  @IsNotEmpty()
+  @IsOptional()
   threeDSSessionData: string
 }
diff --git a/packages/payments-ui/src/payment-page/__tests__/__snapshots__/payment-form.test.tsx.snap b/packages/payments-ui/src/payment-page/__tests__/__snapshots__/payment-form.test.tsx.snap
@@ -6470,7 +6470,7 @@ exports[`PaymentForm should match a snapshot when payment is rejected 1`] = `
   width: 100%;
 "
         >
-          This payment has failed. Please check the details submitted are correct and try again.
+          Transaction Failed. If you have sufficient funds, and you have checked your card details are correct, this could be because you have used an incorrect card type (we accept Visa and Mastercard debit only) or your session has expired. Please check your card details again and if the problem persists, refresh the page and try again.
         </div>
       </mock-styled.div>
       <form
@@ -8020,7 +8020,7 @@ exports[`PaymentForm should match a snapshot when payment is rejected 1`] = `
   width: 100%;
 "
       >
-        This payment has failed. Please check the details submitted are correct and try again.
+        Transaction Failed. If you have sufficient funds, and you have checked your card details are correct, this could be because you have used an incorrect card type (we accept Visa and Mastercard debit only) or your session has expired. Please check your card details again and if the problem persists, refresh the page and try again.
       </div>
     </mock-styled.div>
     <form

diff --git a/packages/payments-ui/src/payment-page/index.tsx b/packages/payments-ui/src/payment-page/index.tsx
@@ -1,8 +1,24 @@
-import React, { Dispatch, FC, SetStateAction } from 'react'
+import React, { Dispatch, FC, SetStateAction, useEffect } from 'react'
 import { PaymentForm } from './payment-form'
 import { PaymentLogo } from './payment-logo'
 import { PaymentProvider } from '../payment-provider'
-import { BodyText, Col, elFadeIn, elMb11, elMr4, FlexContainer, Grid, Icon, Subtitle, Title } from '@reapit/elements'
+import {
+  BodyText,
+  Button,
+  ButtonGroup,
+  Col,
+  elFadeIn,
+  elMb11,
+  elMb7,
+  elMr4,
+  FlexContainer,
+  Grid,
+  Icon,
+  PersistentNotification,
+  Subtitle,
+  Title,
+  useModal,
+} from '@reapit/elements'
 import { combineAddress } from '@reapit/utils-common'
 import { PaymentModel } from '@reapit/foundations-ts-definitions'
 import { PaymentsBackButton } from './__styles__'
@@ -22,10 +38,18 @@ export const handleOpenModal =
 
 export const PaymentPageContent: FC<PaymentPageContentProps> = ({ paymentProvider }) => {
   const navigate = useNavigate()
+  const { Modal, openModal } = useModal()
   const { payment, property, isPortal, config } = paymentProvider
   const { customer, amount, description, id } = payment ?? {}
   const { companyName } = config
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      openModal()
+    }, 600000) // 10 minutes
+    return () => clearInterval(timer)
+  }, [])
+
   return (
     <div className={elFadeIn}>
       {!isPortal && (
@@ -102,6 +126,17 @@ export const PaymentPageContent: FC<PaymentPageContentProps> = ({ paymentProvide
         </Col>
       </Grid>
       <PaymentForm paymentProvider={paymentProvider} />
+      <Modal title="Payment Session Timeout" onModalClose={() => window.location.reload()}>
+        <PersistentNotification isInline isFullWidth isExpanded intent="danger" className={elMb7}>
+          You have exceeded the 10 minutes we allow to complete a transaction. For security reasons, please refresh the
+          page to re-start your session.
+        </PersistentNotification>
+        <ButtonGroup alignment="right">
+          <Button intent="primary" onClick={() => window.location.reload()}>
+            Refresh
+          </Button>
+        </ButtonGroup>
+      </Modal>
     </div>
   )
 }
diff --git a/packages/payments-ui/src/payment-page/payment-form.tsx b/packages/payments-ui/src/payment-page/payment-form.tsx
@@ -192,14 +192,12 @@ export const PaymentForm: FC<PaymentFormProps> = ({ paymentProvider }) => {
 
   return (
     <>
-      {threeDSecureMessage === 'failure' && (
+      {(threeDSecureMessage === 'failure' || paymentStatus === 'rejected') && (
         <PersistentNotification className={cx(elMb7, elFadeIn)} intent="danger" isInline isExpanded isFullWidth>
-          Your bank has rejected the 3D Secure transaction. Please check your credentials and try again.
-        </PersistentNotification>
-      )}
-      {paymentStatus === 'rejected' && (
-        <PersistentNotification className={cx(elMb7, elFadeIn)} intent="danger" isInline isExpanded isFullWidth>
-          This payment has failed. Please check the details submitted are correct and try again.
+          Transaction Failed. If you have sufficient funds, and you have checked your card details are correct, this
+          could be because you have used an incorrect card type (we accept Visa and Mastercard debit only) or your
+          session has expired. Please check your card details again and if the problem persists, refresh the page and
+          try again.
         </PersistentNotification>
       )}
       {paymentStatus === 'posted' && (
@@ -211,7 +209,6 @@ export const PaymentForm: FC<PaymentFormProps> = ({ paymentProvider }) => {
           {payment && <ResendConfirmButton paymentFormValues={getValues()} paymentProvider={paymentProvider} />}
         </>
       )}
-
       <Modal
         title="3D Secure Check Required"
         onModalClose={() => null /**I don't want a user to dismiss the modal accidentally during the 3d secure flow */}