@akinon/projectzero 1.28.0-rc.0 → 1.29.0-rc.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/projectzero
 
+## 1.29.0-rc.2
+
+### Minor Changes
+
+- 495d155: ZERO-2563: The create command cli now doesnt get it from bitbucket but clones the repository from a localized clone version
+
+## 1.28.0-rc.1
+
 ## 1.28.0-rc.0
 
 ### Minor Changes

package/app-template/CHANGELOG.md

@@ -1,5 +1,44 @@
 # projectzeronext
 
+## 1.29.0-rc.2
+
+### Minor Changes
+
+- aafd9fe: BRDG-9228: Removed the inside of the catch blocks that has console.errors
+- 42320c2: ZERO-2516: Add if there are errors in the OTP login
+- 091d7ad: ZERO-2480: Refactor carousel component
+- 495d155: ZERO-2563: The create command cli now doesnt get it from bitbucket but clones the repository from a localized clone version
+- a892946: ZERO-2501: Update next.config.js to ES module compatible next.config.mjs format
+- f76f079: ZERO-2493: Add redirect util function
+- ce60543: ZERO-2517: Make metadata alternate languages ​​values ​​dynamic
+
+### Patch Changes
+
+- 95686ad: ZERO-2582: Fix dependency versions
+- Updated dependencies [a7e432f]
+- Updated dependencies [42320c2]
+- Updated dependencies [495d155]
+- Updated dependencies [495d155]
+- Updated dependencies [f76f079]
+  - @akinon/next@1.29.0-rc.2
+  - @akinon/pz-otp@1.29.0-rc.2
+  - @akinon/pz-b2b@1.29.0-rc.2
+  - @akinon/pz-gpay@1.29.0-rc.2
+  - @akinon/pz-masterpass@1.29.0-rc.2
+  - @akinon/pz-one-click-checkout@1.29.0-rc.2
+
+## 1.28.0-rc.1
+
+### Patch Changes
+
+- 95686ad: ZERO-2582: Fix dependency versions
+  - @akinon/next@1.28.0-rc.1
+  - @akinon/pz-b2b@1.28.0-rc.1
+  - @akinon/pz-gpay@1.28.0-rc.1
+  - @akinon/pz-masterpass@1.28.0-rc.1
+  - @akinon/pz-one-click-checkout@1.28.0-rc.1
+  - @akinon/pz-otp@1.28.0-rc.1
+
 ## 1.28.0-rc.0
 
 ### Minor Changes

package/app-template/{next.config.js → next.config.mjs}

@@ -1,9 +1,6 @@
-const withPWA = require('next-pwa')({
-  dest: 'public',
-  disable: process.env.NODE_ENV === 'development'
-});
-const { withSentryConfig } = require('@sentry/nextjs');
-const withPzConfig = require('@akinon/next/with-pz-config');
+import withPWA from 'next-pwa';
+import { withSentryConfig } from '@sentry/nextjs';
+import withPzConfig from '@akinon/next/with-pz-config.js';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -22,9 +19,16 @@ const nextConfig = {
   }
 };
 
-const enhancedConfig = withPzConfig(nextConfig);
+const withPwaConfig = withPWA({
+  dest: 'public',
+  disable: process.env.NODE_ENV === 'development'
+});
 
-module.exports = withSentryConfig(withPWA(enhancedConfig), {
+const sentryConfig = {
   silent: true,
   dryRun: !process.env.SENTRY_DSN
-});
+};
+
+const enhancedConfig = withPzConfig(nextConfig);
+
+export default withSentryConfig(withPwaConfig(enhancedConfig), sentryConfig);

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.28.0-rc.0",
+  "version": "1.29.0-rc.2",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,12 +22,12 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "1.26.0",
-    "@akinon/pz-b2b": "1.26.0",
-    "@akinon/pz-gpay": "1.26.0",
-    "@akinon/pz-masterpass": "1.26.0",
-    "@akinon/pz-one-click-checkout": "1.26.0",
-    "@akinon/pz-otp": "1.26.0",
+    "@akinon/next": "1.29.0-rc.2",
+    "@akinon/pz-b2b": "1.29.0-rc.2",
+    "@akinon/pz-gpay": "1.29.0-rc.2",
+    "@akinon/pz-masterpass": "1.29.0-rc.2",
+    "@akinon/pz-one-click-checkout": "1.29.0-rc.2",
+    "@akinon/pz-otp": "1.29.0-rc.2",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
@@ -51,7 +51,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.26.0",
+    "@akinon/eslint-plugin-projectzero": "1.29.0-rc.2",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

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

@@ -91,5 +91,10 @@
       "submit": "Sign In",
       "quick_login": "Quick Login"
     }
+  },
+  "otp_login": {
+    "form": {
+      "error_code": "The verification code you entered is incorrect."
+    }
   }
 }

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

@@ -91,5 +91,10 @@
       "submit": "Giriş Yap",
       "quick_login": "Hızlı Giriş"
     }
+  },
+  "otp_login": {
+    "form": {
+      "error_code": "Girdiğiniz doğrulama kodu hatalıdır."
+    }
   }
 }

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

@@ -1,12 +1,8 @@
 import AccountBackButton from '@theme/views/account/back-button';
 import AccountMenu from '@theme/views/account/account-menu';
 import { getServerSession } from 'next-auth/next';
-import { redirect } from 'next/navigation';
 import { ROUTES } from 'routes';
-import { headers } from 'next/headers';
-import { ServerVariables } from '@akinon/next/utils/server-variables';
-import { getUrlPathWithLocale } from '@akinon/next/utils/localization';
-import Settings from 'settings';
+import { redirect } from '@akinon/next/utils/redirect';
 
 export default async function AccountLayout({
   children
@@ -15,25 +11,8 @@ export default async function AccountLayout({
 }) {
   const session = await getServerSession();
 
-  const nextHeaders = headers();
-  const pageUrl = new URL(
-    nextHeaders.get('pz-url') ?? process.env.NEXT_PUBLIC_URL
-  );
-
-  const currentLocale = Settings.localization.locales.find(
-    (locale) => locale.value === ServerVariables.locale
-  );
-
   if (!session?.user) {
-    const callbackUrl = pageUrl.pathname;
-    const authRoute = getUrlPathWithLocale(
-      ROUTES.AUTH,
-      currentLocale.localePath ?? currentLocale.value
-    );
-
-    const redirectUrl = `${authRoute}?callbackUrl=${callbackUrl}`;
-
-    return redirect(redirectUrl);
+    return redirect(ROUTES.AUTH);
   }
 
   return (

package/app-template/src/app/[commerce]/[locale]/[currency]/layout.tsx

@@ -12,6 +12,7 @@ import PzRoot from '@akinon/next/components/pz-root';
 import MobileAppToggler from '@akinon/next/components/mobile-app-toggler';
 import pwaTags from '@theme/components/pwa-tags';
 import type { Viewport } from 'next';
+import settings from '@theme/settings';
 
 export const viewport: Viewport = {
   width: 'device-width',
@@ -22,12 +23,15 @@ export const viewport: Viewport = {
 };
 
 export async function generateMetadata() {
+  const { locales } = settings.localization;
+
+  const languages = locales.map(({ localePath }) => ({
+    [localePath]: `/${localePath}`
+  }));
+
   let result: Metadata = {
     alternates: {
-      languages: {
-        en: '/en',
-        tr: '/tr'
-      }
+      languages: languages.reduce((acc, cur) => ({ ...acc, ...cur }), {})
     }
   };
 

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

@@ -177,6 +177,10 @@ const CheckoutCompleted = ({
                     swipeable={true}
                     arrows={false}
                     itemClass="pr-[50px]"
+                    containerAspectRatio={{
+                      mobile: 460 / 88,
+                      desktop: 637 / 88
+                    }}
                   >
                     {data.order.orderitem_set.map((item) => (
                       <div key={`order-item-${item.id}`} className="flex">

package/app-template/src/components/carousel-core.tsx

@@ -1,3 +1,42 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import 'react-multi-carousel/lib/styles.css';
+import Carousel, {
+  CarouselProps as BaseCarouselProps
+} from 'react-multi-carousel';
+import { forwardRef } from 'react';
+import { useMediaQuery } from '@akinon/next/hooks';
+
+type ContainerAspectRatioType = {
+  mobile: number;
+  desktop: number;
+};
+
+interface CarouselProps extends BaseCarouselProps {
+  containerAspectRatio: ContainerAspectRatioType;
+}
+
+const CarouselCore = forwardRef<Carousel, CarouselProps>((props, ref) => {
+  const { containerAspectRatio } = props;
+  const matches = useMediaQuery('(min-width: 768px)');
+  const [aspectRatio, setAspectRatio] = useState(containerAspectRatio.mobile);
+
+  useEffect(() => {
+    if (matches) {
+      setAspectRatio(containerAspectRatio.desktop);
+    } else {
+      setAspectRatio(containerAspectRatio.mobile);
+    }
+  }, [matches]);
+
+  return (
+    <div className="w-full" style={{ aspectRatio }}>
+      <Carousel {...props} ref={ref} />
+    </div>
+  );
+});
+
+CarouselCore.displayName = 'CarouselCore';
 
-export { default as CarouselCore } from 'react-multi-carousel';
+export { CarouselCore };

package/app-template/src/views/account/account-menu.tsx

@@ -72,7 +72,7 @@ export default function AccountMenu() {
           callbackUrl: '/'
         });
       })
-      .catch((error) => console.error(error));
+      .catch();
   };
 
   return (

package/app-template/src/views/checkout/steps/shipping/address-box.tsx

@@ -88,7 +88,7 @@ const AddressBox = ({
       .then((editAddressResponse) => {
         handleAddressClick(addressType, editAddressResponse);
       })
-      .catch((error) => console.error(error));
+      .catch();
 
     setIsEditAddressModalOpen(false);
   };

package/app-template/src/views/checkout/steps/shipping/addresses.tsx

@@ -84,7 +84,7 @@ const Addresses = () => {
           setSelectAddresses(addAddressResponse.pk);
         }
       })
-      .catch((error) => console.error(error));
+      .catch();
 
     setIsModalOpen(false);
   };

package/app-template/src/views/otp-login/index.tsx

@@ -12,6 +12,7 @@ import { useLocalization } from '@akinon/next/hooks';
 import { useOtpLoginMutation } from '@akinon/next/data/client/user';
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { AuthError } from '@akinon/next/types';
 
 const loginFormSchema = (t) =>
   yup.object().shape({
@@ -42,11 +43,34 @@ export const OtpLogin = () => {
   const [formError, setFormError] = useState(null);
 
   const loginHandler: SubmitHandler<OtpLoginFormType> = async (data) => {
-    return await signIn('default', {
+    const loginResponse = await signIn('default', {
       redirect: false,
       callbackUrl: '/',
       ...data
     } as SignInOptions);
+
+    if (loginResponse.error) {
+      const errors: AuthError[] = JSON.parse(loginResponse.error);
+
+      const fieldErrors = errors.find((error) => error.type === 'field_errors')
+        ?.data as { name: string; value: string[] }[];
+
+      const nonFieldErrors = errors.find(
+        (error) => error.type === 'non_field_errors'
+      )?.data as string[];
+
+      fieldErrors?.forEach((item) => {
+        if (item.name === 'error_code') {
+          setFormError(t('auth.otp_login.form.error_code'));
+        }
+      });
+
+      if (nonFieldErrors?.length) {
+        setFormError(nonFieldErrors.join(', '));
+      }
+
+      return;
+    }
   };
 
   const onSubmit = async (data: OtpLoginFormType) => {
@@ -118,7 +142,8 @@ export const OtpLogin = () => {
           props={{
             setShowPopup: setShowOtpModal,
             data: getValues(),
-            submitAction: loginHandler
+            submitAction: loginHandler,
+            error: formError
           }}
         />
       )}

package/app-template/src/views/product/slider.tsx

@@ -69,6 +69,7 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
         arrows={false}
         swipeable={true}
         ref={carouselRef}
+        containerAspectRatio={{ mobile: 520 / 798, desktop: 372 / 573 }}
         className="w-full"
       >
         {product?.productimage_set?.map((item, i) => (

package/app-template/src/views/widgets/home-hero-slider-content.tsx

@@ -3,65 +3,52 @@
 import React from 'react';
 import { CarouselCore } from '@theme/components/carousel-core';
 import { Image, Link } from '@akinon/next/components';
-import { useMediaQuery } from '@akinon/next/hooks';
 
 export default function HomeHeroSliderContent({ data }) {
   const imageRatio = {
     mobile: 375 / 540,
     desktop: 1540 / 540
   };
-  const matches = useMediaQuery('(min-width: 768px)');
-  const [aspectRatio, setAspectRatio] = React.useState(imageRatio.mobile);
-
-  React.useEffect(() => {
-    if (matches) {
-      setAspectRatio(imageRatio.desktop);
-    } else {
-      setAspectRatio(imageRatio.mobile);
-    }
-  }, [matches]);
 
   return (
-    <div
-      style={{
-        aspectRatio
+    <CarouselCore
+      responsive={{
+        all: {
+          breakpoint: { max: 5000, min: 0 },
+          items: 1
+        }
+      }}
+      arrows={false}
+      swipeable={true}
+      containerAspectRatio={{
+        mobile: imageRatio.mobile,
+        desktop: imageRatio.desktop
       }}
     >
-      <CarouselCore
-        responsive={{
-          all: {
-            breakpoint: { max: 5000, min: 0 },
-            items: 1
-          }
-        }}
-        arrows={false}
-        swipeable={true}
-      >
-        {data?.attributes?.hero_slider?.map((item, i) => (
-          <div key={i}>
-            <Link href={item.value.url}>
-              <Image
-                src={item.kwargs.value.mobile_image.url}
-                alt={item.value.alt}
-                aspectRatio={imageRatio.mobile}
-                draggable={false}
-                sizes="375px"
-                fill
-                className="block md:hidden"
-              />
-              <Image
-                src={item.kwargs.value.image.url}
-                alt={item.value.alt}
-                aspectRatio={imageRatio.desktop}
-                draggable={false}
-                sizes="1540px"
-                fill
-                className="hidden md:block"
-              />
-            </Link>
-          </div>
-        ))}
-      </CarouselCore>
-    </div>
+      {data?.attributes?.hero_slider?.map((item, i) => (
+        <div key={i}>
+          <Link href={item.value.url}>
+            <Image
+              src={item.kwargs.value.mobile_image.url}
+              alt={item.value.alt}
+              aspectRatio={imageRatio.mobile}
+              draggable={false}
+              sizes="375px"
+              fill
+              className="block md:hidden"
+            />
+            <Image
+              src={item.kwargs.value.image.url}
+              alt={item.value.alt}
+              aspectRatio={imageRatio.desktop}
+              draggable={false}
+              sizes="1540px"
+              fill
+              className="hidden md:block"
+            />
+          </Link>
+        </div>
+      ))}
+    </CarouselCore>
   );
 }

package/app-template/src/views/widgets/recommendation-content.tsx

@@ -57,6 +57,7 @@ export default function RecommendationContent({ data }) {
               responsive={responsive}
               arrows={false}
               itemClass="pr-2.5"
+              containerAspectRatio={{ mobile: 484 / 431, desktop: 1278 / 453 }}
             >
               {data?.products?.map((product, index) => (
                 <div key={product.pk}>

package/app-template/src/widgets/special-page-carousel.tsx

@@ -30,6 +30,7 @@ export function SpecialPageCarousel(props: Props) {
         swipeable={true}
         showDots={true}
         itemClass="pr-2.5"
+        containerAspectRatio={{ mobile: 608 / 166, desktop: 1370 / 294 }}
       >
         {data.attributes.special_page_category.map((item, i) => (
           <div key={i.toString()}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "1.28.0-rc.0",
+  "version": "1.29.0-rc.2",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {