@akinon/pz-akifast 2.0.0-beta.10 → 2.0.0-beta.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-akifast
 
+## 2.0.0-beta.11
+
+### Minor Changes
+
+- ac783d6: ZERO-3482: Update tailwindcss to version 4.1.11 and enhance button cursor styles
+
 ## 2.0.0-beta.10
 
 ### Minor Changes

package/README.md

@@ -5,9 +5,7 @@
 You can use the following command to install the extension with the latest plugins:
 
 ```bash
-
 npx @akinon/projectzero@latest --plugins
-
 ```
 
 ### Setting the Visibility of Buttons
@@ -60,6 +58,75 @@ import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 />;
 ```
 
+## Customizing Components
+
+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.
+
+### Customizing Quick Login Button
+
+```javascript
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<PluginModule
+  component={Component.AkifastQuickLoginButton}
+  props={{
+    isCaptchaVisible,
+    captchaValidated,
+    buttonText: 'Quick Login',
+    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>
+      )
+    }
+  }}
+/>;
+```
+
+### Customizing Checkout Button
+
+```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);
+            }}
+          >
+            Buy Now
+          </button>
+        </div>
+      ),
+      renderEmptyState: () => (
+        <div className="checkout-unavailable">
+          Akifast payment option is not available at the moment.
+        </div>
+      )
+    }
+  }}
+/>;
+```
+
 ## Checkout Button Props
 
 You can see other props for the button in the `pz-one-click-checkout` package.
@@ -67,6 +134,7 @@ 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. |
+| renderer | `object`  | Custom rendering functions.            |
 
 ## Quick Login Props
 
@@ -75,3 +143,28 @@ You can see other props for the button in the `pz-one-click-checkout` package.
 | buttonText       | `string`  | Text displayed on the button.      |
 | isCaptchaVisible | `boolean` | Indicates if captcha is visible.   |
 | captchaValidated | `boolean` | Indicates if captcha is validated. |
+| renderer         | `object`  | 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;
+  };
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-akifast",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.11",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
   "license": "MIT",

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,46 @@
 import React from 'react';
 import { Button } from '@akinon/next/components';
-import { PluginModuleComponentProps } from '@akinon/next/types';
-
-interface QuickLoginButtonProps extends PluginModuleComponentProps {
-  isCaptchaVisible: boolean;
-  captchaValidated: boolean;
-  buttonText?: string;
-}
+import { QuickLoginButtonProps } from '../types';
 
 export const QuickLoginButton = ({
   buttonText = 'Quick Login',
   isCaptchaVisible,
   captchaValidated,
   settings,
+  renderer,
   ...rest
 }: QuickLoginButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   if (settings?.quickLogin === false) {
-    return;
+    return null;
   }
 
-  return (
+  const handleClick = () => {
+    location.href = `/akifast/login/`;
+  };
+
+  const isDisabled = isCaptchaVisible && !captchaValidated;
+
+  const DefaultButton = ({ buttonText, disabled, onClick, rest }) => (
     <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/`;
-      }}
+      disabled={disabled}
+      onClick={onClick}
       {...rest}
     >
       {buttonText}
     </Button>
   );
+
+  const RenderButton = renderer?.renderButton || DefaultButton;
+
+  return (
+    <RenderButton
+      buttonText={buttonText}
+      disabled={isDisabled}
+      onClick={handleClick}
+      rest={rest}
+    />
+  );
 };