Add sent post message (#343)

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';

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`);
+};

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 (
         <LocaleContext.Provider value={{ l, localeCode, changeLocale }}>
             <ModalContainer>

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 (
         <PaymentModelContext.Provider value={{ paymentModel }}>
             <PaymentConditionsContext.Provider value={{ conditions }}>

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]);
+}

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={<HiChevronLeft />}
                             variant="link"
-                            onClick={() => window.history.back()}
+                            onClick={() => {
+                                // window.history.back()
+                                sendPostMessage('onBack');
+                            }}
                         >
                             {l['info.back']}
                         </Button>