@akinon/pz-blik 1.126.5-v1-rc.1

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,7 @@
+# @akinon/pz-blik
+
+## 1.126.5-v1-rc.1
+
+### Patch Changes
+
+- cc4e80d: ZERO-4623: Add PayU Europe BLIK digital-wallet payment package

package/README.md

@@ -0,0 +1,95 @@
+# Project Zero - BLIK Plugin
+
+PayU Europe **BLIK** payment method for the Project Zero storefront. The shopper enters the 6-digit one-time BLIK code generated in their banking app; the code is submitted through the generic digital-wallet checkout flow (server-to-server, no redirect) and the order is finalized on PayU's asynchronous order-confirmation webhook.
+
+Markets: Poland (and Slovakia when enabled on the POS).
+
+## Installation
+
+You can use the following command to install the extension with the latest plugins:
+
+```bash
+npx @akinon/projectzero@latest --plugins
+```
+
+## Adding BLIK to Checkout
+
+BLIK arrives from the backend as a wallet payment option (`payment_type: "wallet"`). All PayU Europe wallet methods share that type, so the storefront selects the BLIK component by the payment option's **`slug`** through the brand `PaymentOptionViews` registry. That registry is resolved before the generic wallet branches, so no core change is required.
+
+### 1. Create the BLIK option file
+
+**views/checkout/steps/payment/options/blik.tsx**
+
+```tsx
+import Blik from '@akinon/pz-blik';
+
+export default function BlikOption() {
+  return <Blik />;
+}
+```
+
+### 2. Register it in the payment step
+
+**views/checkout/steps/payment/index.tsx**
+
+```tsx
+import BlikOption from './options/blik';
+
+export const PaymentOptionViews: Array<CheckoutPaymentOption> = [
+  {
+    slug: 'blik', // must match the BLIK payment option slug configured in the Akinon backend
+    view: BlikOption
+  }
+  // Other payment methods can be added here
+];
+```
+
+> The `slug` must exactly match the BLIK payment option `slug` provisioned on the POS in the Akinon backend.
+
+## Translations
+
+The default UI reads the following localization keys — add them to the brand translations:
+
+| Key                               | Example (en)                           |
+| --------------------------------- | -------------------------------------- |
+| `checkout.blik.code_label`        | BLIK code                              |
+| `checkout.blik.code_placeholder`  | 6-digit code                           |
+| `checkout.blik.pay_button`        | Pay                                    |
+| `checkout.blik.processing`        | Processing...                          |
+| `checkout.blik.errors.context`    | Could not proceed to the payment step. |
+| `checkout.blik.errors.incomplete` | Payment could not be completed.        |
+| `checkout.blik.errors.unexpected` | An unexpected error occurred.          |
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `className` | `string` | Applied to the default wrapper element. |
+| `customUIRender` | `(props) => JSX.Element \| null` | Fully replaces the default UI. Receives `{ code, setCode, handleSubmit, isProcessing, isValid, paymentErrors }`. |
+
+### customUIRender example
+
+```tsx
+<Blik
+  customUIRender={({
+    code,
+    setCode,
+    handleSubmit,
+    isProcessing,
+    isValid,
+    paymentErrors
+  }) => (
+    <div>
+      <input
+        value={code}
+        inputMode="numeric"
+        onChange={(event) => setCode(event.target.value)}
+      />
+      <button onClick={handleSubmit} disabled={!isValid || isProcessing}>
+        Pay with BLIK
+      </button>
+      {paymentErrors && <p>{paymentErrors}</p>}
+    </div>
+  )}
+/>
+```

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@akinon/pz-blik",
+  "version": "1.126.5-v1-rc.1",
+  "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/src/hooks/use-blik.tsx

@@ -0,0 +1,120 @@
+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 { useLocalization } from '@akinon/next/hooks';
+import { RootState } from '@theme/redux/store';
+import { useMemo, useState } from 'react';
+
+export default function useBlik() {
+  const dispatch = useAppDispatch();
+  const { preOrder } = useAppSelector((state: RootState) => state.checkout);
+  const { t } = useLocalization();
+  const [errors, setErrors] = useState<any>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const paymentErrors = useMemo(() => {
+    if (typeof errors === 'string') return errors;
+    if (Array.isArray(errors)) return errors.join(', ');
+    if (typeof errors === 'object')
+      return Object.values(errors ?? {}).join(', ');
+    return null;
+  }, [errors]);
+
+  const redirectToThankYouPage = (contextList: any[]) => {
+    const thankYouPageContext = contextList?.find(
+      (c: any) => c.page_name === 'ThankYouPage'
+    );
+
+    if (thankYouPageContext) {
+      const redirectUrl =
+        thankYouPageContext.page_context.context_data.redirect_url;
+      const redirectUrlWithLocale = `${
+        window.location.origin
+      }${getUrlPathWithLocale(redirectUrl, getCookie('pz-locale'))}`;
+      window.location.href = redirectUrlWithLocale;
+    }
+  };
+
+  const handleBlikSubmit = async (authorizationCode: string) => {
+    if (isProcessing) return;
+
+    setErrors(null);
+    setIsProcessing(true);
+
+    try {
+      const walletSelectionPageResponse = await dispatch(
+        checkoutApi.endpoints.setWalletSelectionPage.initiate({
+          payment_option: preOrder.payment_option?.pk
+        })
+      ).unwrap();
+
+      const walletPaymentPageContext =
+        walletSelectionPageResponse.context_list?.find(
+          (c: any) => c.page_name === 'WalletPaymentPage'
+        );
+
+      if (!walletPaymentPageContext) {
+        setErrors(t('checkout.blik.errors.context'));
+        return;
+      }
+
+      // The BLIK 6-digit authorization code travels in the generic wallet
+      // `payment_token` slot; the backend maps it into pre_order.data['token'].
+      const walletPaymentPageResponse = await dispatch(
+        checkoutApi.endpoints.setWalletPaymentPage.initiate({
+          payment_token: authorizationCode
+        })
+      ).unwrap();
+
+      if (walletPaymentPageResponse.errors) {
+        setErrors(walletPaymentPageResponse.errors);
+        return;
+      }
+
+      // BLIK's authorization-code flow completes server-to-server (no redirect),
+      // but honour a redirect context if the backend ever returns one.
+      const redirectPageContext = walletPaymentPageResponse.context_list?.find(
+        (c: any) => c.page_name === 'WalletRedirectCompletePage'
+      );
+
+      if (redirectPageContext) {
+        window.location.href = redirectPageContext.page_context.redirect_url;
+        return;
+      }
+
+      const completePageContext = walletPaymentPageResponse.context_list?.find(
+        (c: any) => c.page_name === 'WalletCompletePage'
+      );
+
+      if (completePageContext) {
+        const paymentCompleteResponse = await dispatch(
+          checkoutApi.endpoints.setWalletCompletePage.initiate({
+            success: true
+          })
+        ).unwrap();
+
+        if (paymentCompleteResponse.errors) {
+          setErrors(paymentCompleteResponse.errors);
+          return;
+        }
+
+        redirectToThankYouPage(paymentCompleteResponse.context_list);
+      } else {
+        setErrors(t('checkout.blik.errors.incomplete'));
+      }
+    } catch (error) {
+      console.error('BLIK Flow Error:', error);
+      setErrors(t('checkout.blik.errors.unexpected'));
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return {
+    paymentErrors,
+    setPaymentErrors: setErrors,
+    handleBlikSubmit,
+    isProcessing
+  };
+}

package/src/index.tsx

@@ -0,0 +1,2 @@
+export * from './views';
+export { default } from './views';

package/src/views/index.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { ReactNode, useState } from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+import useBlik from '../hooks/use-blik';
+
+const BLIK_CODE_LENGTH = 6;
+const BLIK_CODE_REGEX = /^\d{6}$/;
+
+export interface BlikProps {
+  customUIRender?: (props: {
+    code: string;
+    setCode: (code: string) => void;
+    handleSubmit: () => void;
+    isProcessing: boolean;
+    isValid: boolean;
+    paymentErrors?: string | null;
+  }) => ReactNode;
+  className?: string;
+}
+
+export const Blik = ({ customUIRender, className }: BlikProps) => {
+  const { t } = useLocalization();
+  const { paymentErrors, handleBlikSubmit, isProcessing } = useBlik();
+  const [code, setCode] = useState('');
+
+  const isValid = BLIK_CODE_REGEX.test(code);
+
+  const handleCodeChange = (value: string) => {
+    setCode(value.replace(/\D/g, '').slice(0, BLIK_CODE_LENGTH));
+  };
+
+  const handleSubmit = () => {
+    if (!isValid || isProcessing) return;
+    handleBlikSubmit(code);
+  };
+
+  if (customUIRender) {
+    return (
+      <>
+        {customUIRender({
+          code,
+          setCode: handleCodeChange,
+          handleSubmit,
+          isProcessing,
+          isValid,
+          paymentErrors
+        })}
+      </>
+    );
+  }
+
+  return (
+    <div className={className}>
+      <label htmlFor="blik-code" className="block text-sm font-medium mb-2">
+        {t('checkout.blik.code_label')}
+      </label>
+
+      <input
+        id="blik-code"
+        type="text"
+        inputMode="numeric"
+        autoComplete="one-time-code"
+        maxLength={BLIK_CODE_LENGTH}
+        value={code}
+        onChange={(event) => handleCodeChange(event.target.value)}
+        placeholder={t('checkout.blik.code_placeholder')}
+        className="w-full border rounded px-3 py-2 text-center tracking-[0.5em]"
+      />
+
+      <button
+        type="button"
+        onClick={handleSubmit}
+        disabled={!isValid || isProcessing}
+        className="mt-4 w-full rounded bg-black py-3 text-white disabled:opacity-50"
+      >
+        {isProcessing
+          ? t('checkout.blik.processing')
+          : t('checkout.blik.pay_button')}
+      </button>
+
+      {paymentErrors && (
+        <div className="text-error-100 text-xs mt-5">{paymentErrors}</div>
+      )}
+    </div>
+  );
+};
+
+export default Blik;