@akinon/pz-tamara-extension 2.0.0-beta.11 → 2.0.0-beta.13

package/CHANGELOG.md

@@ -1,32 +1,99 @@
 # @akinon/pz-tamara-extension
 
-## 2.0.0-beta.11
+## 2.0.0-beta.13
+
+## 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
 
-- ac783d6: ZERO-3482: Update tailwindcss to version 4.1.11 and enhance button cursor styles
+- 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
 
-## 2.0.0-beta.10
+## 1.95.0
+
+## 1.94.0
+
+## 1.93.0
+
+## 1.92.0
+
+## 1.91.0
 
 ### Minor Changes
 
-- 2806320: ZERO-3390: Update version tailwindcss, autoprefixer, tailwind-merge, postcss
+- 1e53e17: ZERO-3302: decimal precision in formatDecimal function
+- 07248e0: ZERO-3302: fix decimal formatting for Tamara payment gateway
 
-## 2.0.0-beta.9
+## 1.90.0
+
+## 1.89.0
 
 ### Minor Changes
 
-- 0fe7711: ZERO-3387: Upgrade nextjs, eslint-config-next
+- 1ba5af2: ZERO-3354: Add data-testids for tamara package
+
+## 1.88.0
 
-## 2.0.0-beta.8
+## 1.87.0
 
-## 2.0.0-beta.7
+## 1.86.0
 
-## 2.0.0-beta.6
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-tamara-extension",
-  "version": "2.0.0-beta.11",
+  "version": "2.0.0-beta.13",
   "license": "MIT",
   "main": "src/index.tsx",
   "scripts": {
@@ -8,8 +8,8 @@
     "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",
@@ -18,8 +18,8 @@
     "@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.4",
+    "react-dom": "^19.2.4",
     "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/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

@@ -9,21 +9,15 @@ import {
   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 <></>;
@@ -142,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;
+}