@akinon/projectzero 1.45.0-rc.0 → 1.45.0

package/app-template/docs/basic-setup.md

@@ -24,7 +24,7 @@ The setup process for a Headless Akinon Commerce Cloud Storefront will be guided
 2. Next, the storefront needs to be installed by using the `projectzero` CLI.
 
    ```bash
-   npx @akinon/projectzero@latest --create
+   npx @akinon/projectzero --create
    ```
 
 3. Provide the following information:

package/app-template/docs/plugins.md

@@ -7,9 +7,9 @@ custom_edit_url: null
 
 To access and manage plugins for your Project Zero CLI, run the following command:
 
-```bash
-npx @akinon/projectzero@latest --plugins
-```
+```css
+npx projectzero --plugins
+``` 
 
 The plugins selected from this list will be added to the project and ready for use. The plugins can be removed from the project by unchecking it from the same list.
 
@@ -27,9 +27,9 @@ The plugins selected from this list will be added to the project and ready for u
 
 1. To install plugins, run the following command in the console:
 
-   ```bash
-   npx @akinon/projectzero@latest --plugins
-   ```
+    ```css
+    npx projectzero --plugins
+    ```
 
 2. Select the plugins desire to install from the list provided.
 
@@ -73,4 +73,4 @@ Used to enable any payment option with a redirection type on the payment page.
 
 This plugin enables the "Click & Collect" in-store pickup option.
 
-[Click here for details](https://bitbucket.org/akinonteam/pz-click-collect/src/main/)
+[Click here for details](https://bitbucket.org/akinonteam/pz-click-collect/src/main/)

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.45.0-rc.0",
+  "version": "1.45.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,26 +22,27 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.45.0-rc.0",
-    "@akinon/pz-akifast": "1.45.0-rc.0",
-    "@akinon/pz-b2b": "1.45.0-rc.0",
-    "@akinon/pz-basket-gift-pack": "1.45.0-rc.0",
-    "@akinon/pz-bkm": "1.45.0-rc.0",
-    "@akinon/pz-checkout-gift-pack": "1.45.0-rc.0",
-    "@akinon/pz-click-collect": "1.45.0-rc.0",
-    "@akinon/pz-credit-payment": "1.45.0-rc.0",
-    "@akinon/pz-gpay": "1.45.0-rc.0",
-    "@akinon/pz-masterpass": "1.45.0-rc.0",
-    "@akinon/pz-one-click-checkout": "1.45.0-rc.0",
-    "@akinon/pz-otp": "1.45.0-rc.0",
-    "@akinon/pz-pay-on-delivery": "1.45.0-rc.0",
+    "@akinon/next": "1.45.0",
+    "@akinon/pz-akifast": "1.45.0",
+    "@akinon/pz-b2b": "1.45.0",
+    "@akinon/pz-basket-gift-pack": "1.45.0",
+    "@akinon/pz-bkm": "1.45.0",
+    "@akinon/pz-checkout-gift-pack": "1.45.0",
+    "@akinon/pz-click-collect": "1.45.0",
+    "@akinon/pz-credit-payment": "1.45.0",
+    "@akinon/pz-gpay": "1.45.0",
+    "@akinon/pz-masterpass": "1.45.0",
+    "@akinon/pz-one-click-checkout": "1.45.0",
+    "@akinon/pz-otp": "1.45.0",
+    "@akinon/pz-pay-on-delivery": "1.45.0",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
-    "@sentry/nextjs": "7.116.0",
+    "@sentry/nextjs": "7.105.0",
     "dayjs": "1.11.5",
+    "eslint-config-next": "14.2.2",
     "lossless-json": "2.0.5",
-    "next": "14.2.5",
+    "next": "14.2.2",
     "next-auth": "4.24.5",
     "next-pwa": "5.6.0",
     "pino": "8.11.0",
@@ -58,7 +59,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.45.0-rc.0",
+    "@akinon/eslint-plugin-projectzero": "1.45.0",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -78,14 +79,14 @@
     "clsx": "1.1.1",
     "currency-symbol-map": "5.1.0",
     "eslint": "8.14.0",
-    "eslint-config-next": "14.2.3",
+    "eslint-config-next": "14.0.3",
     "eslint-config-prettier": "8.5.0",
     "husky": "8.0.0",
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.3.0",
     "lint-staged": "13.1.0",
     "prettier": "2.6.2",
-    "react-number-format": "5.3.4",
+    "react-number-format": "4.9.3",
     "sass": "1.49.9",
     "semantic-release": "19.0.5",
     "server-only": "0.0.1",
@@ -94,13 +95,10 @@
     "stylelint-config-standard": "25.0.0",
     "stylelint-scss": "4.2.0",
     "stylelint-selector-bem-pattern": "2.1.1",
-    "tailwindcss": "3.4.5",
+    "tailwindcss": "3.4.0",
     "ts-jest": "29.1.1",
     "ts-node": "10.7.0",
     "typescript": "5.2.2"
   },
-  "resolutions": {
-    "**/postcss": "8.4.31"
-  },
   "packageManager": "yarn@1.22.17"
 }

package/app-template/public/locales/en/account.json

@@ -286,11 +286,11 @@
       "empty_coupon": "You don't have any coupons"
     },
     "title": {
-      "campaigns": {
+      "campaings": {
         "active": "Active Campaigns",
-        "to_be_active": "Campaigns to be Active",
-        "expired": "Expired Campaigns",
-        "used": "Used Campaigns"
+        "to_be_active": "Campaings to be Active",
+        "expired": "Expired Campaings",
+        "used": "Used Campaings"
       },
       "coupons": {
         "active": "Active Coupons",

package/app-template/public/locales/tr/account.json

@@ -286,7 +286,7 @@
       "empty_coupon": "Herhangi bir kuponunuz yok"
     },
     "title": {
-      "campaigns": {
+      "campaings": {
         "active": "Aktif Kampanyalar",
         "to_be_active": "Aktif Olacak Kampanyalar",
         "expired": "Süresi Dolmuş Kampanyalar",

package/app-template/src/app/[commerce]/[locale]/[currency]/account/address/page.tsx

@@ -17,7 +17,7 @@ export default function Page() {
   const [addAddress] = useAddAddressMutation();
 
   const onSubmit = async (data) => {
-    await addAddress({ ...data, invalidateTag: 'Addresses' });
+    await addAddress(data);
     setIsNewAddressModalOpen(false);
   };
 

package/app-template/src/app/[commerce]/[locale]/[currency]/account/coupons/page.tsx

@@ -51,7 +51,7 @@ export default function Page() {
           {basketOffersLoading && <LoaderSpinner className="mb-8" />}
           {basketOffersSuccess && (
             <CouponItem
-              mainTitle={t('account.my_vouchers.title.campaigns.active')}
+              mainTitle={t('account.my_vouchers.title.campaings.active')}
               subTitles={[
                 t('account.my_vouchers.card.campaign_name'),
                 t('account.my_vouchers.card.starting_date'),
@@ -68,7 +68,7 @@ export default function Page() {
           {futureBasketOffersLoading && <LoaderSpinner className="mb-8" />}
           {futureBasketOffersSuccess && (
             <CouponItem
-              mainTitle={t('account.my_vouchers.title.campaigns.to_be_active')}
+              mainTitle={t('account.my_vouchers.title.campaings.to_be_active')}
               subTitles={[
                 t('account.my_vouchers.card.campaign_name'),
                 t('account.my_vouchers.card.starting_date'),
@@ -85,7 +85,7 @@ export default function Page() {
           {expiredBasketOffersLoading && <LoaderSpinner className="mb-8" />}
           {expiredBasketOffersSuccess && (
             <CouponItem
-              mainTitle={t('account.my_vouchers.title.campaigns.expired')}
+              mainTitle={t('account.my_vouchers.title.campaings.expired')}
               subTitles={[
                 t('account.my_vouchers.card.campaign_name'),
                 t('account.my_vouchers.card.starting_date'),
@@ -102,7 +102,7 @@ export default function Page() {
           {discountItemsLoading && <LoaderSpinner className="mb-8" />}
           {discountItemsSuccess && (
             <CouponItem
-              mainTitle={t('account.my_vouchers.title.campaigns.used')}
+              mainTitle={t('account.my_vouchers.title.campaings.used')}
               subTitles={[
                 t('account.my_vouchers.card.campaign_name'),
                 t('account.my_vouchers.card.starting_date'),

package/app-template/src/app/[commerce]/[locale]/[currency]/account/profile/page.tsx

@@ -247,7 +247,6 @@ export default function Page() {
             className="mb-5"
             required
           />
-
           <div className="mb-5">
             <Input
               label={t('account.my_profile.form.phone.placeholder')}

package/app-template/src/app/[commerce]/[locale]/[currency]/category/[pk]/page.tsx

@@ -4,14 +4,11 @@ import { PageProps } from '@akinon/next/types';
 import CategoryLayout from '@theme/views/category/layout';
 
 async function Page({ params, searchParams }: PageProps<{ pk: number }>) {
-  const { data, breadcrumbData } = await getCategoryData({
-    pk: params.pk,
-    searchParams
-  });
+  const { data } = await getCategoryData({ pk: params.pk, searchParams });
 
   return (
     <>
-      <CategoryLayout data={data} breadcrumbData={breadcrumbData} />
+      <CategoryLayout data={data} />
     </>
   );
 }

package/app-template/src/app/[commerce]/[locale]/[currency]/orders/completed/[token]/page.tsx

@@ -182,25 +182,21 @@ const CheckoutCompleted = ({
                     }}
                   >
                     {data.order.orderitem_set.map((item) => (
-                      <div
-                        key={`order-item-${item.id}`}
-                        className="flex justify-between gap-x-4 w-full"
-                      >
-                        <Link
-                          className="flex justify-between gap-x-4 flex-1 items-center transition-all text-xs text-black-800 hover:text-secondary"
-                          href={item.product.absolute_url}
-                          passHref
-                        >
+                      <div key={`order-item-${item.id}`} className="flex">
+                        <Link href={item.product.absolute_url} passHref>
                           <Image
                             src={item.product.image}
                             alt={item.product.name}
                             width={64}
                             height={96}
                           />
-
-                          <span>{item.product.name}</span>
                         </Link>
-                        <div className="flex justify-end items-center">
+                        <div className="flex justify-between flex-1 items-center ml-4">
+                          <>
+                            <div className="text-xs text-black-800 transition-all w-full hover:text-secondary">
+                              {item.product.name}
+                            </div>
+                          </>
                           <div>
                             {item.retail_price !== item.price && (
                               <div className="text-black-800 line-through text-xs min-w-max sm:text-sm">

package/app-template/src/components/checkbox.tsx

@@ -3,7 +3,7 @@ import { CheckboxProps } from '@theme/components/types';
 import { twMerge } from 'tailwind-merge';
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { children, checked = false, error, ...rest } = props;
+  const { children, checked, error, ...rest } = props;
 
   return (
     <label className={twMerge('flex flex-col text-xs', props.className)}>
@@ -12,7 +12,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           type="checkbox"
           {...rest}
           ref={ref}
-          defaultChecked={checked}
+          checked={checked ?? false}
           className="w-4 h-4 shrink-0"
         />
         {children && <span className="ml-2">{children}</span>}

package/app-template/src/components/input.tsx

@@ -1,28 +1,17 @@
 import clsx from 'clsx';
-import { forwardRef, FocusEvent, useState, Ref } from 'react';
+import { forwardRef, FocusEvent, useState } from 'react';
 import { Controller } from 'react-hook-form';
-import { PatternFormat, PatternFormatProps } from 'react-number-format';
+import NumberFormat, { NumberFormatProps } from 'react-number-format';
 import { InputProps } from '@theme/components/types';
 import { twMerge } from 'tailwind-merge';
 
-const PatternFormatWithRef = forwardRef(
-  (props: PatternFormatProps, ref: Ref<HTMLInputElement>) => {
-    return <PatternFormat {...props} getInputRef={ref} />;
-  }
-);
-PatternFormatWithRef.displayName = 'PatternFormatWithRef';
-
 export const Input = forwardRef<
   HTMLInputElement,
   InputProps &
     Pick<
-      PatternFormatProps,
-      'mask' | 'allowEmptyFormatting' | 'onValueChange'
-    > & {
-      format?: string;
-      defaultValue?: string;
-      type?: string;
-    }
+      NumberFormatProps,
+      'format' | 'mask' | 'allowEmptyFormatting' | 'onValueChange'
+    >
 >((props, ref) => {
   const [focused, setFocused] = useState(false);
   const [hasValue, setHasValue] = useState(false);
@@ -48,7 +37,6 @@ export const Input = forwardRef<
     ),
     props.className
   );
-
   const inputProps: any = {
     id,
     ref,
@@ -91,14 +79,14 @@ export const Input = forwardRef<
             <Controller
               name={props.name ?? ''}
               control={props.control}
+              defaultValue={false}
               render={({ field }) => (
-                <PatternFormatWithRef
+                <NumberFormat
                   format={format}
                   mask={mask ?? ''}
                   {...rest}
                   {...field}
                   {...inputProps}
-                  type={props.type as 'text' | 'password' | 'tel'}
                 />
               )}
             />

package/app-template/src/components/price.tsx

@@ -1,11 +1,10 @@
 import { useMemo } from 'react';
-import { NumericFormat, NumericFormatProps } from 'react-number-format';
+import NumberFormat, { NumberFormatProps } from 'react-number-format';
 import { getCurrency } from '@akinon/next/utils';
 import { PriceProps } from '@theme/types';
 import { useLocalization } from '@akinon/next/hooks';
-import Settings from '@theme/settings';
 
-export const Price = (props: NumericFormatProps & PriceProps) => {
+export const Price = (props: NumberFormatProps & PriceProps) => {
   const {
     value,
     currencyCode,
@@ -38,19 +37,15 @@ export const Price = (props: NumericFormatProps & PriceProps) => {
     [currencyCode_, useCurrencySymbol, useCurrencyAfterPrice, useCurrencySpace]
   );
 
-  const currentCurrencyDecimalScale = Settings.localization.currencies.find(
-    (currency) => currency.code === currencyCode_
-  ).decimalScale;
-
   return (
-    <NumericFormat
+    <NumberFormat
       value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
       {...{
         [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
       }}
       displayType={displayType}
       thousandSeparator={thousandSeparator}
-      decimalScale={currentCurrencyDecimalScale ?? decimalScale}
+      decimalScale={decimalScale}
       decimalSeparator={decimalSeparator}
       fixedDecimalScale={fixedDecimalScale}
       {...rest}

package/app-template/src/redux/reducers/category.ts

@@ -7,13 +7,11 @@ import { WIDGET_TYPE } from '@theme/types';
 export interface CategoryState {
   facets: Facet[];
   selectedFacets: Facet[];
-  isMenuOpen: boolean;
 }
 
 const initialState: CategoryState = {
   facets: [],
-  selectedFacets: [],
-  isMenuOpen: false
+  selectedFacets: []
 };
 
 const categorySlice = createSlice({
@@ -26,9 +24,6 @@ const categorySlice = createSlice({
     setSelectedFacets(state, action) {
       state.selectedFacets = action.payload;
     },
-    setMenuOpen(state, action) {
-      state.isMenuOpen = action.payload;
-    },
     toggleFacet(state, action) {
       const facets = JSON.parse(JSON.stringify(state.facets));
 
@@ -86,7 +81,6 @@ const categorySlice = createSlice({
 export const {
   setFacets,
   setSelectedFacets,
-  setMenuOpen,
   toggleFacet,
   removeCategoryFacet,
   resetSelectedFacets

package/app-template/src/settings.js

@@ -1,10 +1,6 @@
 const { LocaleUrlStrategy } = require('@akinon/next/localization');
 const { ROUTES } = require('@theme/routes');
 
-/* IMPORTANT *
- * In order to use one locale in the locales array and hide the default locale in the URL, you need to set the localeUrlStrategy to LocaleUrlStrategy.ShowAllLocales.
- */
-
 const commerceUrl = encodeURI(process.env.SERVICE_BACKEND_URL ?? 'default');
 
 /** @type {import('@akinon/next/types').Settings} */
@@ -15,7 +11,6 @@ module.exports = {
     { translationKey: 'size', key: 'size' }
   ],
   localization: {
-    // If there is one locale in the locales array, the default locale will be hidden in the URL.
     locales: [
       {
         label: 'EN',
@@ -43,7 +38,7 @@ module.exports = {
       }
     ],
     defaultLocaleValue: 'en',
-    localeUrlStrategy: LocaleUrlStrategy.HideDefaultLocale, // If there is one locale in the locales array, the default locale will be hidden in the URL and localeUrlStrategy should be set to LocaleUrlStrategy.ShowAllLocales.
+    localeUrlStrategy: LocaleUrlStrategy.HideDefaultLocale,
     redirectToDefaultLocale: true,
     defaultCurrencyCode: 'usd'
   },

package/app-template/src/views/account/address-card.tsx

@@ -27,13 +27,13 @@ export const AddressCard = (props: Props) => {
   const [isRemoveAddressModalOpen, setRemoveAddressModalOpen] = useState(false);
 
   const onSubmit = async (data) => {
-    await editAddress({ ...data, invalidateTag: 'Addresses' });
+    await editAddress(data);
     setIsEditAddressModalOpen(false);
   };
 
   const handleRemoveAddress = async (pk: number) => {
     try {
-      await removeAddress({ id: pk, invalidateTag: 'Addresses' })
+      await removeAddress(pk)
         .unwrap()
         .then(() => setRemoveAddressModalOpen(false))
         .catch((err) => console.error(err));

package/app-template/src/views/account/address-form.tsx

@@ -31,7 +31,7 @@ interface Props {
   onSubmit: (data: any) => void;
 }
 
-const makeAddressFormSchema = (t, { phoneNumberLength, postCodeLength }) =>
+const makeAddressFormSchema = (t, { phoneNumberLength }) =>
   yup.object().shape({
     title: yup.string().required(t('account.address_book.form.error.required')),
     first_name: yup
@@ -65,9 +65,8 @@ const makeAddressFormSchema = (t, { phoneNumberLength, postCodeLength }) =>
       .max(255, t('account.address_book.form.error.line_max')),
     postcode: yup
       .string()
-      .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
-      .min(postCodeLength, t('account.address_book.form.error.postcode_min'))
-      .max(postCodeLength, t('account.address_book.form.error.postcode_max'))
+      .min(5, t('account.address_book.form.error.postcode_min'))
+      .max(5, t('account.address_book.form.error.postcode_max'))
       .required(t('account.address_book.form.error.required')),
     company_name: yup.string().nullable(),
     tax_no: yup.string().nullable(),
@@ -81,8 +80,7 @@ export const AddressForm = (props: Props) => {
   const { data, onSubmit } = props;
   const config = useAppSelector((state) => state.config);
   const addressFormSchema = makeAddressFormSchema(t, {
-    phoneNumberLength: config.user_phone_format.length,
-    postCodeLength: config.user_post_code_format.length
+    phoneNumberLength: config.user_phone_format.length
   });
   const {
     register,
@@ -183,22 +181,12 @@ export const AddressForm = (props: Props) => {
     if (data && country) {
       reset({
         ...data,
-        is_corporate: String(data.is_corporate)
+        is_corporate:
+          String(data.is_corporate) === AddressType.company ? 'true' : 'false' // TODO: Fix this! This hack for radio buttons can't be set to boolean value
       });
     }
   }, [data, country, reset]);
 
-  useEffect(() => {
-    if (selectedFormType !== AddressType.company) {
-      reset({
-        ...watch(),
-        company_name: '',
-        tax_office: '',
-        tax_no: ''
-      });
-    }
-  }, [selectedFormType, reset, watch]);
-
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
@@ -334,15 +322,12 @@ export const AddressForm = (props: Props) => {
         )}
       </label>
       <Input
+        type="number"
         label={t('account.address_book.form.post_code.placeholder')}
         {...register('postcode')}
         error={errors.postcode}
         data-testid="address-form-post-code"
         required
-        format={config.user_post_code_format.replaceAll(/\9/g, '#')}
-        control={control}
-        mask="_"
-        allowEmptyFormatting
       />
       {selectedFormType === AddressType.company && (
         <>

package/app-template/src/views/account/contact-form.tsx

@@ -3,9 +3,9 @@ import {
   Button,
   FileInput,
   Input,
-  Link,
   LoaderSpinner,
-  Select
+  Select,
+  Link
 } from '@theme/components';
 import { useSession } from 'next-auth/react';
 import { useEffect, useState } from 'react';
@@ -45,8 +45,7 @@ const contactFormSchema = (t) =>
       .when('subject', {
         is: (value) => value === '2',
         then: yup.string().required(t('account.contact.form.error.required'))
-      }),
-    file: yup.mixed()
+      })
   });
 
 const ContactForm = () => {
@@ -111,18 +110,8 @@ const ContactForm = () => {
     resolver: yupResolver(contactFormSchema(t))
   });
 
-  const onSubmit: SubmitHandler<ContactFormType> = (data, event) => {
-    const formData = new FormData();
-
-    Object.keys(data ?? {}).forEach((key) => {
-      if (key === 'file' && data[key]) {
-        formData.append(key, data[key][0]);
-      } else if (data[key]) {
-        formData.append(key, data[key]);
-      }
-    });
-
-    sendContact(formData);
+  const onSubmit: SubmitHandler<ContactFormType> = (data) => {
+    sendContact(data);
   };
 
   const handleChange = (e) => {
@@ -245,7 +234,6 @@ const ContactForm = () => {
               className="border-gray-500 border w-full text-xs p-2.5 focus-visible:outline-none focus:border-black hover:border-black"
               rows={7}
               name="message"
-              // @ts-expect-error -- awaiting fix:
               {...register('message')}
             />
             {errors.message && (
@@ -254,12 +242,7 @@ const ContactForm = () => {
             <label className="text-xs text-gray-800 mb-2 block">
               {t('account.contact.form.file.title')}
             </label>
-            <FileInput
-              name="file"
-              title="file"
-              className="w-full mb-5"
-              {...register('file')}
-            />
+            <FileInput className="w-full mb-5" title="test" />
             <Button type="submit" className="w-full font-medium">
               {t('account.contact.form.submit_button')}
             </Button>

package/app-template/src/views/account/favorite-item.tsx

@@ -93,8 +93,8 @@ export const FavoriteItem = (props: Props) => {
           className={clsx(
             'absolute top-4 right-4 cursor-pointer',
             isRemoveFavoriteLoading
-              ? 'hover:cursor-wait'
-              : 'hover:cursor-pointer'
+              ? 'pointer-events-none hover:cursor-wait' // TODO: Cursors not working fix!
+              : 'hove:cursor-pointer'
           )}
           data-testid="favorites-remove"
         />

package/app-template/src/views/account/favourite-products/favourite-products-list.tsx

@@ -30,11 +30,7 @@ const FavoriteProductsList = () => {
   }
 
   if (isLoading || isFetching) {
-    return (
-      <div className="flex items-center justify-center h-80">
-        <LoaderSpinner />
-      </div>
-    );
+    return <LoaderSpinner />; // TODO: Fix loader spinner position
   }
 
   return (

package/app-template/src/views/breadcrumb.tsx

@@ -5,7 +5,6 @@ import { Icon, Link } from '@theme/components';
 import { ROUTES } from '@theme/routes';
 import { useLocalization } from '@akinon/next/hooks';
 import { BreadcrumbResultType } from '@akinon/next/types';
-import { capitalize } from '@akinon/next/utils';
 
 export interface BreadcrumbProps {
   breadcrumbList?: BreadcrumbResultType[];
@@ -27,9 +26,7 @@ export default function Breadcrumb(props: BreadcrumbProps) {
     <div className="flex items-center gap-3 text-xs leading-4 text-gray-950">
       {list.map((item, index) => (
         <Fragment key={index}>
-          <Link href={item.url}>
-            {capitalize(item.text.toLocaleLowerCase())}
-          </Link>
+          <Link href={item.url}>{item.text}</Link>
           {index !== list.length - 1 && <Icon name="chevron-end" size={8} />}
         </Fragment>
       ))}