From 5111cbfdd207774ed05573c8e90f1ce08c21b76d Mon Sep 17 00:00:00 2001 From: Ildar Galeev Date: Tue, 24 Sep 2024 21:58:35 +0700 Subject: [PATCH] Add sent post message (#343) --- src/common/utils/index.ts | 1 + src/common/utils/sendPostMessage.ts | 4 ++ src/components/AppLayout/AppLayout.tsx | 8 +++- .../GlobalContainer/GlobalContainer.tsx | 3 ++ .../GlobalContainer/usePostMessage.ts | 41 +++++++++++++++++++ .../InfoContainer/InfoContainer.tsx | 7 +++- 6 files changed, 61 insertions(+), 3 deletions(-) create mode 100644 src/common/utils/sendPostMessage.ts create mode 100644 src/components/GlobalContainer/usePostMessage.ts diff --git a/src/common/utils/index.ts b/src/common/utils/index.ts index c679e9c1..4748b870 100644 --- a/src/common/utils/index.ts +++ b/src/common/utils/index.ts @@ -32,6 +32,7 @@ export { detectLocale } from './detectLocale'; export { createRegExpForMetaPattern } from './createRegExpForMetaPattern'; export { formatCard } from './formatCard'; export { truncate } from './truncate'; +export { sendPostMessage } from './sendPostMessage'; export type { URLParams } from './getUrlParams'; export type { CountrySubdivision, Country } from './countries'; diff --git a/src/common/utils/sendPostMessage.ts b/src/common/utils/sendPostMessage.ts new file mode 100644 index 00000000..1f2b2110 --- /dev/null +++ b/src/common/utils/sendPostMessage.ts @@ -0,0 +1,4 @@ +export const sendPostMessage = (message: 'onSuccess' | 'onError' | 'onBack') => { + window.top.postMessage(message); + console.info(`${message} message sent`); +}; diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 95be3b0c..46ebbfe2 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -5,7 +5,7 @@ import { ErrorBoundary } from 'react-error-boundary'; import { ErrorAlert, GlobalSpinner } from 'checkout/components'; import { CustomizationContext, LocaleContext } from 'checkout/contexts'; import { InitParams } from 'checkout/init'; -import { extractError } from 'checkout/utils'; +import { extractError, sendPostMessage } from 'checkout/utils'; import { useInitModels } from './useInitModels'; import { useLocale } from './useLocale'; @@ -52,6 +52,12 @@ export function AppLayout({ initParams, colorMode }: AppLayoutProps) { setColorMode(colorMode); }, [colorMode]); + useEffect(() => { + if (modelsState.status === 'FAILURE') { + sendPostMessage('onError'); + } + }, [modelsState]); + return ( diff --git a/src/components/GlobalContainer/GlobalContainer.tsx b/src/components/GlobalContainer/GlobalContainer.tsx index 77fc2625..92ae54f7 100644 --- a/src/components/GlobalContainer/GlobalContainer.tsx +++ b/src/components/GlobalContainer/GlobalContainer.tsx @@ -5,6 +5,7 @@ import { PaymentCondition } from 'checkout/paymentCondition'; import { PaymentModel } from 'checkout/paymentModel'; import { usePaymentCondition } from './usePaymentCondition'; +import { usePostMessage } from './usePostMessage'; import { toContainer } from './utils'; import { RedirectContainer } from '../RedirectContainer'; import { ViewContainer } from '../ViewContainer'; @@ -18,6 +19,8 @@ export function GlobalContainer({ paymentModel, initConditions }: GlobalContaine const { conditions, startPayment, startWaitingPaymentResult } = usePaymentCondition(paymentModel, initConditions); const containerName = toContainer(conditions); + usePostMessage(conditions); + return ( diff --git a/src/components/GlobalContainer/usePostMessage.ts b/src/components/GlobalContainer/usePostMessage.ts new file mode 100644 index 00000000..93463df7 --- /dev/null +++ b/src/components/GlobalContainer/usePostMessage.ts @@ -0,0 +1,41 @@ +import { useEffect } from 'react'; + +import { InvoiceStatusChanged, PaymentCondition, PaymentStatusChanged } from 'checkout/paymentCondition'; +import { last, sendPostMessage } from 'checkout/utils'; + +const handlePaymentStatusChanged = (condition: PaymentStatusChanged) => { + switch (condition.status) { + case 'captured': + case 'processed': + sendPostMessage('onSuccess'); + break; + case 'failed': + sendPostMessage('onError'); + break; + } +}; + +const handleInvoiceStatusChanged = (condition: InvoiceStatusChanged) => { + switch (condition.status) { + case 'paid': + sendPostMessage('onSuccess'); + break; + } +}; + +export function usePostMessage(conditions: PaymentCondition[]) { + useEffect(() => { + const lastCondition = last(conditions); + switch (lastCondition.name) { + case 'paymentProcessFailed': + sendPostMessage('onError'); + break; + case 'paymentStatusChanged': + handlePaymentStatusChanged(lastCondition); + break; + case 'invoiceStatusChanged': + handleInvoiceStatusChanged(lastCondition); + break; + } + }, [conditions]); +} diff --git a/src/components/ViewContainer/InfoContainer/InfoContainer.tsx b/src/components/ViewContainer/InfoContainer/InfoContainer.tsx index 382c1931..a8a6a972 100644 --- a/src/components/ViewContainer/InfoContainer/InfoContainer.tsx +++ b/src/components/ViewContainer/InfoContainer/InfoContainer.tsx @@ -3,7 +3,7 @@ import { useContext } from 'react'; import { HiChevronDown, HiChevronLeft } from 'react-icons/hi'; import { CustomizationContext, LocaleContext } from 'checkout/contexts'; -import { truncate } from 'checkout/utils'; +import { sendPostMessage, truncate } from 'checkout/utils'; import { DetailsDrawer } from './DetailsDrawer'; @@ -26,7 +26,10 @@ export function InfoContainer({ viewAmount }: InfoProps) { colorScheme="gray" leftIcon={} variant="link" - onClick={() => window.history.back()} + onClick={() => { + // window.history.back() + sendPostMessage('onBack'); + }} > {l['info.back']}