@akinon/pz-tabby-extension 1.94.0 → 1.95.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @akinon/pz-tabby-extension
 
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-tabby-extension",
-  "version": "1.94.0",
+  "version": "1.95.0",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/readme.md

@@ -40,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

package/src/pages/TabbyPaymentGateway.tsx

@@ -61,7 +61,7 @@ export const TabbyPaymentGateway = async ({
     ]);
 
   const salt = getRandomString(10);
-  const hash = generateHash(hashKey, sessionId, salt);
+  const hash = generateHash(salt, sessionId, hashKey);
 
   const context = {
     salt,

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,12 +14,8 @@ 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');
 };