@akinon/pz-tamara-extension 1.80.0-rc.7

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-tamara-extension
+
+## 1.80.0-rc.7
+
+### Minor Changes
+
+- 7ab9e2fd: ZERO-3166: add tamara payment package

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@akinon/pz-tamara-extension",
+  "version": "1.80.0-rc.7",
+  "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,138 @@
+# Tamara Payment Gateway Extension
+
+## Installation
+
+There are two ways to install the Tamara Payment Gateway extension:
+
+### 1. Install the npm package using Yarn
+
+Before installing with Yarn, you need to add 'pz-tamara-extension' to your `plugins.js` file:
+
+```javascript
+// plugins.js
+module.exports = {
+  extensions: [
+    // ... other extensions
+    'pz-tamara-extension'
+  ]
+};
+```
+
+Then, you can install the package using Yarn:
+
+```bash
+yarn add @akinon/pz-tamara-extension
+```
+
+### 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
+```
+
+## Usage
+
+Once the extension is installed, you can easily integrate the Tamara payment gateway into your application. Here's an example of how to use it.
+
+1. Navigate to the `src/app/[commerce]/[locale]/[currency]/payment-gateway/tamara/` directory.
+
+2. Create a file named `page.tsx` and include the following code:
+
+```jsx
+import { TamaraPaymentGateway } from '@akinon/pz-tamara-extension';
+
+const TamaraGateway = async ({
+  searchParams: { sessionId },
+  params: { currency, locale }
+}: {
+  searchParams: Record<string, string>;
+  params: { currency: string; locale: string };
+}) => {
+  return (
+    <TamaraPaymentGateway
+      sessionId={sessionId}
+      currency={currency}
+      locale={locale}
+      extensionUrl={process.env.TAMARA_EXTENSION_URL}
+      hashKey={process.env.TAMARA_HASH_KEY}
+    />
+  );
+};
+
+export default TamaraGateway;
+```
+
+## API Routes
+
+### Check Availability API
+
+To enable Tamara payment availability checks, you need to create an API route. Create a file at `src/app/api/tamara-check-availability/route.ts` with the following content:
+
+```typescript
+import { POST } from '@akinon/pz-tamara-extension/src/pages/api/check-availability';
+
+export { POST };
+```
+
+This API endpoint handles checking the availability of Tamara payment for a given:
+
+- Country
+- Phone number
+- Order amount
+- Currency
+
+The endpoint automatically validates the request and response using hash-based security measures.
+
+### Using checkTamaraAvailability Mutation
+
+The extension provides a Redux mutation hook that you can use to check Tamara payment availability. Here's an example of how to implement it:
+
+```typescript
+import { useCheckTamaraAvailabilityMutation } from '@akinon/pz-tamara-extension/src/redux/api';
+
+const YourComponent = () => {
+  const [checkTamaraAvailability] = useCheckTamaraAvailabilityMutation();
+  const [isTamaraAvailable, setIsTamaraAvailable] = useState(false);
+
+  useEffect(() => {
+    const checkAvailability = async () => {
+      try {
+        const response = await checkTamaraAvailability({
+          country: 'AE', // Country code
+          phone_number: '+971123456789', // Customer's phone number
+          order_amount: 1000 // Order total amount
+        }).unwrap();
+
+        setIsTamaraAvailable(response.has_availability);
+      } catch (error) {
+        console.error('Error checking Tamara availability:', error);
+        setIsTamaraAvailable(false);
+      }
+    };
+
+    checkAvailability();
+  }, [checkTamaraAvailability]);
+
+  // Use isTamaraAvailable to conditionally render Tamara payment option
+  return (
+    // Your component JSX
+  );
+};
+```
+
+The mutation returns an object with the following properties:
+
+- `has_availability`: boolean indicating if Tamara payment is available
+- `salt`: string used for hash verification
+- `hash`: string for response validation
+
+## Configuration
+
+Add these variables to your `.env` file
+
+```env
+TAMARA_EXTENSION_URL=<your_extension_url>
+TAMARA_HASH_KEY=<your_hash_key>
+```

package/src/components/FormComponent.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { cookies } from 'next/headers';
+
+type FormComponentProps = {
+  extensionUrl: string;
+  sessionId: string;
+  context: any;
+};
+
+const FormComponent = ({
+  extensionUrl,
+  sessionId,
+  context
+}: FormComponentProps) => {
+  const nextCookies = cookies();
+
+  const extensionUrlWithoutSlash = `${extensionUrl}`.endsWith('/')
+    ? extensionUrl.slice(0, -1)
+    : extensionUrl;
+
+  const csrfToken = nextCookies.get('csrftoken')?.value ?? '';
+
+  return (
+    <form
+      action={`${extensionUrlWithoutSlash}/form-page/?sessionId=${sessionId}`}
+      method="post"
+      encType="multipart/form-data"
+      id="tamara-extension-form"
+    >
+      <input type="hidden" name="csrf_token" value={csrfToken} />
+      <input type="hidden" name="data" value={JSON.stringify(context)} />
+
+      <script
+        dangerouslySetInnerHTML={{
+          __html: "document.getElementById('tamara-extension-form').submit()"
+        }}
+      />
+    </form>
+  );
+};
+
+export default FormComponent;

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './pages/TamaraPaymentGateway';

package/src/pages/TamaraPaymentGateway.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import settings from 'settings';
+import { cookies } from 'next/headers';
+import FormComponent from '../components/FormComponent';
+import {
+  fetchData,
+  generateHash,
+  getRandomString,
+  formatDecimal
+} from '../utils';
+
+type TamaraPaymentGatewayProps = {
+  sessionId: string;
+  currency: string;
+  locale: string;
+  extensionUrl: string;
+  hashKey: string;
+};
+
+export const TamaraPaymentGateway = async ({
+  sessionId,
+  currency,
+  locale,
+  extensionUrl,
+  hashKey
+}: TamaraPaymentGatewayProps) => {
+  if (!sessionId || !currency || !locale) {
+    return <></>;
+  }
+
+  const nextCookies = cookies();
+
+  const language = settings.localization.locales.find(
+    (item) => item.value === locale
+  ).apiValue;
+
+  const requestHeaders = {
+    Cookie: `osessionid=${nextCookies.get('osessionid')?.value}`,
+    'Content-Type': 'application/json',
+    'X-Currency': currency,
+    'X-Requested-With': 'XMLHttpRequest',
+    'Accept-Language': language
+  };
+
+  const preOrder = await fetchData(
+    `${settings.commerceUrl}/orders/checkout/?page=OrderNotePage`,
+    requestHeaders
+  );
+
+  const salt = getRandomString(10);
+  const hash = generateHash(hashKey, sessionId, salt);
+
+  const unpaidAmount = Number(preOrder.pre_order.unpaid_amount || 0);
+  const shippingAmount = Math.min(
+    Number(preOrder.pre_order.shipping_amount || 0),
+    unpaidAmount
+  );
+
+  const unpaidAmountWithoutShipping = unpaidAmount - shippingAmount;
+  const basketItemSet = preOrder.pre_order.basket.basketitem_set;
+  const totalProductAmount = basketItemSet.reduce(
+    (sum: number, item: any) => sum + Number(item.total_amount),
+    0
+  );
+  const remainingAmount = Math.max(
+    unpaidAmountWithoutShipping - totalProductAmount,
+    0
+  );
+
+  let cumulativeAmount = 0;
+  let totalTaxAmount = 0;
+  const basketItems = basketItemSet.map((item: any, index: number) => {
+    const basketItemAmount = Number(item.total_amount);
+    const weight = basketItemAmount / totalProductAmount;
+    let amount = remainingAmount * weight + basketItemAmount;
+
+    cumulativeAmount += amount;
+
+    if (index === basketItemSet.length - 1) {
+      const delta = unpaidAmountWithoutShipping - cumulativeAmount;
+      amount += delta;
+    }
+
+    const taxRate = Number(item.tax_rate || 0) / 100;
+    totalTaxAmount += amount * taxRate;
+
+    return {
+      name: item.product?.name?.substring(0, 255) || 'none',
+      type: item.product?.category?.name,
+      reference_id: item.pk,
+      sku: item.product?.sku,
+      quantity: item.quantity,
+      total_amount: {
+        amount: formatDecimal(amount)
+      }
+    };
+  });
+
+  const context = {
+    hash,
+    salt,
+    tax_amount: {
+      amount: formatDecimal(totalTaxAmount)
+    },
+    shipping_amount: {
+      amount: formatDecimal(shippingAmount)
+    },
+    order_items: basketItems,
+    billing_address: {
+      city: preOrder.pre_order.billing_address.city.name,
+      country_code: preOrder.pre_order.billing_address.country.code,
+      first_name: preOrder.pre_order.billing_address.first_name,
+      last_name: preOrder.pre_order.billing_address.last_name,
+      line1: preOrder.pre_order.billing_address.line,
+      phone_number: preOrder.pre_order.billing_address.phone_number,
+      region: preOrder.pre_order.billing_address.township.name
+    },
+    shipping_address: {
+      city: preOrder.pre_order.shipping_address.city.name,
+      country_code: preOrder.pre_order.shipping_address.country.code,
+      first_name: preOrder.pre_order.shipping_address.first_name,
+      last_name: preOrder.pre_order.shipping_address.last_name,
+      line1: preOrder.pre_order.shipping_address.line,
+      phone_number: preOrder.pre_order.shipping_address.phone_number,
+      region: preOrder.pre_order.shipping_address.township.name
+    }
+  };
+
+  return (
+    <FormComponent
+      extensionUrl={extensionUrl}
+      sessionId={sessionId}
+      context={context}
+    />
+  );
+};

package/src/pages/api/check-availability.ts

@@ -0,0 +1,113 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+import crypto from 'crypto';
+import { getRandomString, generateHash } from '../../utils';
+
+interface CheckAvailabilityResponse {
+  salt: string;
+  hash: string;
+  has_availability: boolean;
+}
+
+const verifyResponseHash = (
+  salt: string,
+  hasAvailability: boolean,
+  hashKey: string,
+  responseHash: string
+): boolean => {
+  return (
+    generateHash(salt, hasAvailability ? 'True' : 'False', hashKey) ===
+    responseHash
+  );
+};
+
+export async function POST(request: NextRequest) {
+  try {
+    const hashKey = process.env.TAMARA_HASH_KEY;
+    const extensionUrl = process.env.TAMARA_EXTENSION_URL;
+
+    if (!hashKey) {
+      return NextResponse.json(
+        { message: 'TAMARA_HASH_KEY environment variable is not set' },
+        { status: 500 }
+      );
+    }
+
+    if (!extensionUrl) {
+      return NextResponse.json(
+        { message: 'TAMARA_EXTENSION_URL environment variable is not set' },
+        { status: 500 }
+      );
+    }
+
+    const body = await request.json();
+    const { country, phone_number, order_amount } = body;
+    const currency = request.cookies.get('pz-currency')?.value;
+
+    if (!currency) {
+      return NextResponse.json(
+        { message: 'Currency not found in cookies' },
+        { status: 400 }
+      );
+    }
+
+    if (!country || !phone_number || !order_amount) {
+      return NextResponse.json(
+        { message: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
+
+    const upperCountry = country.toUpperCase();
+    const upperCurrency = currency.toUpperCase();
+
+    const salt = getRandomString(10);
+    const hash = generateHash(salt, upperCountry, phone_number, hashKey);
+
+    const response = await fetch(`${extensionUrl}/check-availability`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        salt,
+        hash,
+        country: upperCountry,
+        phone_number,
+        order_value: {
+          amount: order_amount,
+          currency: upperCurrency
+        }
+      })
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      return NextResponse.json(errorData, { status: response.status });
+    }
+
+    const data: CheckAvailabilityResponse = await response.json();
+
+    const isValidHash = verifyResponseHash(
+      data.salt,
+      data.has_availability,
+      hashKey,
+      data.hash
+    );
+
+    if (!isValidHash) {
+      return NextResponse.json(
+        { message: 'Invalid response hash' },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error checking Tamara availability:', error);
+    return NextResponse.json(
+      { message: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

package/src/redux/api.ts

@@ -0,0 +1,36 @@
+import { api } from '@akinon/next/data/client/api';
+import { setPaymentStepBusy } from '@akinon/next/redux/reducers/checkout';
+
+interface CheckTamaraAvailabilityRequest {
+  country: string;
+  phone_number: string;
+  order_amount: string;
+}
+
+interface CheckTamaraAvailabilityResponse {
+  salt: string;
+  hash: string;
+  has_availability: boolean;
+}
+
+export const tamaraApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    checkTamaraAvailability: build.mutation<
+      CheckTamaraAvailabilityResponse,
+      CheckTamaraAvailabilityRequest
+    >({
+      query: (body) => ({
+        url: '/api/tamara-check-availability',
+        method: 'POST',
+        body
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    })
+  })
+});
+
+export const { useCheckTamaraAvailabilityMutation } = tamaraApi;

package/src/utils/index.ts

@@ -0,0 +1,28 @@
+import crypto from 'crypto';
+
+export const fetchData = async (url: string, requestHeaders: HeadersInit) => {
+  const response = await fetch(url, { headers: requestHeaders });
+  return response.json();
+};
+
+export const getRandomString = (length: number): string => {
+  const characters =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  return Array.from({ length }, () =>
+    characters.charAt(Math.floor(Math.random() * characters.length))
+  ).join('');
+};
+
+export const generateHash = (...values: string[]): string => {
+  const hashStr = values.join('|');
+  return crypto.createHash('sha512').update(hashStr, 'utf8').digest('hex');
+};
+
+export const formatDecimal = (value: number): string => {
+  const decimalStr = value.toString();
+  const decimalPlaces = decimalStr.includes('.')
+    ? decimalStr.split('.')[1].length
+    : 0;
+
+  return value.toFixed(decimalPlaces);
+};