@akinon/pz-tabby-extension 2.0.0-beta.2 → 2.0.0-beta.21

package/CHANGELOG.md

@@ -1,18 +1,131 @@
 # @akinon/pz-tabby-extension
 
-## 2.0.0-beta.2
+## 2.0.0-beta.21
 
-## 2.0.0-beta.1
+## 2.0.0-beta.20
+
+## 1.126.0
+
+## 1.125.2
+
+## 1.125.1
+
+## 1.125.0
+
+## 1.124.0
+
+## 1.123.0
+
+## 1.122.0
+
+## 1.121.0
+
+## 1.120.0
+
+## 1.119.0
+
+## 1.118.0
+
+## 1.117.0
+
+## 1.116.0
+
+## 1.115.0
+
+## 1.114.0
+
+## 1.113.0
+
+## 1.112.0
+
+## 1.111.0
+
+## 1.110.0
+
+## 1.109.0
+
+## 1.108.0
+
+## 1.107.0
+
+## 1.106.0
+
+## 1.105.0
+
+## 1.104.0
+
+## 1.103.0
+
+## 1.102.0
+
+## 1.101.0
+
+## 1.100.0
+
+## 1.99.0
 
 ### Minor Changes
 
-- ZERO-3091: Upgrade Next.js to v15 and React to v19
+- d58538b: ZERO-3638: Enhance RC pipeline: add fetch, merge, and pre-release setup with conditional commit
+
+## 1.98.0
+
+## 1.97.0
+
+## 1.96.0
+
+## 1.95.0
+
+### Minor Changes
+
+- 1913efc: ZERO-3296: Add Tabby payment availability check API and update related components
+- 2e3e8ab: ZERO-3296: Refactor POST handler to check currency-specific environment variables for hash key and extension URL
+
+## 1.94.0
+
+## 1.93.0
+
+## 1.92.0
+
+## 1.91.0
+
+## 1.90.0
+
+## 1.89.0
+
+## 1.88.0
+
+## 1.87.0
+
+## 1.86.0
+
+## 1.85.0
+
+## 1.84.0
+
+### Minor Changes
+
+- 624a4eb: ZERO-3276: Update installation instructions across multiple README files to standardize format and improve clarity
+
+## 1.83.0
+
+## 1.82.0
+
+### Minor Changes
+
+- 9db58ad: ZERO-3230: add default values to tabby payment gateway
+
+## 1.81.0
+
+## 1.80.0
+
+## 1.79.0
 
-## 2.0.0-beta.0
+## 1.78.0
 
-### Major Changes
+## 1.77.0
 
-- be6c09d: ZERO-3114: Create beta version.
+## 1.76.0
 
 ## 1.75.0
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-tabby-extension",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.21",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "prettier": "^3.4.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "^5.7.2"
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "prettier": "^3.0.3",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "typescript": "^5.2.2"
   }
 }

package/readme.md

@@ -2,19 +2,7 @@
 
 ## 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:
+You can use the following command to install the extension with the latest plugins:
 
 ```bash
 npx @akinon/projectzero@latest --plugins
@@ -52,6 +40,71 @@ const TabbyGateway = async ({
 export default TabbyGateway;
 ```
 
+## API Routes
+
+### Check Availability API
+
+To enable Tabby payment availability checks, you need to create an API route. Create a file at `src/app/api/tabby-check-availability/route.ts` with the following content:
+
+```typescript
+import { POST } from '@akinon/pz-tabby-extension/src/pages/api/check-availability';
+
+export { POST };
+```
+
+This API endpoint handles checking the availability of Tabby payment for a given:
+
+- Order amount
+- Email
+- Phone number
+- Currency
+
+The endpoint automatically validates the request and response using hash-based security measures.
+
+### Using checkTabbyAvailability Mutation
+
+The extension provides a Redux mutation hook that you can use to check Tabby payment availability. Here's an example of how to implement it:
+
+```typescript
+import { useCheckTabbyAvailabilityMutation } from '@akinon/pz-tabby-extension/src/redux/api';
+
+const YourComponent = () => {
+  const [checkTabbyAvailability] = useCheckTabbyAvailabilityMutation();
+  const [isTabbyAvailable, setIsTabbyAvailable] = useState(false);
+
+  useEffect(() => {
+    const checkAvailability = async () => {
+      try {
+        const response = await checkTabbyAvailability({
+          amount: 1000, // Order total amount
+          phone: '+971123456789', // Customer's phone number
+          email: 'example@example.com', // Customer's email ,
+          name: 'Akinon Akinon', // Customer's Full Name
+        }).unwrap();
+
+        setIsTabbyAvailable(response.is_available);
+      } catch (error) {
+        console.error('Error checking Tabby availability:', error);
+        setIsTabbyAvailable(false);
+      }
+    };
+
+    checkAvailability();
+  }, [checkTabbyAvailability]);
+
+  // Use isTabbyAvailable to conditionally render Tabby payment option
+  return (
+    // Your component JSX
+  );
+};
+```
+
+The mutation returns an object with the following properties:
+
+- `is_available`: boolean indicating if Tabby payment is available
+- `salt`: string used for hash verification
+- `hash`: string for response validation
+
 ## Configuration
 
 Add these variables to your `.env` file
@@ -59,4 +112,4 @@ Add these variables to your `.env` file
 ```env
 TABBY_EXTENSION_URL=<your_extension_url>
 TABBY_HASH_KEY=<your_hash_key>
-```
+```

package/src/pages/TabbyPaymentGateway.tsx

@@ -6,6 +6,7 @@ import FormComponent from '../components/FormComponent';
 import {
   fetchData,
   generateHash,
+  getISODateWithMicroseconds,
   getOrderStatus,
   getRandomString,
   groupByProductId
@@ -60,47 +61,52 @@ export const TabbyPaymentGateway = async ({
     ]);
 
   const salt = getRandomString(10);
-  const hash = generateHash(hashKey, sessionId, salt);
+  const hash = generateHash(salt, sessionId, hashKey);
 
   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 ?? '0'
+      city: preOrder?.pre_order?.shipping_address?.city?.name,
+      address: preOrder?.pre_order?.shipping_address?.line,
+      zip: preOrder?.pre_order?.shipping_address?.postcode ?? '0'
     },
-    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
-    })),
+    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
+      registered_since:
+        userProfile?.date_joined ?? getISODateWithMicroseconds(),
+      loyalty_level: successOrders?.count ?? 0,
+      wishlist_count: wishlist?.count ?? 0,
+      is_email_verified: userProfile?.is_email_verified ?? false,
+      is_social_networks_connected:
+        userProfile?.is_social_networks_connected ?? false,
+      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 ?? '0'
-      },
-      order_items: groupByProductId(order_history.orderitem_set)
-    }))
+    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 ?? '0'
+        },
+        order_items: groupByProductId(order_history?.orderitem_set)
+      })) ?? []
   };
 
   return (

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

@@ -0,0 +1,118 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+import { getRandomString, generateHash } from '../../utils';
+
+interface CheckAvailabilityResponse {
+  salt: string;
+  hash: string;
+  is_available: 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 body = await request.json();
+    const { amount, phone, email, name } = body;
+    const currency = request.cookies.get('pz-currency')?.value;
+
+    if (!currency) {
+      return NextResponse.json(
+        { message: 'Currency not found in cookies' },
+        { status: 400 }
+      );
+    }
+
+    if (!amount || !phone || !email || !name) {
+      return NextResponse.json(
+        { message: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
+
+    const upperCurrency = currency.toUpperCase();
+
+    const currencySpecificHashKey =
+      process.env[`TABBY_HASH_KEY_${upperCurrency}`];
+    const currencySpecificUrl =
+      process.env[`TABBY_EXTENSION_URL_${upperCurrency}`];
+
+    const hashKey = currencySpecificHashKey || process.env.TABBY_HASH_KEY;
+    const extensionUrl = currencySpecificUrl || process.env.TABBY_EXTENSION_URL;
+
+    if (!hashKey) {
+      return NextResponse.json(
+        { message: 'TABBY_HASH_KEY environment variable is not set' },
+        { status: 500 }
+      );
+    }
+
+    if (!extensionUrl) {
+      return NextResponse.json(
+        { message: 'TABBY_EXTENSION_URL environment variable is not set' },
+        { status: 500 }
+      );
+    }
+
+    const salt = getRandomString(10);
+    const hash = generateHash(salt, amount, email, phone, hashKey);
+
+    const response = await fetch(`${extensionUrl}/check-availability`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        salt,
+        hash,
+        payment: {
+          amount,
+          currency: upperCurrency,
+          buyer: {
+            phone,
+            email,
+            name
+          }
+        }
+      })
+    });
+
+    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.is_available,
+      hashKey,
+      data.hash
+    );
+
+    if (!isValidHash) {
+      return NextResponse.json(
+        { message: 'Invalid response hash' },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error checking Tabby availability:', error);
+    return NextResponse.json(
+      { message: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

package/src/redux/api.ts

@@ -0,0 +1,37 @@
+import { api } from '@akinon/next/data/client/api';
+import { setPaymentStepBusy } from '@akinon/next/redux/reducers/checkout';
+
+interface CheckTabbyAvailabilityRequest {
+  amount: string;
+  phone: string;
+  email: string;
+  name: string;
+}
+
+interface CheckTabbyAvailabilityResponse {
+  salt: string;
+  hash: string;
+  is_available: boolean;
+}
+
+export const tabbyApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    checkTabbyAvailability: build.mutation<
+      CheckTabbyAvailabilityResponse,
+      CheckTabbyAvailabilityRequest
+    >({
+      query: (body) => ({
+        url: '/api/tabby-check-availability/',
+        method: 'POST',
+        body
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    })
+  })
+});
+
+export const { useCheckTabbyAvailabilityMutation } = tabbyApi;

package/src/utils/index.ts

@@ -14,28 +14,24 @@ export const getRandomString = (length: number): string => {
   ).join('');
 };
 
-export const generateHash = (
-  hashKey: string,
-  sessionId: string,
-  salt: string
-): string => {
-  const hashStr = `${salt}|${sessionId}|${hashKey}`;
+export const generateHash = (...values: string[]): string => {
+  const hashStr = values.join('|');
   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;
+    orderItems?.reduce((acc, item) => {
+      const productId = item?.product?.pk;
       acc[productId] = acc[productId] || {
-        unit_price: item.price,
-        title: item.product.name,
+        unit_price: item?.price,
+        title: item?.product?.name,
         quantity: 0,
-        category: item.product.category.name
+        category: item?.product?.category?.name
       };
       acc[productId].quantity += 1;
       return acc;
-    }, {})
+    }, {}) || {}
   );
 };
 
@@ -64,3 +60,13 @@ export const getOrderStatus = (
       return OrderServiceStatus.Unknown;
   }
 };
+
+export const getISODateWithMicroseconds = () => {
+  const now = new Date();
+  const isoString = now.toISOString();
+
+  const milliseconds = now.getMilliseconds().toString().padStart(3, '0');
+  const microseconds = milliseconds + '650';
+
+  return isoString.replace(/\.\d{3}Z$/, `.${microseconds}Z`);
+};