@akinon/pz-tamara-extension 2.0.0-beta.8 → 2.0.0

package/CHANGELOG.md

@@ -1,14 +1,135 @@
 # @akinon/pz-tamara-extension
 
-## 2.0.0-beta.8
+## 2.0.0
 
-## 2.0.0-beta.7
+## 2.0.0-beta.27
 
-## 2.0.0-beta.6
+## 2.0.0-beta.26
+
+## 2.0.0-beta.25
+
+## 2.0.0-beta.24
+
+## 2.0.0-beta.23
+
+## 2.0.0-beta.22
+
+## 2.0.0-beta.21
+
+## 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
+
+### Minor Changes
+
+- 155cd23: ZERO-3377: Add customization options for Tamara payment gateway component
+
+## 1.105.0
+
+## 1.104.0
+
+## 1.103.0
+
+## 1.102.0
+
+## 1.101.0
+
+## 1.100.0
+
+## 1.99.0
+
+### Minor Changes
+
+- 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
+
+## 1.94.0
+
+## 1.93.0
+
+## 1.92.0
+
+## 1.91.0
+
+### Minor Changes
+
+- 1e53e17: ZERO-3302: decimal precision in formatDecimal function
+- 07248e0: ZERO-3302: fix decimal formatting for Tamara payment gateway
+
+## 1.90.0
+
+## 1.89.0
+
+### Minor Changes
+
+- 1ba5af2: ZERO-3354: Add data-testids for tamara package
+
+## 1.88.0
+
+## 1.87.0
+
+## 1.86.0
+
+## 1.85.0
+
+## 1.84.0
 
 ### Minor Changes
 
-- 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
+- 624a4eb: ZERO-3276: Update installation instructions across multiple README files to standardize format and improve clarity
+
+## 1.83.0
 
 ## 1.82.0
 

package/jest.config.js

@@ -0,0 +1,7 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+module.exports = {
+  testEnvironment: 'node',
+  transform: {
+    '^.+.tsx?$': ['ts-jest', {}]
+  }
+};

package/package.json

@@ -1,19 +1,26 @@
 {
   "name": "@akinon/pz-tamara-extension",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0",
   "license": "MIT",
   "main": "src/index.tsx",
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@types/jest": "^29.5.14",
     "@types/node": "^18.7.8",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "jest": "^29.7.0",
     "prettier": "^3.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "ts-jest": "^29.3.1",
     "typescript": "^5.2.2"
   }
 }

package/readme.md

@@ -40,6 +40,94 @@ const TamaraGateway = async ({
 export default TamaraGateway;
 ```
 
+## Customizing the Tamara Component
+
+You can customize the appearance of the Tamara payment gateway using the `renderer` prop. This allows you to provide custom rendering functions for different parts of the component.
+
+### Custom Form Component
+
+```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}
+      renderer={{
+        formComponent: {
+          renderForm: ({ extensionUrl, sessionId, context, csrfToken, autoSubmit }) => (
+            <div className="custom-tamara-form-wrapper">
+              <h3 className="text-lg font-semibold mb-4">Tamara Payment</h3>
+              <p className="mb-4">You are beign redirected to Tamara payment page...</p>
+              <form
+                action={`${extensionUrl}/form-page/?sessionId=${sessionId}`}
+                method="post"
+                encType="multipart/form-data"
+                id="tamara-custom-form"
+                className="hidden"
+              >
+                <input type="hidden" name="csrf_token" value={csrfToken} />
+                <input type="hidden" name="data" value={JSON.stringify(context)} />
+                {autoSubmit && (
+                  <script
+                    dangerouslySetInnerHTML={{
+                      __html: "document.getElementById('tamara-custom-form').submit()"
+                    }}
+                  />
+                )}
+              </form>
+              <div className="loader w-12 h-12 border-4 border-t-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
+            </div>
+          )
+        },
+        paymentGateway: {
+          renderContainer: ({ children }) => (
+            <div className="p-8 max-w-lg mx-auto bg-white rounded-lg shadow-md">
+              {children}
+            </div>
+          )
+        }
+      }}
+    />
+  );
+};
+
+export default TamaraGateway;
+```
+
+## Custom Renderer API
+
+The renderer prop accepts an object with the following structure:
+
+```typescript
+interface TamaraRendererProps {
+  formComponent?: {
+    renderForm?: (props: {
+      extensionUrl: string;
+      sessionId: string;
+      context: any;
+      csrfToken: string;
+      autoSubmit: boolean;
+    }) => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+    renderError?: (error: string) => React.ReactNode;
+  };
+  paymentGateway?: {
+    renderContainer?: (props: { children: React.ReactNode }) => React.ReactNode;
+  };
+}
+```
+
 ## API Routes
 
 ### Check Availability API

package/src/__tests__/tamara.test.ts

@@ -0,0 +1,72 @@
+import { formatDecimal, getQuantizeFormat } from '../utils';
+
+describe('Utility Functions', () => {
+  describe('formatDecimal', () => {
+    it('should format decimal numbers correctly', () => {
+      expect(formatDecimal(10)).toBe('10');
+      expect(formatDecimal(10.5)).toBe('10.5');
+      expect(formatDecimal(10.55)).toBe('10.55');
+      expect(formatDecimal(10.555)).toBe('10.555');
+
+      expect(formatDecimal(0)).toBe('0');
+      expect(formatDecimal(0.0)).toBe('0');
+
+      expect(formatDecimal(-10.5)).toBe('-10.5');
+
+      expect(formatDecimal(0.001)).toBe('0.001');
+    });
+
+    it('should use provided quantizeFormat when specified', () => {
+      expect(formatDecimal(10.557, 0.01)).toBe('10.55');
+      expect(formatDecimal(10.557, 0.1)).toBe('10.5');
+      expect(formatDecimal(10.557, 1)).toBe('10');
+
+      expect(formatDecimal(10.557, 0)).toBe('10.557');
+    });
+  });
+
+  describe('getQuantizeFormat', () => {
+    it('should return correct quantize format for different price strings', () => {
+      expect(getQuantizeFormat('10')).toBe(0);
+      expect(getQuantizeFormat('10.5')).toBe(0.1);
+      expect(getQuantizeFormat('10.55')).toBe(0.01);
+      expect(getQuantizeFormat('10.555')).toBe(0.001);
+
+      expect(getQuantizeFormat('0')).toBe(0);
+      expect(getQuantizeFormat('0.0')).toBe(0.1);
+
+      expect(getQuantizeFormat('-10.5')).toBe(0.1);
+
+      expect(getQuantizeFormat('0.001')).toBe(0.001);
+    });
+  });
+
+  describe('Decimal Formatting Integration', () => {
+    it('should correctly round basket item amounts', () => {
+      const priceAsString = '100.55';
+      const quantizeFormat = getQuantizeFormat(priceAsString);
+
+      const amount = 100.557;
+      const roundedAmount =
+        Math.floor(amount / quantizeFormat) * quantizeFormat;
+
+      expect(roundedAmount).toBe(100.55);
+      expect(formatDecimal(amount, quantizeFormat)).toBe('100.55');
+    });
+
+    it('should correctly calculate and round tax amounts', () => {
+      const priceAsString = '100.55';
+      const quantizeFormat = getQuantizeFormat(priceAsString);
+
+      const amount = 100.55;
+      const taxRate = 18.0 / 100;
+      const taxAmount = amount * taxRate;
+
+      const roundedTaxAmount =
+        Math.floor(taxAmount / quantizeFormat) * quantizeFormat;
+
+      expect(roundedTaxAmount).toBe(18.09);
+      expect(formatDecimal(taxAmount, quantizeFormat)).toBe('18.09');
+    });
+  });
+});

package/src/components/FormComponent.tsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import { cookies } from 'next/headers';
-
-type FormComponentProps = {
-  extensionUrl: string;
-  sessionId: string;
-  context: any;
-};
+import { FormComponentProps } from '../types';
 
 const FormComponent = async ({
   extensionUrl,
   sessionId,
-  context
+  context,
+  renderer,
+  autoSubmit = true
 }: FormComponentProps) => {
   const nextCookies = await cookies();
 
@@ -20,9 +17,15 @@ const FormComponent = async ({
 
   const csrfToken = nextCookies.get('csrftoken')?.value ?? '';
 
-  return (
+  const DefaultForm = ({
+    extensionUrl,
+    sessionId,
+    context,
+    csrfToken,
+    autoSubmit
+  }) => (
     <form
-      action={`${extensionUrlWithoutSlash}/form-page/?sessionId=${sessionId}`}
+      action={`${extensionUrl}/form-page/?sessionId=${sessionId}`}
       method="post"
       encType="multipart/form-data"
       id="tamara-extension-form"
@@ -30,13 +33,27 @@ const FormComponent = async ({
       <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()"
-        }}
-      />
+      {autoSubmit && (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: "document.getElementById('tamara-extension-form').submit()"
+          }}
+        />
+      )}
     </form>
   );
+
+  const RenderForm = renderer?.renderForm || DefaultForm;
+
+  return (
+    <RenderForm
+      extensionUrl={extensionUrlWithoutSlash}
+      sessionId={sessionId}
+      context={context}
+      csrfToken={csrfToken}
+      autoSubmit={autoSubmit}
+    />
+  );
 };
 
 export default FormComponent;

package/src/index.tsx

@@ -1 +1,6 @@
 export * from './pages/TamaraPaymentGateway';
+export type {
+  TamaraPaymentGatewayProps,
+  TamaraRendererProps,
+  FormComponentProps
+} from './types';

package/src/pages/TamaraPaymentGateway.tsx

@@ -6,23 +6,18 @@ import {
   fetchData,
   generateHash,
   getRandomString,
-  formatDecimal
+  formatDecimal,
+  getQuantizeFormat
 } from '../utils';
-
-type TamaraPaymentGatewayProps = {
-  sessionId: string;
-  currency: string;
-  locale: string;
-  extensionUrl: string;
-  hashKey: string;
-};
+import { TamaraPaymentGatewayProps } from '../types';
 
 export const TamaraPaymentGateway = async ({
   sessionId,
   currency,
   locale,
   extensionUrl,
-  hashKey
+  hashKey,
+  renderer
 }: TamaraPaymentGatewayProps) => {
   if (!sessionId || !currency || !locale) {
     return <></>;
@@ -67,6 +62,10 @@ export const TamaraPaymentGateway = async ({
     0
   );
 
+  const quantizeFormat = getQuantizeFormat(
+    preOrder.pre_order.unpaid_amount.toString()
+  );
+
   let cumulativeAmount = 0;
   let totalTaxAmount = 0;
   const basketItems = basketItemSet.map((item: any, index: number) => {
@@ -74,6 +73,10 @@ export const TamaraPaymentGateway = async ({
     const weight = basketItemAmount / totalProductAmount;
     let amount = remainingAmount * weight + basketItemAmount;
 
+    if (quantizeFormat !== 0) {
+      amount = Math.floor(amount / quantizeFormat) * quantizeFormat;
+    }
+
     cumulativeAmount += amount;
 
     if (index === basketItemSet.length - 1) {
@@ -82,7 +85,14 @@ export const TamaraPaymentGateway = async ({
     }
 
     const taxRate = Number(item.tax_rate || 0) / 100;
-    totalTaxAmount += amount * taxRate;
+    const itemTaxAmount = amount * taxRate;
+
+    if (quantizeFormat !== 0) {
+      totalTaxAmount +=
+        Math.floor(itemTaxAmount / quantizeFormat) * quantizeFormat;
+    } else {
+      totalTaxAmount += itemTaxAmount;
+    }
 
     return {
       name: item.product?.name?.substring(0, 255) || 'none',
@@ -91,7 +101,7 @@ export const TamaraPaymentGateway = async ({
       sku: item.product?.sku,
       quantity: item.quantity,
       total_amount: {
-        amount: formatDecimal(amount)
+        amount: formatDecimal(amount, quantizeFormat)
       }
     };
   });
@@ -100,10 +110,10 @@ export const TamaraPaymentGateway = async ({
     hash,
     salt,
     tax_amount: {
-      amount: formatDecimal(totalTaxAmount)
+      amount: formatDecimal(totalTaxAmount, quantizeFormat)
     },
     shipping_amount: {
-      amount: formatDecimal(shippingAmount)
+      amount: formatDecimal(shippingAmount, quantizeFormat)
     },
     order_items: basketItems,
     billing_address: {
@@ -126,11 +136,18 @@ export const TamaraPaymentGateway = async ({
     }
   };
 
+  const DefaultContainer = ({ children }) => <>{children}</>;
+  const RenderContainer =
+    renderer?.paymentGateway?.renderContainer || DefaultContainer;
+
   return (
-    <FormComponent
-      extensionUrl={extensionUrl}
-      sessionId={sessionId}
-      context={context}
-    />
+    <RenderContainer>
+      <FormComponent
+        extensionUrl={extensionUrl}
+        sessionId={sessionId}
+        context={context}
+        renderer={renderer?.formComponent}
+      />
+    </RenderContainer>
   );
 };

package/src/types.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export interface TamaraRendererProps {
+  formComponent?: {
+    renderForm?: (props: {
+      extensionUrl: string;
+      sessionId: string;
+      context: any;
+      csrfToken: string;
+      autoSubmit: boolean;
+    }) => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+    renderError?: (error: string) => React.ReactNode;
+  };
+  paymentGateway?: {
+    renderContainer?: (props: { children: React.ReactNode }) => React.ReactNode;
+  };
+}
+
+export interface FormComponentProps {
+  extensionUrl: string;
+  sessionId: string;
+  context: any;
+  renderer?: TamaraRendererProps['formComponent'];
+  autoSubmit?: boolean;
+}
+
+export interface TamaraPaymentGatewayProps {
+  sessionId: string;
+  currency: string;
+  locale: string;
+  extensionUrl: string;
+  hashKey: string;
+  renderer?: TamaraRendererProps;
+}

package/src/utils/index.ts

@@ -1,4 +1,4 @@
-import crypto from 'crypto';
+import * as crypto from 'crypto';
 
 export const fetchData = async (url: string, requestHeaders: HeadersInit) => {
   const response = await fetch(url, { headers: requestHeaders });
@@ -18,11 +18,45 @@ export const generateHash = (...values: string[]): string => {
   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
+export const formatDecimal = (
+  value: number,
+  quantizeFormat?: number
+): string => {
+  const valueStr = value.toString();
+
+  // If quantizeFormat is provided, use it to determine decimal places
+  if (quantizeFormat !== undefined && quantizeFormat !== 0) {
+    // Calculate decimal places from quantizeFormat
+    const decimalPlaces = Math.abs(Math.log10(quantizeFormat));
+    const roundedValue = Math.floor(value / quantizeFormat) * quantizeFormat;
+    return roundedValue.toFixed(decimalPlaces);
+  }
+
+  // Otherwise, determine decimal places from the value
+  let decimalPlaces = 0;
+  if (valueStr.includes('.')) {
+    decimalPlaces = valueStr.split('.')[1].length;
+  }
+
+  if (decimalPlaces === 0) {
+    return valueStr;
+  }
+
+  const defaultQuantizeFormat = Math.pow(10, -decimalPlaces);
+  const roundedValue =
+    Math.floor(value / defaultQuantizeFormat) * defaultQuantizeFormat;
+
+  return roundedValue.toFixed(decimalPlaces);
+};
+
+export const getQuantizeFormat = (priceAsString: string): number => {
+  const decimalPlaces = priceAsString.includes('.')
+    ? priceAsString.split('.')[1].length
     : 0;
 
-  return value.toFixed(decimalPlaces);
+  if (decimalPlaces === 0) {
+    return 0;
+  }
+
+  return Math.pow(10, -decimalPlaces);
 };