# Akifast

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

## <mark style="color:red;">**Installation Method**</mark>

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

```bash
npx @akinon/projectzero@latest --plugins
```

### <mark style="color:red;">**Setting the Visibility of Buttons**</mark>

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

{% hint style="warning" %}
All buttons are visible by default.
{% endhint %}

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

### <mark style="color:red;">**Checkout Button Props**</mark>

<table><thead><tr><th width="114.10546875">Prop</th><th width="103.0078125">Type</th><th width="130.28515625">Required</th><th>Description</th></tr></thead><tbody><tr><td>isPdp</td><td>boolean</td><td>Optional</td><td>Indicates if it's a product info page.</td></tr><tr><td>renderer</td><td>object</td><td>Optional</td><td>Custom rendering functions.</td></tr></tbody></table>

### <mark style="color:red;">**Quick Login Props**</mark>

<table><thead><tr><th width="161.703125">Prop</th><th width="99.50390625">Type</th><th width="168.29296875">Required</th><th>Description</th></tr></thead><tbody><tr><td>buttonText</td><td>string</td><td>Optional</td><td>Text displayed on the button.</td></tr><tr><td>isCaptchaVisible</td><td>boolean</td><td>Required</td><td>Indicates if captcha is visible.</td></tr><tr><td>captchaValidated</td><td>boolean</td><td>Required</td><td>Indicates if captcha is validated.</td></tr><tr><td>renderer</td><td>object</td><td>QuickLoginButton</td><td>Custom rendering functions.</td></tr></tbody></table>

### <mark style="color:red;">**Renderer Props Types**</mark>

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

```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;
 };
}
```

## <mark style="color:red;">**Usage Examples**</mark>

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.

### <mark style="color:red;">**Checkout Button**</mark>

**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';

<PluginModule
   component={Component.AkifastCheckoutButton}
   props={{
     ...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>
     )
   }
 }}
/>;

```

### <mark style="color:red;">**Quick Login Button**</mark>

```bash
/src/views/login/index.tsx
```

#### **Default Usage**

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

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

#### **Customized Usage with Renderer**

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