feat: #11357 payments fields updates (#11360)

* feat: #11357 payments fields updates * feat: #11357 updates to authorizers to work in both worlds
reapit · Aug 8, 2024 · 9ff0866 · 9ff0866
1 parent 5a343f0
commit 9ff0866
Show file tree

Hide file tree

Showing 44 changed files with 581 additions and 66 deletions.
diff --git a/.yarn/cache/@esbuild-darwin-arm64-npm-0.17.19-64d69299ed-10.zip b/.yarn/cache/@esbuild-darwin-arm64-npm-0.17.19-64d69299ed-10.zip
diff --git a/.yarn/cache/@esbuild-darwin-arm64-npm-0.19.12-09699ac6cb-10.zip b/.yarn/cache/@esbuild-darwin-arm64-npm-0.19.12-09699ac6cb-10.zip
diff --git a/.yarn/cache/@esbuild-linux-x64-npm-0.17.19-08a7136aa6-10.zip b/.yarn/cache/@esbuild-linux-x64-npm-0.17.19-08a7136aa6-10.zip
diff --git a/.yarn/cache/@esbuild-linux-x64-npm-0.19.12-59062fdb38-10.zip b/.yarn/cache/@esbuild-linux-x64-npm-0.19.12-59062fdb38-10.zip
diff --git a/.yarn/cache/@rollup-rollup-darwin-arm64-npm-4.13.0-31260831e3-10.zip b/.yarn/cache/@rollup-rollup-darwin-arm64-npm-4.13.0-31260831e3-10.zip
diff --git a/.yarn/cache/@rollup-rollup-linux-x64-gnu-npm-4.13.0-834923f1a9-10.zip b/.yarn/cache/@rollup-rollup-linux-x64-gnu-npm-4.13.0-834923f1a9-10.zip
diff --git a/.yarn/cache/@sentry-cli-darwin-npm-2.30.2-5fe0149778-10.zip b/.yarn/cache/@sentry-cli-darwin-npm-2.30.2-5fe0149778-10.zip
diff --git a/.yarn/cache/@sentry-cli-linux-x64-npm-2.30.2-d10723557a-10.zip b/.yarn/cache/@sentry-cli-linux-x64-npm-2.30.2-d10723557a-10.zip
diff --git a/...linux-x64-gnu-npm-1.4.8-3a20ef526a-10.zip → ...-darwin-arm64-npm-1.4.8-6193726d0f-10.zip b/...linux-x64-gnu-npm-1.4.8-3a20ef526a-10.zip → ...-darwin-arm64-npm-1.4.8-6193726d0f-10.zip
diff --git a/.yarn/cache/aws-jwt-verify-npm-4.0.1-1e5c693659-14fc7e5e05.zip b/.yarn/cache/aws-jwt-verify-npm-4.0.1-1e5c693659-14fc7e5e05.zip
diff --git a/.yarn/cache/fsevents-patch-19706e7e35-10.zip b/.yarn/cache/fsevents-patch-19706e7e35-10.zip
diff --git a/.yarn/cache/fsevents-patch-6b67494872-10.zip b/.yarn/cache/fsevents-patch-6b67494872-10.zip
diff --git a/packages/payments-client/src/components/admin/index.tsx b/packages/payments-client/src/components/admin/index.tsx
@@ -122,7 +122,6 @@ export const AdminPage: FC = () => {
   const { Modal: FilePreviewModal, openModal: openFilePreviewModal, closeModal: closeFilePreviewModal } = useModal()
   const { config, refreshConfig, clearConfigCache, configLoading } = useConfigState()
   const configNotConfigured = !config?.isConfigured
-
   const clientCode = connectSession?.loginIdentity?.clientId ?? ''
   const idToken = connectSession?.idToken ?? ''
 
@@ -141,8 +140,8 @@ export const AdminPage: FC = () => {
     action: updateActions[UpdateActionNames.paymentsClientConfigDelete],
     method: 'DELETE',
     headers: {
-      Authorization: idToken,
       'reapit-customer': clientCode,
+      'reapit-id-token': idToken,
       'reapit-app-id': process.env.appId,
     },
     uriParams: {
@@ -155,8 +154,8 @@ export const AdminPage: FC = () => {
     action: updateActions[UpdateActionNames.paymentsClientConfigCreate],
     method: 'POST',
     headers: {
-      Authorization: idToken,
       'reapit-customer': clientCode,
+      'reapit-id-token': idToken,
       'reapit-app-id': process.env.appId,
     },
     uriParams: {
@@ -169,8 +168,8 @@ export const AdminPage: FC = () => {
     action: updateActions[UpdateActionNames.paymentsClientConfigUpdate],
     method: 'PATCH',
     headers: {
-      Authorization: idToken,
       'reapit-customer': clientCode,
+      'reapit-id-token': idToken,
       'reapit-app-id': process.env.appId,
     },
     uriParams: {

diff --git a/...ages/payments-client/src/components/payment/__tests__/__snapshots__/payment.test.tsx.snap b/...ages/payments-client/src/components/payment/__tests__/__snapshots__/payment.test.tsx.snap
@@ -665,6 +665,23 @@ exports[`Payment should match a snapshot with data 1`] = `
                 </mock-styled.label>
               </mock-styled.div>
             </mock-styled.div>
+            <mock-styled.div>
+              <mock-styled.div>
+                <mock-styled.input
+                  classname=""
+                  disabled="false"
+                  id="test-static-id"
+                  name="customerPhone"
+                  placeholder="Phone Number here"
+                  type="tel"
+                />
+                <mock-styled.label
+                  htmlfor="test-static-id"
+                >
+                  Customer Phone Number
+                </mock-styled.label>
+              </mock-styled.div>
+            </mock-styled.div>
             <mock-styled.div>
               <mock-styled.div>
                 <mock-styled.input
@@ -2622,6 +2639,23 @@ exports[`Payment should match a snapshot with data 1`] = `
               </mock-styled.label>
             </mock-styled.div>
           </mock-styled.div>
+          <mock-styled.div>
+            <mock-styled.div>
+              <mock-styled.input
+                classname=""
+                disabled="false"
+                id="test-static-id"
+                name="customerPhone"
+                placeholder="Phone Number here"
+                type="tel"
+              />
+              <mock-styled.label
+                htmlfor="test-static-id"
+              >
+                Customer Phone Number
+              </mock-styled.label>
+            </mock-styled.div>
+          </mock-styled.div>
           <mock-styled.div>
             <mock-styled.div>
               <mock-styled.input

diff --git a/packages/payments-client/src/components/payment/payment.tsx b/packages/payments-client/src/components/payment/payment.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect, FC, Dispatch, SetStateAction } from 'react'
-import { useReapitConnect } from '@reapit/connect-session'
 import { reapitConnectBrowserSession } from '../../core/connect-session'
 import { PaymentModel, PropertyModel } from '@reapit/foundations-ts-definitions'
 import { elFadeIn, Loader, PersistentNotification } from '@reapit/elements'
@@ -27,6 +26,7 @@ import {
 } from '@reapit/use-reapit-data'
 import { useConfigState } from '../../core/use-config-state'
 import dayjs from 'dayjs'
+import { useReapitConnect } from '@reapit/connect-session'
 
 export interface PaymentProps {
   paymentRequest: ReapitGetState<PaymentModel>
@@ -112,8 +112,7 @@ export const Payment: FC<PaymentProps> = ({ paymentRequest }) => {
   const { connectSession } = useReapitConnect(reapitConnectBrowserSession)
   const { config, configLoading } = useConfigState()
   const configNotConfigured = !config?.isConfigured
-
-  const clientCode = connectSession?.loginIdentity?.clientId
+  const clientCode = config?.clientCode ?? ''
   const idToken = connectSession?.idToken ?? ''
 
   const [payment, paymentLoading, , refreshPayment] = paymentRequest
@@ -135,8 +134,8 @@ export const Payment: FC<PaymentProps> = ({ paymentRequest }) => {
     action: updateActions[UpdateActionNames.submitPrivatePaymentReceipt],
     method: 'POST',
     headers: {
-      Authorization: idToken,
-      'reapit-customer': clientCode as string,
+      'reapit-customer': clientCode,
+      'reapit-id-token': idToken,
       'reapit-app-id': process.env.appId,
     },
     uriParams: {
@@ -162,8 +161,8 @@ export const Payment: FC<PaymentProps> = ({ paymentRequest }) => {
     method: 'POST',
     returnType: UpdateReturnTypeEnum.RESPONSE,
     headers: {
-      Authorization: idToken,
-      'reapit-customer': clientCode as string,
+      'reapit-customer': clientCode,
+      'reapit-id-token': idToken,
       'reapit-app-id': process.env.appId,
     },
   })
@@ -174,13 +173,13 @@ export const Payment: FC<PaymentProps> = ({ paymentRequest }) => {
     method: 'POST',
     returnType: UpdateReturnTypeEnum.RESPONSE,
     headers: {
-      Authorization: idToken,
-      'reapit-customer': clientCode as string,
+      'reapit-customer': clientCode,
+      'reapit-id-token': idToken,
       'reapit-app-id': process.env.appId,
     },
   })
 
-  useEffect(handleGetMerchantKey(getMerchantKey, idToken, config), [config, idToken])
+  useEffect(handleGetMerchantKey(getMerchantKey, idToken, config), [idToken, config])
 
   useEffect(handleMerchantKeyRefresh(merchantKey, getMerchantKey, payment, config), [merchantKey, payment, config])
 

diff --git a/packages/payments-client/src/components/payments/payment-request-modal.tsx b/packages/payments-client/src/components/payments/payment-request-modal.tsx
@@ -134,7 +134,8 @@ export const PaymentRequestModal: FC<PaymentRequestModalProps> = ({
   selectedPayment,
 }) => {
   const { connectSession } = useReapitConnect(reapitConnectBrowserSession)
-  const clientCode = connectSession?.loginIdentity.clientId
+  const clientCode = connectSession?.loginIdentity.clientId ?? ''
+  const idToken = connectSession?.idToken ?? ''
 
   const {
     register,
@@ -154,8 +155,8 @@ export const PaymentRequestModal: FC<PaymentRequestModalProps> = ({
     method: 'POST',
     returnType: UpdateReturnTypeEnum.RESPONSE,
     headers: {
-      Authorization: connectSession?.idToken as string,
-      'reapit-customer': clientCode as string,
+      'reapit-customer': clientCode,
+      'reapit-id-token': idToken,
       'reapit-app-id': process.env.appId,
     },
   })
@@ -165,8 +166,8 @@ export const PaymentRequestModal: FC<PaymentRequestModalProps> = ({
     action: updateActions[UpdateActionNames.paymentRequestCreate],
     method: 'POST',
     headers: {
-      Authorization: connectSession?.idToken as string,
-      'reapit-customer': clientCode as string,
+      'reapit-customer': clientCode,
+      'reapit-id-token': idToken,
       'reapit-app-id': process.env.appId,
     },
     uriParams: {
@@ -179,7 +180,7 @@ export const PaymentRequestModal: FC<PaymentRequestModalProps> = ({
     action: updateActions[UpdateActionNames.privatePaymentUpdate],
     method: 'PATCH',
     headers: {
-      'if-match': selectedPayment?._eTag as string,
+      'if-match': selectedPayment?._eTag ?? '',
     },
     uriParams: {
       paymentId: selectedPayment?.id,

diff --git a/packages/payments-client/src/core/use-config-state.tsx b/packages/payments-client/src/core/use-config-state.tsx
@@ -21,15 +21,15 @@ const { Provider } = ConfigStateContext
 export const ConfigProvider: FC<PropsWithChildren> = ({ children }) => {
   const [configLoading, setConfigLoading] = useState<boolean>(true)
   const { connectSession } = useReapitConnect(reapitConnectBrowserSession)
-  const clientCode = connectSession?.loginIdentity?.clientId
+  const clientCode = connectSession?.loginIdentity?.clientId ?? ''
   const idToken = connectSession?.idToken ?? ''
 
   const [config, , , refreshConfig, , clearConfigCache] = useReapitGet<ClientConfigModel>({
     reapitConnectBrowserSession,
     action: getActions[GetActionNames.getPaymentsClientConfig],
     headers: {
-      Authorization: idToken,
-      'reapit-customer': clientCode as string,
+      'reapit-customer': clientCode,
+      'reapit-id-token': idToken,
       'reapit-app-id': process.env.appId,
     },
     uriParams: {

diff --git a/...ages/payments-portal/src/components/payment/__tests__/__snapshots__/payment.test.tsx.snap b/...ages/payments-portal/src/components/payment/__tests__/__snapshots__/payment.test.tsx.snap
@@ -445,6 +445,23 @@ exports[`PaymentPage should match a snapshot when has a session and data 1`] = `
                     </mock-styled.label>
                   </mock-styled.div>
                 </mock-styled.div>
+                <mock-styled.div>
+                  <mock-styled.div>
+                    <mock-styled.input
+                      classname=""
+                      disabled="false"
+                      id="test-static-id"
+                      name="customerPhone"
+                      placeholder="Phone Number here"
+                      type="tel"
+                    />
+                    <mock-styled.label
+                      htmlfor="test-static-id"
+                    >
+                      Customer Phone Number
+                    </mock-styled.label>
+                  </mock-styled.div>
+                </mock-styled.div>
                 <mock-styled.div>
                   <mock-styled.div>
                     <mock-styled.input
@@ -2396,6 +2413,23 @@ exports[`PaymentPage should match a snapshot when has a session and data 1`] = `
                   </mock-styled.label>
                 </mock-styled.div>
               </mock-styled.div>
+              <mock-styled.div>
+                <mock-styled.div>
+                  <mock-styled.input
+                    classname=""
+                    disabled="false"
+                    id="test-static-id"
+                    name="customerPhone"
+                    placeholder="Phone Number here"
+                    type="tel"
+                  />
+                  <mock-styled.label
+                    htmlfor="test-static-id"
+                  >
+                    Customer Phone Number
+                  </mock-styled.label>
+                </mock-styled.div>
+              </mock-styled.div>
               <mock-styled.div>
                 <mock-styled.div>
                   <mock-styled.input

diff --git a/packages/payments-service/cdk/cdk-stack.ts b/packages/payments-service/cdk/cdk-stack.ts
@@ -1,13 +1,6 @@
 import * as path from 'path'
-import {
-  createApi,
-  createBaseStack,
-  createTable,
-  createFunction,
-  output,
-  getAuthorizer,
-} from '@reapit/ts-scripts/src/cdk'
-import { aws_apigateway as apigateway, aws_iam as iam, aws_lambda } from 'aws-cdk-lib'
+import { createApi, createBaseStack, createTable, createFunction, output } from '@reapit/ts-scripts/src/cdk'
+import { aws_apigateway as apigateway, aws_iam as iam, aws_lambda, Duration } from 'aws-cdk-lib'
 import config from '../config.json'
 import { PolicyStatement } from 'aws-cdk-lib/aws-iam'
 
@@ -39,6 +32,7 @@ export const createStack = async () => {
     'reapit-customer',
     'reapit-app-id',
     'reapit-session',
+    'reapit-id-token',
   ])
 
   const paymentsSessionTable = createTable(stack, config.DYNAMO_DB_PAYMENTS_SESSION_TABLE_NAME, 'id')
@@ -62,6 +56,24 @@ export const createStack = async () => {
     aws_lambda.Runtime.NODEJS_18_X,
   )
 
+  const lambdaAuthorizer = createFunction(
+    stack,
+    'payments-service-authorizer-lambda',
+    path.resolve(__dirname, '..', 'dist'),
+    'packages/payments-service/src/core/authorizer.handler',
+    env,
+    undefined,
+    undefined,
+    undefined,
+    aws_lambda.Runtime.NODEJS_18_X,
+  )
+
+  const authorizer = new apigateway.RequestAuthorizer(stack, 'payments-service-authorizer', {
+    handler: lambdaAuthorizer,
+    identitySources: [apigateway.IdentitySource.header('authorization')],
+    resultsCacheTtl: Duration.seconds(0),
+  })
+
   paymentsSessionTable.grantReadWriteData(lambda)
   paymentsConfigTable.grantReadWriteData(lambda)
 
@@ -172,13 +184,14 @@ export const createStack = async () => {
 
   routes.forEach((route) => {
     api.root.resourceForPath(route.path).addMethod(route.method, new apigateway.LambdaIntegration(lambda), {
-      authorizer: route.protected ? getAuthorizer(stack, config.CONNECT_USER_POOL) : undefined,
-      authorizationType: route.protected ? apigateway.AuthorizationType.COGNITO : undefined,
+      authorizer: route.protected ? authorizer : undefined,
+      authorizationType: route.protected ? apigateway.AuthorizationType.CUSTOM : undefined,
       apiKeyRequired: !route.protected ? true : undefined,
       requestParameters: {
         'method.request.header.Content-Type': false,
         'method.request.header.Authorization': route.protected ? true : false,
         'method.request.header.X-Api-Key': !route.protected ? true : false,
+        'method.request.header.reapit-id-token': route.protected ? true : false,
         'method.request.header.api-version': false,
         'method.request.header.if-match': false,
         'method.request.header.reapit-customer': true,

diff --git a/packages/payments-service/package.json b/packages/payments-service/package.json
@@ -46,6 +46,7 @@
     "dayjs": "^1.11.10",
     "express": "^4.18.3",
     "express-session": "^1.18.0",
+    "idtoken-verifier": "^2.2.4",
     "memorystore": "^1.6.7",
     "morgan": "^1.10.0",
     "rxjs": "^7.8.1",

diff --git a/packages/payments-service/src/client-config/__tests__/private-controller.test.ts b/packages/payments-service/src/client-config/__tests__/private-controller.test.ts
@@ -33,7 +33,8 @@ describe('ClientConfigPrivateController', () => {
     })
 
     const result = await controller.getConfig({
-      clientCode: 'SBOX',
+      'reapit-customer': 'SBOX',
+      'reapit-id-token': 'MOCK_TOKEN',
     })
 
     expect(result).toEqual(mockConfigCreateModel)
@@ -48,7 +49,8 @@ describe('ClientConfigPrivateController', () => {
 
     const result = await controller.createConfig(
       {
-        clientCode: 'SBOX',
+        'reapit-customer': 'SBOX',
+        'reapit-id-token': 'MOCK_TOKEN',
       },
       mockConfigCreateModel,
     )
@@ -65,7 +67,8 @@ describe('ClientConfigPrivateController', () => {
 
     const result = await controller.updateConfig(
       {
-        clientCode: 'SBOX',
+        'reapit-customer': 'SBOX',
+        'reapit-id-token': 'MOCK_TOKEN',
       },
       mockConfigCreateModel,
     )
@@ -82,7 +85,8 @@ describe('ClientConfigPrivateController', () => {
 
     const result = await controller.deleteConfig(
       {
-        clientCode: 'SBOX',
+        'reapit-customer': 'SBOX',
+        'reapit-id-token': 'MOCK_TOKEN',
       },
       { configId: 'MOCK_ID' },
     )

diff --git a/packages/payments-service/src/client-config/dto.ts b/packages/payments-service/src/client-config/dto.ts
@@ -53,6 +53,16 @@ export class ClientConfigPublicHeaders {
   'reapit-session': string
 }
 
+export class ClientConfigPrivateHeaders {
+  @IsString()
+  @IsNotEmpty()
+  'reapit-customer': string
+
+  @IsString()
+  @IsNotEmpty()
+  'reapit-id-token': string
+}
+
 export class ClientConfigPublicParams {
   @IsString()
   @IsNotEmpty()