@akinon/pz-tabby-extension 1.55.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-tabby-extension",
+  "version": "1.55.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,59 @@
+# Tabby Payment Gateway Extension
+
+## Installation
+
+There are two ways to install the Tabby Payment Gateway extension:
+
+### 1. Install the npm package using Yarn
+
+For the latest version, you can install the package using Yarn:
+
+```bash
+yarn add @akinon/pz-tabby-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 Tabby 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/tabby/` directory.
+
+2. Create a file named `page.tsx` and include the following code:
+
+```jsx
+import { TabbyPaymentGateway } from '@akinon/pz-tabby-extension';
+
+const TabbyGateway = ({
+  searchParams: { sessionId },
+  params: { currency }
+}: {
+  searchParams: Record<string, string>;
+  params: { currency: string };
+}) => (
+  <TabbyPaymentGateway
+    currency={currency}
+    extensionUrl={process.env.TABBY_EXTENSION_URL}
+    hashKey={process.env.TABBY_HASH_KEY}
+    sessionId={sessionId}
+  />
+);
+
+export default TabbyGateway;
+```
+
+## Configuration
+
+Add these variables to your `.env` file
+
+```env
+TABBY_EXTENSION_URL=<your_extension_url>
+TABBY_HASH_KEY=<your_hash_key>
+```

package/src/components/FormComponent.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { cookies } from 'next/headers';
+
+type FormComponentProps = {
+  extensionUrl: string;
+  sessionId: string;
+  hash: string;
+  salt: string;
+  context: any;
+};
+
+const FormComponent = ({
+  extensionUrl,
+  sessionId,
+  hash,
+  salt,
+  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="tabby-extension-form"
+    >
+      <input type="hidden" name="csrf_token" value={csrfToken} />
+      <input type="hidden" name="hash" value={hash} />
+      <input type="hidden" name="salt" value={salt} />
+      <input type="hidden" name="data" value={JSON.stringify(context)} />
+
+      <script
+        dangerouslySetInnerHTML={{
+          __html: "document.getElementById('tabby-extension-form').submit()"
+        }}
+      />
+    </form>
+  );
+};
+
+export default FormComponent;

package/src/index.tsx

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

package/src/pages/TabbyPaymentGateway.tsx

@@ -0,0 +1,104 @@
+import { URLS } from '@akinon/next/data/urls';
+import settings from '@theme/settings';
+import { cookies } from 'next/headers';
+import React from 'react';
+import FormComponent from '../components/FormComponent';
+import {
+  fetchData,
+  generateHash,
+  getOrderStatus,
+  getRandomString,
+  groupByProductId
+} from '../utils';
+
+type TabbyPaymentGatewayProps = {
+  sessionId: string;
+  currency: string;
+  extensionUrl: string;
+  hashKey: string;
+};
+
+export const TabbyPaymentGateway = async ({
+  sessionId,
+  currency,
+  extensionUrl,
+  hashKey
+}: TabbyPaymentGatewayProps) => {
+  const nextCookies = cookies();
+
+  const requestHeaders = {
+    Cookie: `osessionid=${nextCookies.get('osessionid')?.value}`,
+    'Content-Type': 'application/json',
+    'x-currency': currency,
+    'X-Requested-With': 'XMLHttpRequest'
+  };
+
+  const [preOrder, userProfile, successOrders, orderHistory, wishlist] =
+    await Promise.all([
+      fetchData(
+        `${settings.commerceUrl}/orders/checkout/?page=OrderNotePage`,
+        requestHeaders
+      ),
+      fetchData(URLS.user.currentUser, requestHeaders),
+      fetchData(`${URLS.account.order}?limit=1&status=550`, requestHeaders),
+      fetchData(`${URLS.account.order}?limit=10`, requestHeaders),
+      fetchData(
+        URLS.wishlist.getFavorites({ page: 1, limit: 1 }),
+        requestHeaders
+      )
+    ]);
+
+  const salt = getRandomString(10);
+  const hash = generateHash(hashKey, sessionId, salt);
+
+  const context = {
+    salt,
+    hash,
+    shipping_address: {
+      city: preOrder.pre_order.shipping_address.city.name,
+      address: preOrder.pre_order.shipping_address.line,
+      zip: preOrder.pre_order.shipping_address.postcode
+    },
+    order_items: preOrder.pre_order.basket.basketitem_set.map((item: any) => ({
+      unit_price: item.unit_price,
+      title: item.product.name,
+      quantity: item.quantity,
+      category: item.product.category.name
+    })),
+    buyer_history: {
+      registered_since: userProfile.date_joined,
+      loyalty_level: successOrders.count,
+      wishlist_count: wishlist.count,
+      is_email_verified: userProfile.is_email_verified,
+      is_social_networks_connected: userProfile.is_social_networks_connected,
+      is_phone_number_verified: userProfile.attributes?.verified_phone ?? false
+    },
+    order_history: orderHistory.results.map((order_history: any) => ({
+      purchased_at: order_history.created_date,
+      amount: order_history.amount,
+      payment_method: order_history.card === null ? 'cod' : 'card',
+      status: getOrderStatus(order_history.status.value),
+      buyer: {
+        phone: order_history.billing_address.phone_number,
+        email: order_history.billing_address.email,
+        name: `${order_history.billing_address.first_name} ${order_history.billing_address.last_name}`
+      },
+      shipping_address: {
+        city: order_history.shipping_address.city.name,
+        address: order_history.shipping_address.line,
+        zip: order_history.shipping_address.postcode
+      },
+      order_items: groupByProductId(order_history.orderitem_set)
+    }))
+  };
+
+  return (
+    <FormComponent
+      extensionUrl={extensionUrl}
+      sessionId={sessionId}
+      hash={hash}
+      salt={salt}
+      context={context}
+    />
+  );
+};

package/src/types/index.ts

@@ -0,0 +1,28 @@
+export enum OrderServiceStatus {
+  New = 'new',
+  Processing = 'processing',
+  Completed = 'complete',
+  Refunded = 'refunded',
+  Canceled = 'canceled',
+  Unknown = 'unknown'
+}
+
+export enum OrderCommerceStatus {
+  CancellationWaiting = '50',
+  Cancelled = '100',
+  Waiting = '200',
+  PaymentWaiting = '300',
+  ConfirmationWaiting = '350',
+  Approved = '400',
+  Preparing = '450',
+  Shipped = '500',
+  ShippedAndInformed = '510',
+  ReadyForPickup = '520',
+  AttemptedDelivery = '540',
+  ReviewStarted = '544',
+  ReviewWaiting = '545',
+  WaitingForPayment = '546',
+  Paid = '547',
+  Delivered = '550',
+  Refunded = '600'
+}

package/src/utils/index.ts

@@ -0,0 +1,66 @@
+import crypto from 'crypto';
+import { OrderCommerceStatus, OrderServiceStatus } from '../types';
+
+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 = (
+  hashKey: string,
+  sessionId: string,
+  salt: string
+): string => {
+  const hashStr = `${salt}|${sessionId}|${hashKey}`;
+  return crypto.createHash('sha512').update(hashStr, 'utf8').digest('hex');
+};
+
+export const groupByProductId = (orderItems: any[]) => {
+  return Object.values(
+    orderItems.reduce((acc, item) => {
+      const productId = item.product.pk;
+      acc[productId] = acc[productId] || {
+        unit_price: item.price,
+        title: item.product.name,
+        quantity: 0,
+        category: item.product.category.name
+      };
+      acc[productId].quantity += 1;
+      return acc;
+    }, {})
+  );
+};
+
+export const getOrderStatus = (
+  commerceOrderStatusValue: string
+): OrderServiceStatus => {
+  switch (commerceOrderStatusValue) {
+    case OrderCommerceStatus.Waiting:
+    case OrderCommerceStatus.PaymentWaiting:
+    case OrderCommerceStatus.ConfirmationWaiting:
+      return OrderServiceStatus.New;
+    case OrderCommerceStatus.Approved:
+    case OrderCommerceStatus.Preparing:
+    case OrderCommerceStatus.Shipped:
+    case OrderCommerceStatus.ShippedAndInformed:
+    case OrderCommerceStatus.ReadyForPickup:
+    case OrderCommerceStatus.AttemptedDelivery:
+      return OrderServiceStatus.Processing;
+    case OrderCommerceStatus.Delivered:
+      return OrderServiceStatus.Completed;
+    case OrderCommerceStatus.Refunded:
+      return OrderServiceStatus.Refunded;
+    case OrderCommerceStatus.Cancelled:
+      return OrderServiceStatus.Canceled;
+    default:
+      return OrderServiceStatus.Unknown;
+  }
+};