Akifast

pz-akifast is a Project Zero plugin that provides a fast checkout experience with customizable buttons for both checkout and quick login scenarios.

Installation Method

You can use the following command to install the extension with the latest plugins:

npx @akinon/projectzero@latest --plugins

Setting the Visibility of Buttons

To customize button visibility, update your src/settings.js:

All buttons are visible by default.

module.exports = {
 // other settings
 plugins: {
   // other plugin settings
   'pz-akifast': {
     quickLogin: false,
     pdp: false,
     basket: false
   }
 }
};

Checkout Button Props

Prop	Type	Required	Description
isPdp	boolean	Optional	Indicates if it's a product info page.
renderer	object	Optional	Custom rendering functions.

Quick Login Props

Prop	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	QuickLoginButton	Custom rendering functions.

Renderer Props Types

The renderer object allows you to fully customize the UI of both the checkout and quick login buttons:

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:

/src/views/basket/summary.tsx

Product Info:

/src/views/product/product-info.tsx

Default Usage

import PluginModule, { Component } from '@akinon/next/components/plugin-module';

<PluginModule
   component={Component.AkifastCheckoutButton}
   props={{
     ...checkoutProviderProps, // same with one click checkout props
     isPdp: true
   }}
/>;

Customized Usage with Renderer

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

/src/views/login/index.tsx

Default Usage

import PluginModule, { Component } from '@akinon/next/components/plugin-module';

<PluginModule
   component={Component.AkifastQuickLoginButton}
   props={{
     isCaptchaVisible,
     captchaValidated
   }}
/>;

Customized Usage with Renderer

import PluginModule, { Component } from '@akinon/next/components/plugin-module';

<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>
     )
   }
 }}
/>;