@akinon/next 1.13.1 → 1.14.1

package/.editorconfig

@@ -0,0 +1,7 @@
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @akinon/next
 
+## 1.14.1
+
+### Patch Changes
+
+- Change EOL
+
+## 1.14.0
+
+### Minor Changes
+
+- 35bce31: ZERO-2356: Add Price component
+- 35bce31: ZERO-2332: Add endpoints for credit payment
+- 35bce31: ZERO-2359: Add Input component
+- 35bce31: ZERO-2394: Add stock alert list and delete endpoints
+- 35bce31: ZERO-2393: Limit error log message length
+- 35bce31: ZERO-2352: Add Button component
+- 35bce31: ZERO-2325: Fix funds transfer payment error
+- 35bce31: ZERO-2354: Add Accordion component
+
 ## 1.13.1
 
 ### Patch Changes

package/assets/styles/index.scss

@@ -1,29 +1,29 @@
-.checkout-payment-iframe-wrapper {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	border: none;
-	z-index: 1000;
-	background-color: white;
-
-	iframe {
-		width: 100%;
-		height: 100%;
-		border: none;
-		background-color: white;
-	}
-
-	.close-button {
-		position: fixed;
-		top: 16px;
-		right: 16px;
-		width: 32px;
-		height: 32px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 1001;
-	}
+.checkout-payment-iframe-wrapper {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border: none;
+	z-index: 1000;
+	background-color: white;
+
+	iframe {
+		width: 100%;
+		height: 100%;
+		border: none;
+		background-color: white;
+	}
+
+	.close-button {
+		position: fixed;
+		top: 16px;
+		right: 16px;
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1001;
+	}
 }

package/components/accordion.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useState } from 'react';
+import { Icon } from './icon';
+import { twMerge } from 'tailwind-merge';
+import { AccordionProps } from '../types';
+
+export const Accordion = ({
+  isCollapse = false,
+  title,
+  subTitle,
+  icons = ['chevron-up', 'chevron-down'],
+  iconSize = 16,
+  iconColor = 'fill-[#000000]',
+  children,
+  className,
+  titleClassName,
+  dataTestId
+}: AccordionProps) => {
+  const [collapse, setCollapse] = useState(isCollapse);
+
+  return (
+    <div
+      className={twMerge(
+        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
+        className
+      )}
+    >
+      <div
+        className="flex items-center justify-between cursor-pointer"
+        onClick={() => setCollapse(!collapse)}
+        data-testid={dataTestId}
+      >
+        <div className="flex flex-col">
+          {title && (
+            <h3 className={twMerge('text-sm', titleClassName)}>{title}</h3>
+          )}
+          {subTitle && <h4 className="text-xs text-gray-700">{subTitle}</h4>}
+        </div>
+
+        {icons && (
+          <Icon
+            name={collapse ? icons[0] : icons[1]}
+            size={iconSize}
+            className={`fill-[${iconColor}]}`}
+          />
+        )}
+      </div>
+      {collapse && <div className="mt-3 text-sm">{children}</div>}
+    </div>
+  );
+};

package/components/button.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { ButtonProps } from '../types/index';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const Button = (props: ButtonProps) => {
+  return (
+    <button
+      {...props}
+      className={twMerge(
+        clsx(
+          [
+            'px-4',
+            'h-10',
+            'text-xs',
+            'bg-primary',
+            'text-primary-foreground',
+            'border',
+            'border-primary',
+            'transition-all',
+            'hover:bg-white',
+            'hover:border-primary',
+            'hover:text-primary'
+          ],
+          props.appearance === 'outlined' && [
+            'bg-transparent ',
+            'text-primary ',
+            'hover:bg-primary ',
+            'hover:text-primary-foreground'
+          ],
+          props.appearance === 'ghost' && [
+            'bg-transparent',
+            'border-transparent',
+            'text-primary',
+            'hover:bg-primary',
+            'hover:text-primary-foreground'
+          ]
+        ),
+        props.className
+      )}
+    >
+      {props.children}
+    </button>
+  );
+};

package/components/index.ts

@@ -1 +1,17 @@
-export * from './react-portal';
+export * from './accordion';
+export * from './button';
+export * from './client-root';
+export * from './icon';
+export * from './image';
+export * from './input';
+export * from './lazy-component';
+export * from './loader-spinner';
+export * from './mobile-app-toggler';
+export * from './oauth-login';
+export * from './plugin-module';
+export * from './price';
+export * from './pz-providers';
+export * from './radio';
+export * from './react-portal';
+export * from './selected-payment-option-view';
+export * from './trans';

package/components/input.tsx

@@ -0,0 +1,110 @@
+import clsx from 'clsx';
+import { forwardRef, FocusEvent, useState } from 'react';
+import { Controller } from 'react-hook-form';
+import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import { InputProps } from '../types';
+import { twMerge } from 'tailwind-merge';
+
+export const Input = forwardRef<
+  HTMLInputElement,
+  InputProps &
+    Pick<
+      NumberFormatProps,
+      'format' | 'mask' | 'allowEmptyFormatting' | 'onValueChange'
+    >
+>((props, ref) => {
+  const [focused, setFocused] = useState(false);
+  const [hasValue, setHasValue] = useState(false);
+  const {
+    id,
+    label,
+    labelStyle,
+    error,
+    mask,
+    format,
+    required = false,
+    ...rest
+  } = props;
+  const hasFloatingLabel = label && labelStyle === 'floating';
+  const inputClass = twMerge(
+    clsx(
+      'text-xs border px-2.5 h-10 placeholder:text-gray-600',
+      'focus-visible:outline-none', // disable outline on focus
+      { 'pt-3': hasFloatingLabel },
+      error
+        ? 'border-error focus:border-error'
+        : 'border-gray-500 hover:border-black focus:border-black'
+    ),
+    props.className
+  );
+  const inputProps: any = {
+    id,
+    ref,
+    className: inputClass,
+    onFocus: () => setFocused(true),
+    onBlur: (event: FocusEvent<HTMLInputElement>) => {
+      setFocused(false);
+      setHasValue(!!event.target.value);
+    }
+  };
+
+  const Label = () => {
+    if (!label) return null;
+
+    return (
+      <label
+        htmlFor={id}
+        className={clsx(
+          'text-xs text-gray-800',
+          {
+            'absolute left-2.5 pointer-events-none transition-all transform -translate-y-1/2':
+              hasFloatingLabel
+          },
+          { 'mb-2': !hasFloatingLabel },
+          { 'top-1/3': hasFloatingLabel && (focused || hasValue) },
+          { 'top-1/2': !(hasFloatingLabel && (focused || hasValue)) }
+        )}
+      >
+        {label} {required && <span className="text-secondary">*</span>}
+      </label>
+    );
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="relative flex flex-col">
+        {props.format ? (
+          <>
+            {labelStyle !== 'floating' && <Label />}
+            <Controller
+              name={props.name ?? ''}
+              control={props.control}
+              defaultValue={false}
+              render={({ field }) => (
+                <NumberFormat
+                  format={format}
+                  mask={mask ?? ''}
+                  {...rest}
+                  {...field}
+                  {...inputProps}
+                />
+              )}
+            />
+            {labelStyle === 'floating' && <Label />}
+          </>
+        ) : (
+          <>
+            {labelStyle !== 'floating' && <Label />}
+            <input {...rest} {...inputProps} />
+            {labelStyle === 'floating' && <Label />}
+          </>
+        )}
+      </div>
+      {error && (
+        <span className="mt-1 text-sm text-error">{error.message}</span>
+      )}
+    </div>
+  );
+});
+
+Input.displayName = 'Input';

package/components/plugin-module.tsx

@@ -11,7 +11,8 @@ enum Plugin {
   CheckoutGiftPack = 'pz-checkout-gift-pack',
   GPay = 'pz-gpay',
   Otp = 'pz-otp',
-  BKMExpress = 'pz-bkm'
+  BKMExpress = 'pz-bkm',
+  Masterpass = 'pz-masterpass'
 }
 
 export enum Component {
@@ -22,7 +23,8 @@ export enum Component {
   CheckoutGiftPack = 'CheckoutGiftPack',
   GPay = 'GPayOption',
   Otp = 'Otp',
-  BKMExpress = 'BKMOption'
+  BKMExpress = 'BKMOption',
+  MasterpassCardList = 'MasterpassCardList'
 }
 
 const PluginComponents = new Map([
@@ -33,7 +35,8 @@ const PluginComponents = new Map([
   [Plugin.CheckoutGiftPack, [Component.CheckoutGiftPack]],
   [Plugin.GPay, [Component.GPay]],
   [Plugin.Otp, [Component.Otp]],
-  [Plugin.BKMExpress, [Component.BKMExpress]]
+  [Plugin.BKMExpress, [Component.BKMExpress]],
+  [Plugin.Masterpass, [Component.MasterpassCardList]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -53,10 +56,6 @@ export default function PluginModule({
 }) {
   const plugin = getPlugin(component);
 
-  if (!(plugins as string[]).includes(plugin)) {
-    return null;
-  }
-
   const Component = useMemo(
     () =>
       dynamic(
@@ -91,8 +90,12 @@ export default function PluginModule({
         },
         { ssr: false }
       ),
-    [plugin]
+    [plugin, component]
   );
 
+  if (!(plugins as string[]).includes(plugin)) {
+    return null;
+  }
+
   return <Component {...props} />;
 }

package/components/price.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import { getCurrency } from '@akinon/next/utils';
+
+import { useLocalization } from '@akinon/next/hooks';
+import { PriceProps } from '../types';
+
+export const Price = (props: NumberFormatProps & PriceProps) => {
+  const {
+    value,
+    currencyCode,
+    displayType = 'text',
+    useCurrencySymbol = false,
+    useCurrencyAfterPrice = true,
+    useCurrencySpace = true,
+    useNegative = false,
+    useNegativeSpace = true,
+    thousandSeparator = '.',
+    decimalScale = 2,
+    decimalSeparator = ',',
+    fixedDecimalScale = true,
+    ...rest
+  } = props;
+  const { currency: selectedCurrencyCode } = useLocalization();
+  const currencyCode_ = currencyCode || selectedCurrencyCode;
+
+  // TODO: This is very bad practice. It broke decimalScale.
+  const _value = value?.toString().replace('.', ',');
+
+  const currency = useMemo(
+    () =>
+      getCurrency({
+        currencyCode: currencyCode_,
+        useCurrencySymbol,
+        useCurrencyAfterPrice,
+        useCurrencySpace
+      }),
+    [currencyCode_, useCurrencySymbol, useCurrencyAfterPrice, useCurrencySpace]
+  );
+
+  return (
+    <NumberFormat
+      value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
+      {...{
+        [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
+      }}
+      displayType={displayType}
+      thousandSeparator={thousandSeparator}
+      decimalScale={decimalScale}
+      decimalSeparator={decimalSeparator}
+      fixedDecimalScale={fixedDecimalScale}
+      {...rest}
+    />
+  );
+};

package/components/selected-payment-option-view.tsx

@@ -50,7 +50,14 @@ export default function SelectedPaymentOptionView() {
               );
             } else if (payment_option.payment_type === 'loyalty_money') {
               promise = import(`views/checkout/steps/payment/options/loyalty`);
+            } else if (payment_option.payment_type === 'masterpass') {
+              promise = import(
+                `views/checkout/steps/payment/options/credit-card`
+              );
             }
+            // else if (payment_option.payment_type === 'credit_payment') {
+            //   promise = import(`views/checkout/steps/payment/options/credit-payment`);
+            // }
             // else if (payment_option.payment_type === 'gpay') {
             //   promise = import(`views/checkout/steps/payment/options/gpay`);
             // }