@akinon/next 1.63.0 → 1.65.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @akinon/next
 
+## 1.65.0
+
+### Minor Changes
+
+- d13fd36: ZERO-2614: Refactor Price component to remove unnecessary code and improve readability also fix the decimal scale
+- 86d2531: ZERO-2693: resolve dependency collision warning for eslint-config-next
+
+## 1.64.0
+
+### Minor Changes
+
+- c53ea3e: ZERO-2609: Reset additional form fields when selectedFormType is not company
+- d3474c6: ZERO-2655: Add data source shipping option
+
 ## 1.63.0
 
 ### Minor Changes

package/components/price.tsx

@@ -1,13 +1,11 @@
 import { useMemo } from 'react';
-// @ts-ignore
-import { NumericFormat, NumericFormatProps } from 'react-number-format';
+import NumberFormat, { NumberFormatProps } from 'react-number-format';
 import { getCurrency } from '@akinon/next/utils';
-
 import { useLocalization } from '@akinon/next/hooks';
 import { PriceProps } from '../types';
 import Settings from 'settings';
 
-export const Price = (props: NumericFormatProps & PriceProps) => {
+export const Price = (props: NumberFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -23,16 +21,10 @@ export const Price = (props: NumericFormatProps & PriceProps) => {
     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 currentCurrencyDecimalScale = Settings.localization.currencies.find(
-    (currency) => currency.code === currencyCode_
-  ).decimalScale;
-
   const currency = useMemo(
     () =>
       getCurrency({
@@ -44,17 +36,39 @@ export const Price = (props: NumericFormatProps & PriceProps) => {
     [currencyCode_, useCurrencySymbol, useCurrencyAfterPrice, useCurrencySpace]
   );
 
+  const numericValue =
+    typeof value === 'string'
+      ? parseFloat(value)
+      : typeof value === 'number'
+      ? value
+      : 0;
+
+  const formattedValue = Number.isFinite(numericValue)
+    ? numericValue.toFixed(decimalScale)
+    : '0';
+
+  const displayValue =
+    useNegative && numericValue < 0
+      ? `-${useNegativeSpace ? ' ' : ''}${Math.abs(numericValue).toFixed(
+          decimalScale
+        )}`
+      : formattedValue;
+
+  const currentCurrencyDecimalScale = Settings.localization.currencies.find(
+    (currency) => currency.code === currencyCode_
+  ).decimalScale;
+
   return (
-    <NumericFormat
-      value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
-      {...{
-        [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
-      }}
+    <NumberFormat
+      value={displayValue}
       displayType={displayType}
       thousandSeparator={thousandSeparator}
       decimalScale={currentCurrencyDecimalScale ?? decimalScale}
       decimalSeparator={decimalSeparator}
       fixedDecimalScale={fixedDecimalScale}
+      prefix={!useCurrencyAfterPrice ? currency : undefined}
+      suffix={useCurrencyAfterPrice ? currency : undefined}
+      isNumericString={true}
       {...rest}
     />
   );

package/data/client/checkout.ts

@@ -380,6 +380,22 @@ export const checkoutApi = api.injectEndpoints({
         dispatch(setShippingStepBusy(false));
       }
     }),
+    setDataSourceShippingOptions: build.mutation<CheckoutResponse, number[]>({
+      query: (pks) => ({
+        url: buildClientRequestUrl(checkout.setDataSourceShippingOption, {
+          useFormData: true
+        }),
+        method: 'POST',
+        body: {
+          data_source_shipping_options: JSON.stringify(pks)
+        }
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setShippingStepBusy(true));
+        await queryFulfilled;
+        dispatch(setShippingStepBusy(false));
+      }
+    }),
     setRetailStore: build.mutation<CheckoutResponse, SetRetailStoreParams>({
       query: ({ retailStorePk, billingAddressPk }) => ({
         url: buildClientRequestUrl(
@@ -712,6 +728,7 @@ export const {
   useSetDeliveryOptionMutation,
   useSetAddressesMutation,
   useSetShippingOptionMutation,
+  useSetDataSourceShippingOptionsMutation,
   useSetPaymentOptionMutation,
   useSetBinNumberMutation,
   useSetInstallmentOptionMutation,

package/data/urls.ts

@@ -83,6 +83,8 @@ export const checkout = {
   setDeliveryOption: '/orders/checkout/?page=DeliveryOptionSelectionPage',
   setAddresses: '/orders/checkout/?page=AddressSelectionPage',
   setShippingOption: '/orders/checkout/?page=ShippingOptionSelectionPage',
+  setDataSourceShippingOption:
+    '/orders/checkout/?page=DataSourceShippingOptionSelectionPage',
   setPaymentOption: '/orders/checkout/?page=PaymentOptionSelectionPage',
   setBinNumber: '/orders/checkout/?page=BinNumberPage',
   setMasterpassBinNumber: '/orders/checkout/?page=MasterpassBinNumberPage',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.63.0",
+  "version": "1.65.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -30,12 +30,13 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.63.0",
+    "@akinon/eslint-plugin-projectzero": "1.65.0",
     "@types/react-redux": "7.1.30",
     "@types/set-cookie-parser": "2.4.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
-    "eslint": "^8.14.0",
+    "eslint": "8.56.0",
+    "eslint-config-next": "14.2.3",
     "eslint-config-prettier": "8.5.0"
   }
 }

package/redux/middlewares/checkout.ts

@@ -16,6 +16,7 @@ import {
   setPreOrder,
   setRetailStores,
   setShippingOptions,
+  setDataSourceShippingOptions,
   setShippingStepCompleted,
   setCreditPaymentOptions
 } from '../../redux/reducers/checkout';
@@ -73,6 +74,7 @@ export const preOrderMiddleware: Middleware = ({
       deliveryOptions,
       addressList: addresses,
       shippingOptions,
+      dataSourceShippingOptions,
       paymentOptions,
       installmentOptions
     } = getState().checkout;
@@ -126,6 +128,22 @@ export const preOrderMiddleware: Middleware = ({
       dispatch(apiEndpoints.setShippingOption.initiate(shippingOptions[0].pk));
     }
 
+    if (
+      dataSourceShippingOptions.length > 0 &&
+      !preOrder.data_source_shipping_options
+    ) {
+      const selectedDataSourceShippingOptionsPks =
+        dataSourceShippingOptions.map(
+          (opt) => opt.data_source_shipping_options[0].pk
+        );
+
+      dispatch(
+        apiEndpoints.setDataSourceShippingOptions.initiate(
+          selectedDataSourceShippingOptionsPks
+        )
+      );
+    }
+
     if (!preOrder.payment_option && paymentOptions.length > 0) {
       dispatch(apiEndpoints.setPaymentOption.initiate(paymentOptions[0].pk));
     }
@@ -164,7 +182,6 @@ export const contextListMiddleware: Middleware = ({
     if (result?.payload?.context_list) {
       result.payload.context_list.forEach((context) => {
         const redirectUrl = context.page_context.redirect_url;
-
         if (redirectUrl) {
           const currentLocale = getCookie('pz-locale');
 
@@ -221,6 +238,12 @@ export const contextListMiddleware: Middleware = ({
           dispatch(setShippingOptions(context.page_context.shipping_options));
         }
 
+        if (context.page_context.data_sources) {
+          dispatch(
+            setDataSourceShippingOptions(context.page_context.data_sources)
+          );
+        }
+
         if (context.page_context.payment_options) {
           dispatch(setPaymentOptions(context.page_context.payment_options));
         }

package/redux/reducers/checkout.ts

@@ -14,7 +14,8 @@ import {
   CheckoutCreditPaymentOption,
   PreOrder,
   RetailStore,
-  ShippingOption
+  ShippingOption,
+  DataSource
 } from '../../types';
 
 export interface CheckoutState {
@@ -36,6 +37,7 @@ export interface CheckoutState {
   addressList: Address[];
   deliveryOptions: DeliveryOption[];
   shippingOptions: ShippingOption[];
+  dataSourceShippingOptions: DataSource[];
   paymentOptions: PaymentOption[];
   creditPaymentOptions: CheckoutCreditPaymentOption[];
   selectedCreditPaymentPk: number;
@@ -67,6 +69,7 @@ const initialState: CheckoutState = {
   addressList: [],
   deliveryOptions: [],
   shippingOptions: [],
+  dataSourceShippingOptions: [],
   paymentOptions: [],
   creditPaymentOptions: [],
   selectedCreditPaymentPk: null,
@@ -121,6 +124,9 @@ const checkoutSlice = createSlice({
     setShippingOptions(state, { payload }) {
       state.shippingOptions = payload;
     },
+    setDataSourceShippingOptions(state, { payload }) {
+      state.dataSourceShippingOptions = payload;
+    },
     setPaymentOptions(state, { payload }) {
       state.paymentOptions = payload;
     },
@@ -168,6 +174,7 @@ export const {
   setAddressList,
   setDeliveryOptions,
   setShippingOptions,
+  setDataSourceShippingOptions,
   setPaymentOptions,
   setCreditPaymentOptions,
   setSelectedCreditPaymentPk,

package/types/commerce/address.ts

@@ -17,7 +17,7 @@ export type AddressFormType = {
   line: string;
   postcode: string;
   company_name?: string;
-  tax_no?: number;
+  tax_no?: string;
   tax_office?: string;
   e_bill_taxpayer?: boolean;
   country_code?: string;

package/types/commerce/checkout.ts

@@ -34,6 +34,23 @@ export interface ShippingOption {
   slug: string;
 }
 
+export interface DataSource {
+  pk: number;
+  name: string;
+  data_source_shipping_options: DataSourceShippingOption[];
+}
+
+export interface DataSourceShippingOption {
+  pk: number;
+  shipping_amount: string;
+  shipping_option_name: string;
+  shipping_option_logo: string | null;
+  data_source: {
+    pk: number;
+    title: string | null;
+  };
+}
+
 export interface CheckoutAddressType {
   label: string;
   text: string;
@@ -79,6 +96,7 @@ export interface PreOrder {
   retail_store?: RetailStore;
   gift_box?: GiftBox;
   credit_payment_option?: CheckoutCreditPaymentOption;
+  data_source_shipping_options: any;
   bags?: Product[];
   bags_fee?: string;
   extra_field?: ExtraField;