@akinon/pz-cybersource-uc 1.107.0

package/.gitattributes

@@ -0,0 +1,15 @@
+*.js    text eol=lf
+*.jsx   text eol=lf
+*.ts    text eol=lf
+*.tsx   text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+
+.eslintignore text eol=lf
+.eslintrc text eol=lf
+.gitignore text eol=lf
+.prettierrc text eol=lf
+.yarnrc text eol=lf
+
+* text=auto
+

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "bracketSameLine": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "proseWrap": "never",
+  "trailingComma": "none"
+}

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+# @akinon/pz-cybersource-uc
+
+## 1.107.0

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@akinon/pz-cybersource-uc",
+  "version": "1.107.0",
+  "license": "MIT",
+  "main": "src/index.tsx",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "react-redux": "8.1.3"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.2.2"
+  }
+}

package/src/index.tsx

@@ -0,0 +1 @@
+export { default as CyberSourceUcPaymentOption } from './views/payment-option';

package/src/redux/middleware.ts

@@ -0,0 +1,57 @@
+import { CheckoutResult } from '@akinon/next/types';
+import { Middleware, ThunkDispatch, AnyAction } from '@reduxjs/toolkit';
+import { setupCyberSourceUc } from './reducer';
+import { checkoutApi } from '@akinon/next/data/client/checkout';
+import { RootState } from 'redux/store';
+
+type CyberSourceUcPaymentData = {
+  capture_context: string;
+  client_library: string;
+  client_library_integrity: string;
+};
+
+const cyberSourceUcMiddleware: Middleware<
+  unknown,
+  RootState,
+  ThunkDispatch<RootState, any, AnyAction>
+> =
+  ({ dispatch }) =>
+  (next) =>
+  (action) => {
+    const result: CheckoutResult = next(action);
+    const { payload } = result;
+    const contextList = payload?.context_list;
+    const preOrder = payload?.pre_order;
+    const { endpoints: apiEndpoints } = checkoutApi;
+
+    if (contextList) {
+      const cyberSourceUcContext = contextList.find(
+        (context) =>
+          context.page_slug === 'walletselectionpage' &&
+          context.page_context?.paymentMethod === 'cybersource_uc'
+      );
+
+      if (cyberSourceUcContext) {
+        const paymentData: CyberSourceUcPaymentData =
+          cyberSourceUcContext.page_context.paymentData.data;
+
+        dispatch(
+          apiEndpoints.setWalletSelectionPage.initiate({
+            payment_option: preOrder.payment_option.pk
+          })
+        );
+
+        dispatch(
+          setupCyberSourceUc({
+            captureContext: paymentData.capture_context,
+            clientLibrary: paymentData.client_library,
+            clientLibraryIntegrity: paymentData.client_library_integrity
+          })
+        );
+      }
+    }
+
+    return result;
+  };
+
+export default cyberSourceUcMiddleware;

package/src/redux/reducer.ts

@@ -0,0 +1,39 @@
+'use client';
+
+import { createSlice } from '@reduxjs/toolkit';
+
+export type CyberSourceUcState = {
+  captureContext?: string;
+  clientLibrary?: string;
+  clientLibraryIntegrity?: string;
+};
+
+const initialState: CyberSourceUcState = {
+  captureContext: undefined,
+  clientLibrary: undefined,
+  clientLibraryIntegrity: undefined
+};
+
+const cyberSourceUcSlicer = createSlice({
+  name: 'cybersource_uc',
+  initialState,
+  reducers: {
+    setupCyberSourceUc: (
+      state,
+      action: {
+        payload: Pick<
+          CyberSourceUcState,
+          'captureContext' | 'clientLibrary' | 'clientLibraryIntegrity'
+        >;
+      }
+    ) => {
+      state.captureContext = action.payload.captureContext;
+      state.clientLibrary = action.payload.clientLibrary;
+      state.clientLibraryIntegrity = action.payload.clientLibraryIntegrity;
+    }
+  }
+});
+
+export const { setupCyberSourceUc } = cyberSourceUcSlicer.actions;
+
+export default cyberSourceUcSlicer.reducer;

package/src/views/payment-option.tsx

@@ -0,0 +1,126 @@
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Script from 'next/script';
+import { LoaderSpinner } from '@akinon/next/components';
+import { useSetWalletPaymentPageMutation } from '@akinon/next/data/client/checkout';
+import { getPosError } from '@akinon/next/utils';
+import { CyberSourceUcState } from '../redux/reducer';
+
+const CyberSourceUcPaymentOption = () => {
+  const [libraryLoaded, setLibraryLoaded] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  const { captureContext, clientLibrary, clientLibraryIntegrity } =
+    useAppSelector((state): CyberSourceUcState => state.cybersource_uc);
+
+  const [setWalletPaymentPage] = useSetWalletPaymentPageMutation();
+
+  const launchCheckout = useCallback(async () => {
+    const sidebar = false;
+    const showArgs = {
+      containers: {
+        paymentSelection: '#buttonPaymentListContainer',
+        paymentScreen: '#embeddedPaymentContainer'
+      }
+    };
+
+    try {
+      const buttonContainer = document.getElementById(
+        'buttonPaymentListContainer'
+      );
+      const paymentContainer = document.getElementById(
+        'embeddedPaymentContainer'
+      );
+      if (buttonContainer) buttonContainer.innerHTML = '';
+      if (paymentContainer) paymentContainer.innerHTML = '';
+      setErrorMessage(null);
+
+      const accept = await window.Accept(captureContext);
+      const up = await accept.unifiedPayments(sidebar);
+      setLoading(false);
+      const tt = await up.show(showArgs);
+
+      const response = await setWalletPaymentPage({
+        payment_token: tt,
+        agreement: true
+      }).unwrap();
+
+      if (response?.errors) {
+        const errorMessages = Object.values(response.errors)
+          .filter((value) => value)
+          .join('. ');
+
+        if (errorMessages) {
+          setErrorMessage(errorMessages);
+          timeoutRef.current = setTimeout(() => {
+            setLoading(true);
+            launchCheckout();
+          }, 2000);
+        }
+      }
+    } catch (error) {
+      console.error('something went wrong: ', error);
+      let errorMsg = 'An error occurred during payment processing';
+
+      if (error?.data?.errors) {
+        const errorMessages = Object.values(error.data.errors)
+          .filter((value) => value)
+          .join('. ');
+        errorMsg = errorMessages || errorMsg;
+      } else if (error?.data?.error) {
+        errorMsg = error.data.error;
+      }
+
+      setErrorMessage(errorMsg);
+
+      timeoutRef.current = setTimeout(() => {
+        setLoading(true);
+        launchCheckout();
+      }, 2000);
+    }
+  }, [captureContext, setWalletPaymentPage]);
+
+  useEffect(() => {
+    const posErrors = getPosError();
+    if (posErrors && Object.keys(posErrors).length > 0) {
+      const errorMessages = Object.values(posErrors).join('. ');
+      setErrorMessage(errorMessages);
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (libraryLoaded) {
+      launchCheckout().then();
+    }
+  }, [libraryLoaded, launchCheckout]);
+
+  return (
+    <div>
+      <div className="p-4">
+        {loading && <LoaderSpinner />}
+        <div id="buttonPaymentListContainer"></div>
+        <div id="paymentScreen"></div>
+        <div id="embeddedPaymentContainer"></div>
+        {errorMessage && (
+          <div className="text-[#ef4444] mt-4">{errorMessage}</div>
+        )}
+      </div>
+      <Script
+        src={clientLibrary}
+        integrity={clientLibraryIntegrity}
+        crossOrigin="anonymous"
+        onLoad={() => setLibraryLoaded(true)}
+      ></Script>
+    </div>
+  );
+};
+
+export default CyberSourceUcPaymentOption;