@akinon/pz-akifast 2.0.0-beta.2 → 2.0.0-beta.21

package/CHANGELOG.md

@@ -1,18 +1,130 @@
 # @akinon/pz-akifast
 
-## 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
 
 ### Minor Changes
 
-- ZERO-3091: Upgrade Next.js to v15 and React to v19
+- 9cfbf6cd: ZERO-3397 :Update README.md to enhance button visibility management and add detailed usage examples for Checkout and Quick Login buttons
+
+## 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
+
+- 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
+
+## 1.90.0
+
+### Minor Changes
+
+- 2657d0c: ZERO-3376: Add customization options for QuickLoginButton and CheckoutButton components
+
+## 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
+
+## 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/README.md

@@ -1,21 +1,26 @@
 # @akinon/pz-akifast
 
-### Install the npm package
+## Installation
 
-```bash
-# For latest version
-yarn add @akinon/pz-akifast
+You can use the following command to install the extension with the latest plugins:
 
-# Preferred installation method
+```bash
 npx @akinon/projectzero@latest --plugins
 ```
 
+## Akifast
+
 ### Setting the Visibility of Buttons
-(all buttons are visible by default)
 
-```javascript
-// settings.js file
+All buttons are visible by default.
+
+Manage the visibility of buttons:
+
+```bash
+src/settings.js
+```
 
+```javascript
 module.exports = {
   // other settings
   plugins: {
@@ -23,16 +28,74 @@ module.exports = {
     'pz-akifast': {
       quickLogin: false,
       pdp: false,
-      basket: false,
-    },
-  },
+      basket: false
+    }
+  }
 };
 ```
 
-### Usage in Plugin Module System
+## Checkout Button Props
+
+You can see other props for the button in the `pz-one-click-checkout` package.
+
+| Property | Type      | Required | Description                            |
+| -------- | --------- | -------- | -------------------------------------- |
+| isPdp    | `boolean` | Optional | Indicates if it's a product info page. |
+| renderer | `object`  | Optional | Custom rendering functions.            |
+
+## Quick Login Props
+
+| Property         | Type      | Required | Description                        |
+| ---------------- | --------- | -------- | ---------------------------------- |
+| buttonText       | `string`  | Optional | Text displayed on the button.      |
+| isCaptchaVisible | `boolean` | Required | Indicates if captcha is visible.   |
+| captchaValidated | `boolean` | Required | Indicates if captcha is validated. |
+| renderer         | `object`  | Optional | Custom rendering functions.        |
+
+## Renderer Props Types
+
+The full type definitions for the renderer props:
+
+```typescript
+interface AkifastRendererProps {
+  quickLoginButton?: {
+    renderButton?: (props: {
+      buttonText: string;
+      disabled: boolean;
+      onClick: () => void;
+      rest: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    }) => React.ReactNode;
+  };
+  checkoutButton?: {
+    renderButton?: (props: {
+      provider: ProvidersType;
+      rest: OneClickCheckoutButtonProps;
+    }) => React.ReactNode;
+    renderEmptyState?: () => React.ReactNode;
+  };
+}
+```
+
+### Usage Examples
+
+Both the `CheckoutButton` and `QuickLoginButton` can be customized using the `renderer` prop. This allows you to fully customize the appearance and behavior of these components while maintaining their core functionality.
 
 ## Checkout Button
 
+Summary:
+
+```bash
+/src/views/basket/summary.tsx
+```
+
+Product Info:
+
+```bash
+/src/views/product/product-info.tsx
+```
+
+### Default Usage
+
 ```javascript
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
@@ -42,11 +105,52 @@ import PluginModule, { Component } from '@akinon/next/components/plugin-module';
     ...checkoutProviderProps, // same with one click checkout props
     isPdp: true
   }}
-/>
+/>;
+```
+
+### Customized Usage with Renderer
+
+```javascript
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<PluginModule
+  component={Component.AkifastCheckoutButton}
+  props={{
+    isPdp: true,
+    renderer: {
+      renderButton: ({ provider, rest }) => (
+        <div className="custom-checkout-wrapper">
+          <button
+            className="custom-checkout-button"
+            onClick={() => {
+              // Your custom logic
+              console.log('Provider:', provider);
+              // You can still pass through all original props
+              console.log('Original props:', rest);
+            }}
+          >
+            Hemen Satın Al
+          </button>
+        </div>
+      ),
+      renderEmptyState: () => (
+        <div className="checkout-unavailable">
+          Akifast ile ödeme şu an mevcut değil
+        </div>
+      )
+    }
+  }}
+/>;
 ```
 
 ## Quick Login Button
 
+```bash
+/src/views/login/index.tsx
+```
+
+### Default Usage
+
 ```javascript
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
@@ -56,21 +160,35 @@ import PluginModule, { Component } from '@akinon/next/components/plugin-module';
     isCaptchaVisible,
     captchaValidated
   }}
-/>
+/>;
 ```
 
-## Checkout Button Props
-
-You can see other props for the button in the `pz-one-click-checkout` package.
-
-| Property | Type      | Description                            |
-|----------|-----------|----------------------------------------|
-| isPdp    | `boolean` | Indicates if it's a product info page. |
+### Customized Usage with Renderer
 
-## Quick Login Props
+```javascript
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
-| Property         | Type      | Description                        |
-|------------------|-----------|------------------------------------|
-| buttonText       | `string`  | Text displayed on the button.      |
-| isCaptchaVisible | `boolean` | Indicates if captcha is visible.   |
-| captchaValidated | `boolean` | Indicates if captcha is validated. |
+<PluginModule
+  component={Component.AkifastQuickLoginButton}
+  props={{
+    isCaptchaVisible,
+    captchaValidated,
+    buttonText: 'Hızlı Giriş',
+    renderer: {
+      renderButton: ({ buttonText, disabled, onClick, rest }) => (
+        <button
+          className="custom-login-button"
+          disabled={disabled}
+          onClick={onClick}
+          {...rest}
+        >
+          <svg className="icon-login" viewBox="0 0 24 24">
+            {/* Your custom SVG icon */}
+          </svg>
+          {buttonText}
+        </button>
+      )
+    }
+  }}
+/>;
+```

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@akinon/pz-akifast",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.21",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
   "license": "MIT",
   "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",
     "@reduxjs/toolkit": "^1.8.3",
     "pz-one-click-checkout": "^1.40.0"
   },
   "devDependencies": {
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.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",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "typescript": "^5.2.2",
     "@reduxjs/toolkit": "^1.8.3"
   }
 }

package/src/index.ts

@@ -1,2 +1,3 @@
 export { QuickLoginButton } from './views/QuickLoginButton';
 export { CheckoutButton } from './views/CheckoutButton';
+export type { QuickLoginButtonProps, AkifastRendererProps } from './types';

package/src/types.ts

@@ -0,0 +1,38 @@
+import { PluginModuleComponentProps } from '@akinon/next/types';
+import {
+  ProvidersType,
+  OneClickCheckoutButtonProps
+} from '@akinon/pz-one-click-checkout/src/types';
+import React from 'react';
+
+export interface AkifastRendererProps {
+  quickLoginButton?: {
+    renderButton?: (props: {
+      buttonText: string;
+      disabled: boolean;
+      onClick: () => void;
+      rest: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    }) => React.ReactNode;
+  };
+  checkoutButton?: {
+    renderButton?: (props: {
+      provider: ProvidersType;
+      rest: OneClickCheckoutButtonProps;
+    }) => React.ReactNode;
+    renderEmptyState?: () => React.ReactNode;
+  };
+}
+
+export interface QuickLoginButtonProps extends PluginModuleComponentProps {
+  isCaptchaVisible: boolean;
+  captchaValidated: boolean;
+  buttonText?: string;
+  renderer?: AkifastRendererProps['quickLoginButton'];
+}
+
+export interface CheckoutButtonProps
+  extends PluginModuleComponentProps,
+    OneClickCheckoutButtonProps {
+  isPdp?: boolean;
+  renderer?: AkifastRendererProps['checkoutButton'];
+}

package/src/views/CheckoutButton.tsx

@@ -1,21 +1,13 @@
 import React from 'react';
-import { PluginModuleComponentProps } from '@akinon/next/types';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { useGetCheckoutProvidersQuery } from '@akinon/pz-one-click-checkout/src/endpoints';
-import {
-  OneClickCheckoutButtonProps,
-  ProvidersType
-} from '@akinon/pz-one-click-checkout/src/types';
-
-interface CheckoutButtonProps
-  extends PluginModuleComponentProps,
-    OneClickCheckoutButtonProps {
-  isPdp?: boolean;
-}
+import { ProvidersType } from '@akinon/pz-one-click-checkout/src/types';
+import { CheckoutButtonProps } from '../types';
 
 export const CheckoutButton = ({
   settings,
   isPdp = false,
+  renderer,
   ...rest
 }: CheckoutButtonProps) => {
   const { data: checkoutProviders } = useGetCheckoutProvidersQuery(null, {});
@@ -28,7 +20,14 @@ export const CheckoutButton = ({
     (isPdp && settings?.pdp === false) ||
     (!isPdp && settings?.basket === false)
   ) {
-    return;
+    return renderer?.renderEmptyState ? renderer.renderEmptyState() : null;
+  }
+
+  if (renderer?.renderButton) {
+    return renderer.renderButton({
+      provider,
+      rest: { ...rest }
+    });
   }
 
   return (

package/src/views/QuickLoginButton.tsx

@@ -1,36 +1,56 @@
 import React from 'react';
 import { Button } from '@akinon/next/components';
-import { PluginModuleComponentProps } from '@akinon/next/types';
+import { QuickLoginButtonProps } from '../types';
 
-interface QuickLoginButtonProps extends PluginModuleComponentProps {
-  isCaptchaVisible: boolean;
-  captchaValidated: boolean;
-  buttonText?: string;
-}
+const DefaultButton = ({
+  buttonText,
+  disabled,
+  onClick,
+  rest
+}: {
+  buttonText: string;
+  disabled: boolean;
+  onClick: () => void;
+  rest: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}) => (
+  <Button
+    className="text-base text-black-750 h-auto py-4 border border-gray-650 leading-[0.94]"
+    type="submit"
+    appearance="outlined"
+    disabled={disabled}
+    onClick={onClick}
+    {...rest}
+  >
+    {buttonText}
+  </Button>
+);
 
 export const QuickLoginButton = ({
   buttonText = 'Quick Login',
   isCaptchaVisible,
   captchaValidated,
   settings,
+  renderer,
   ...rest
 }: QuickLoginButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   if (settings?.quickLogin === false) {
-    return;
+    return null;
   }
 
+  const handleClick = () => {
+    location.href = `/akifast/login/`;
+  };
+
+  const isDisabled = isCaptchaVisible && !captchaValidated;
+
+  const RenderButton = renderer?.renderButton || DefaultButton;
+
   return (
-    <Button
-      className="w-full h-14 uppercase text-xs font-semibold flex items-center justify-center gap-2 hover:bg-transparent hover:border hover:border-primary-800 hover:text-primary"
-      type="submit"
-      appearance="outlined"
-      disabled={isCaptchaVisible && !captchaValidated}
-      onClick={() => {
-        location.href = `/akifast/login/`;
-      }}
-      {...rest}
-    >
-      {buttonText}
-    </Button>
+    <RenderButton
+      buttonText={buttonText}
+      disabled={isDisabled}
+      onClick={handleClick}
+      rest={rest}
+    />
   );
 };