@akinon/pz-apple-pay 1.71.0

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/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@akinon/pz-apple-pay",
+  "version": "1.71.0",
+  "license": "MIT",
+  "main": "src/index.tsx",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "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/readme.md

@@ -0,0 +1,21 @@
+# Project Zero - Apple Pay Plugin
+
+## Installation
+
+There are two ways to install the Apple Pay plugin:
+
+### 1. Install the npm package using Yarn
+
+For the latest version, you can install the package using Yarn:
+
+```bash
+yarn add @akinon/pz-apple-pay
+```
+
+### 2. Preferred installation method
+
+You can also use the following command to install the extension with the latest plugins:
+
+```bash
+npx @akinon/projectzero@latest --plugins
+```

package/src/index.tsx

@@ -0,0 +1,3 @@
+import ApplePayView from './views';
+
+export default ApplePayView;

package/src/views/index.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { checkoutApi } from '@akinon/next/data/client/checkout';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { getCookie } from '@akinon/next/utils';
+import { getUrlPathWithLocale } from '@akinon/next/utils/localization';
+import { RootState } from '@theme/redux/store';
+import { useMemo, useState } from 'react';
+
+export default function ApplePay() {
+  const { walletPaymentData, preOrder } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+  const dispatch = useAppDispatch();
+  const [errors, setErrors] = useState(null);
+
+  const paymentErrors = useMemo(() => {
+    if (typeof errors === 'string') {
+      return errors;
+    } else if (Array.isArray(errors)) {
+      return errors.join(', ');
+    } else if (typeof errors === 'object') {
+      return Object.values(errors ?? {}).join(', ');
+    }
+
+    return null;
+  }, [errors]);
+
+  const onMerchantValidation = async (event: any) => {
+    const walletSelectionPageResponse = await dispatch(
+      checkoutApi.endpoints.setWalletSelectionPage.initiate({
+        payment_option: preOrder.payment_option?.pk,
+        validationURL: event.validationURL
+      })
+    ).unwrap();
+
+    const walletPaymentPageContext =
+      walletSelectionPageResponse.context_list.find(
+        (c) => c.page_name === 'WalletPaymentPage'
+      );
+
+    if (!walletPaymentPageContext) {
+      return;
+    }
+
+    event.complete(walletPaymentPageContext.page_context.context_data);
+  };
+
+  const initPaymentRequest = async () => {
+    setErrors(null);
+
+    const paymentMethodData = [
+      {
+        supportedMethods: walletPaymentData.supportedMethods,
+        data: walletPaymentData.data
+      }
+    ];
+
+    const paymentDetails = {
+      total: {
+        label: walletPaymentData.detail.label,
+        amount: walletPaymentData.detail.amount
+      },
+      displayItems: [
+        {
+          ...walletPaymentData.detail
+        }
+      ]
+    };
+
+    const request = new PaymentRequest(
+      paymentMethodData,
+      paymentDetails
+    ) as any;
+
+    request.onmerchantvalidation = onMerchantValidation;
+
+    const paymentRequestResponse = await request.show();
+
+    if (paymentRequestResponse.details?.token?.paymentData) {
+      const paymentData = paymentRequestResponse.details.token.paymentData;
+
+      const walletPaymentPageResponse = await dispatch(
+        checkoutApi.endpoints.setWalletPaymentPage.initiate({
+          payment_token: JSON.stringify(paymentData)
+        })
+      ).unwrap();
+
+      if (walletPaymentPageResponse.errors) {
+        setErrors(walletPaymentPageResponse.errors);
+      }
+
+      if (
+        walletPaymentPageResponse.context_list.find(
+          (c) => c.page_name === 'WalletCompletePage'
+        )
+      ) {
+        const paymentCompleteResponse = await dispatch(
+          checkoutApi.endpoints.setWalletCompletePage.initiate()
+        ).unwrap();
+
+        if (paymentCompleteResponse.errors) {
+          setErrors(paymentCompleteResponse.errors);
+        }
+
+        if (
+          paymentCompleteResponse.context_list.find(
+            (c) => c.page_name === 'ThankYouPage'
+          )
+        ) {
+          const redirectUrl = paymentCompleteResponse.context_list.find(
+            (c) => c.page_name === 'ThankYouPage'
+          )?.page_context.context_data.redirect_url;
+
+          const redirectUrlWithLocale = `${
+            window.location.origin
+          }${getUrlPathWithLocale(redirectUrl, getCookie('pz-locale'))}`;
+
+          await paymentRequestResponse.complete('success');
+          window.location.href = redirectUrlWithLocale;
+        } else {
+          await paymentRequestResponse.complete('fail');
+        }
+      } else {
+        await paymentRequestResponse.complete('fail');
+      }
+    }
+  };
+
+  if (!walletPaymentData) {
+    return null;
+  }
+
+  return (
+    <div>
+      <button onClick={initPaymentRequest}>Pay with Apple Pay</button>
+
+      {paymentErrors?.length > 0 && (
+        <div className="text-error-100 text-xs mt-5">{paymentErrors}</div>
+      )}
+    </div>
+  );
+}