@akinon/pz-hepsipay 1.91.0-rc.4

package/.gitattributes

@@ -0,0 +1,15 @@
+*.js    text eol=lf
+*.jsx   text eol=lf
+*.ts    text eol=lf
+*.tsx   text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+
+.eslintignore text eol=lf
+.eslintrc text eol=lf
+.gitignore text eol=lf
+.prettierrc text eol=lf
+.yarnrc text eol=lf
+
+* text=auto
+

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/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @akinon/pz-hepsipay
+
+## 1.91.0-rc.4
+
+### Minor Changes
+
+- 7eb51ca: ZERO-3424 :Update package versions

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@akinon/pz-hepsipay",
+  "version": "1.91.0-rc.4",
+  "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,153 @@
+# Project Zero - Hepsipay Plugin
+
+## Installation
+
+You can use the following command to install the extension with the latest plugins:
+
+```bash
+
+npx @akinon/projectzero@latest --plugins
+
+```
+
+# Adding HepsiPay Payment Method to Checkout
+
+---
+
+## 1. Create Hepsipay File
+
+**views/checkout/steps/payment/options/hepsipay.tsx**
+
+```tsx
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import CheckoutAgreements from '../agreements';
+
+export default function Hepsipay() {
+  return (
+    <PluginModule
+      props={{
+        agreementCheckbox: (
+          <CheckoutAgreements control={null} error={null} fieldId="agreement" />
+        )
+      }}
+      component={Component.Hepsipay}
+    />
+  );
+}
+```
+
+## 2. Update Payment Step
+
+**views/checkout/steps/payment/index.tsx**
+
+```tsx
+import HepsiPay from './options/hepsipay';
+
+export const PaymentOptionViews: Array<CheckoutPaymentOption> = [
+  {
+    slug: 'hepsipay',
+    view: HepsiPay
+  }
+  // Other payment methods can be added here
+];
+```
+
+## Props
+
+### agreementCheckbox
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `agreementCheckbox` | `React.ReactElement` | A controlled checkbox React element (e.g., terms agreement checkbox |
+|  |
+
+### customUIRender
+
+A function to fully customize the Hepsipay component's appearance. If provided, the default UI will not be shown; instead, the JSX returned by this function will be rendered.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `customUIRender` | `React.ReactNode` | Optional function to fully customize the Hepsipay component. Receives frameUrl, errors, control, and onSubmit props. |
+|  |
+
+#### Example
+
+```tsx
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import Script from 'next/script';
+
+<PluginModule
+  props={{
+    customUIRender: ({ onSubmit, errors, control }) => (
+      <>
+        <div id="hepsipay-frame" data-testid="hepsipay-frame"></div>
+        <form onSubmit={onSubmit}>
+          <div className="flex items-start flex-col border-t border-solid border-gray-400 py-4 space-y-4">
+            <CheckoutAgreements
+              control={control}
+              error={errors.agreement}
+              fieldId="agreement"
+            />
+            <Button
+              className="group uppercase mt-4 inline-flex items-center justify-center w-full"
+              type="submit"
+              data-testid="checkout-bank-account-place-order"
+            >
+              <span>Place Order</span>
+              <Icon
+                name="chevron-end"
+                size={12}
+                className="fill-primary-foreground ml-2 h-3 group-hover:fill-primary"
+              />
+            </Button>
+          </div>
+        </form>
+
+        <Script
+          src="https://images.hepsiburada.net/hepsipay/packages/pf/hepsipay-latest.min.js"
+          defer
+        />
+      </>
+    )
+  }}
+  component={Component.Hepsipay}
+/>;
+```
+
+### initOptionsOverrides
+
+`initOptionsOverrides` is an object used to partially override the default settings passed to the Hepsipay SDK's `init` function. This allows customization of many options such as iframe behavior and appearance, as well as callback functions.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `frameUrl` | `string` | The URL of the payment iframe (required). |
+| `frameDivId` | `string` | The ID of the HTML div where the iframe will be embedded. |
+| `paymentStatusCallback` | `(isPaymentAllowed: boolean) => void` | Called when the payment status changes. |
+| `frameFailureCallback` | `() => void` | Called if the iframe fails to load or an error occurs. |
+| `onPaymentSuccessCallback` | `(payload: any) => void` | Callback function called when the payment is successfully completed. |
+| `maxHeight` | `string` | Maximum height for the iframe (e.g., `'800'`). |
+| `disableDynamicHeight` | `boolean` | Enables or disables dynamic height adjustment for the iframe. |
+| `showFramePaymentButton` | `boolean` | Shows or hides the payment button inside the iframe. |
+| `useApiCallOnSuccessCallback` | `boolean` | Determines whether to perform an API call on payment success. |
+| `selectedPaymentInfoCallback` | `(payload: any) => void` | Called when the selected payment information changes. |
+| `overrideFontFamily` | `string` | Custom font family to be used inside the iframe. |
+| `hideHeader` | `boolean` | Shows or hides the header section of the iframe. |
+
+#### Example
+
+```tsx
+<PluginModule
+  props={{
+    initOptionsOverrides: {
+      hideHeader: false,
+      maxHeight: '100',
+      overrideFontFamily: 'Roboto',
+      onPaymentSuccessCallback: (payload) => {
+        console.log('Success!', payload);
+      }
+    }
+  }}
+  component={Component.Hepsipay}
+/>
+```

package/src/index.tsx

@@ -0,0 +1,185 @@
+import { Button, Icon } from '@theme/components';
+import Script from 'next/script';
+import { useEffect, useCallback, useState } from 'react';
+import { RootState } from '@theme/redux/store';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useSetWalletCompletePageMutation } from '@akinon/next/data/client/checkout';
+import * as yup from 'yup';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import React from 'react';
+
+interface HepsipayTranslationsProps {
+  placeholderInput: string;
+  availableWarning: string;
+  agreementError: string;
+}
+
+interface CustomUIRenderProps {
+  onSubmit: () => void;
+  control: any;
+  errors: any;
+  frameUrl?: string;
+}
+
+interface InitOptions {
+  frameUrl: string;
+  frameDivId: string;
+  paymentStatusCallback: (isPaymentAllowed: boolean) => void;
+  frameFailureCallback: () => void;
+  onPaymentSuccessCallback: (payload: any) => void;
+  maxHeight: string;
+  disableDynamicHeight: boolean;
+  showFramePaymentButton: boolean;
+  useApiCallOnSuccessCallback: boolean;
+  selectedPaymentInfoCallback: (payload: any) => void;
+  overrideFontFamily: string;
+  hideHeader: boolean;
+}
+
+interface HepsipayProps {
+  translations: Record<string, HepsipayTranslationsProps>;
+  agreementCheckbox?: React.ReactElement;
+  customUIRender?: (props: CustomUIRenderProps) => React.ReactNode;
+  initOptionsOverrides?: Partial<InitOptions>;
+}
+
+export const Hepsipay = ({
+  translations,
+  agreementCheckbox,
+  customUIRender,
+  initOptionsOverrides
+}: HepsipayProps) => {
+  const defaultTranslations = {
+    placeholderInput: 'PLACE ORDER',
+    availableWarning:
+      'Hepsipay is not available for this user. Please choose another payment method.',
+    agreementError: 'This Field is Required'
+  };
+
+  const _translations = {
+    ...defaultTranslations,
+    ...translations
+  };
+
+  const hepsiPayFormSchema = () =>
+    yup.object().shape({
+      agreement: yup.boolean().oneOf([true], 'This Field is Required')
+    });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors }
+  } = useForm({
+    resolver: yupResolver(hepsiPayFormSchema())
+  });
+
+  const [isPaymentSuccessful, setIsPaymentSuccessful] = useState(false);
+
+  const context_extras = useAppSelector(
+    (state: RootState) => state.checkout.preOrder?.context_extras
+  );
+
+  const hepsipayAvailability = useAppSelector(
+    (state: RootState) => state.checkout?.hepsipayAvailability
+  );
+
+  const frameUrl = context_extras?.FrameUrl;
+
+  const [setWalletCompletePage] = useSetWalletCompletePageMutation();
+
+  const initHepsipay = useCallback(() => {
+    if (!frameUrl || !window.HepsipaySdk) return;
+
+    const defaultInitOptions: InitOptions = {
+      frameUrl,
+      frameDivId: 'hepsipay-frame',
+      paymentStatusCallback: () => {},
+      frameFailureCallback: () => {},
+      onPaymentSuccessCallback: () => {
+        setIsPaymentSuccessful(true);
+        setWalletCompletePage(true);
+      },
+      maxHeight: '800',
+      disableDynamicHeight: false,
+      showFramePaymentButton: false,
+      useApiCallOnSuccessCallback: false,
+      selectedPaymentInfoCallback: () => {},
+      overrideFontFamily: 'Inter',
+      hideHeader: false
+    };
+
+    const mergedInitOptions: InitOptions = {
+      ...defaultInitOptions,
+      ...initOptionsOverrides,
+      frameUrl
+    };
+
+    window.HepsipaySdk.init(mergedInitOptions);
+  }, [frameUrl, setWalletCompletePage]);
+
+  useEffect(() => {
+    if (window.HepsipaySdk) {
+      initHepsipay();
+    }
+  }, [initHepsipay]);
+
+  const onSubmit: SubmitHandler<null> = async () => {
+    if (window.HepsipaySdk) {
+      window.HepsipaySdk.initPayment();
+    } else {
+      console.error('Hepsipay SDK is not available');
+    }
+  };
+
+  if (isPaymentSuccessful) return null;
+
+  return (
+    <div className="p-4 sm:px-6">
+      {hepsipayAvailability ? (
+        customUIRender ? (
+          customUIRender({
+            onSubmit: handleSubmit(onSubmit),
+            control,
+            errors,
+            frameUrl
+          })
+        ) : (
+          <>
+            <div id="hepsipay-frame" data-testid="hepsipay-frame"></div>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <div className="flex items-start flex-col border-t border-solid border-gray-400 py-4 space-y-4">
+                {agreementCheckbox &&
+                  React.cloneElement(agreementCheckbox, {
+                    control,
+                    error: errors.agreement,
+                    fieldId: 'agreement'
+                  })}
+                <Button
+                  className="group uppercase mt-4 inline-flex items-center justify-center w-full"
+                  type="submit"
+                  data-testid="checkout-bank-account-place-order"
+                >
+                  <span>{_translations.placeholderInput}</span>
+                  <Icon
+                    name="chevron-end"
+                    size={12}
+                    className="fill-primary-foreground ml-2 h-3 group-hover:fill-primary"
+                  />
+                </Button>
+              </div>
+            </form>
+
+            <Script
+              src="https://images.hepsiburada.net/hepsipay/packages/pf/hepsipay-latest.min.js"
+              defer
+            />
+          </>
+        )
+      ) : (
+        <div className="py-12 px-4">{_translations.availableWarning}</div>
+      )}
+    </div>
+  );
+};