@akinon/projectzero 2.0.0-beta.19 → 2.0.0-beta.20

package/app-template/src/views/product-item/index.tsx

@@ -10,6 +10,9 @@ import useFavButton from '../../hooks/use-fav-button';
 import { Product } from '@akinon/next/types';
 import { Image } from '@akinon/next/components/image';
 import { Price, Link } from '@theme/components';
+import { SaleTag } from '../product/sale-tag';
+import { useProductList } from '../category/product-list-registrar';
+import { useNativeWidget } from '../category/native-widget-context';
 
 interface Props {
   product: Product;
@@ -19,17 +22,42 @@ interface Props {
 }
 
 export const ProductItem = (props: Props) => {
-  // TODO: Static image will change (TR)
   const { product, width, height, index } = props;
   const [viewed, setViewed] = useState(false);
   const { FavButton } = useFavButton(product.pk);
   const { ref, inView } = useInView();
 
-  const image_url = product.productimage_set[0]?.image;
+  // Get product-item properties from ProductListRegistrar
+  const {
+    productItemProperties: registrarProps,
+    productItemStyles: registrarStyles
+  } = useProductList();
+
+  // Get product-item properties from NativeWidgetProvider
+  const {
+    productItemProperties: widgetProps,
+    productItemStyles: widgetStyles
+  } = useNativeWidget();
+
+  // Designer mode uses registrar props, saved widget uses widget props
+  const isDesigner = typeof window !== 'undefined' && window.parent !== window;
+  const properties = isDesigner
+    ? { ...widgetProps, ...registrarProps }
+    : widgetProps;
+  const styles = isDesigner
+    ? { ...widgetStyles, ...registrarStyles }
+    : widgetStyles;
+
+  const showFavButton = properties['show-fav-button'] !== false;
+  const favButtonPosition =
+    (properties['fav-button-position'] as string) || 'top-right';
+
+  const image_url = product.productimage_set?.[0]?.image;
   const absolute_url = product.absolute_url;
   const product_name = product.name;
   const retail_price = product.retail_price;
   const price = product.price;
+  const isOnSale = parseFloat(String(retail_price)) > parseFloat(String(price));
 
   useEffect(() => {
     if (!viewed && inView) {
@@ -38,58 +66,103 @@ export const ProductItem = (props: Props) => {
     }
   }, [inView, viewed, product]);
 
+  // Position classes
+  const positionClasses = {
+    'top-left': 'top-2.5 left-2.5',
+    'top-right': 'top-2.5 right-2.5',
+    'bottom-left': 'bottom-2.5 left-2.5',
+    'bottom-right': 'bottom-2.5 right-2.5'
+  };
+
+  const favButtonStyles: React.CSSProperties = {
+    width: (styles['fav-button-size'] as string) || '32px',
+    height: (styles['fav-button-size'] as string) || '32px',
+    backgroundColor:
+      (styles['fav-button-bg-color'] as string) || 'rgba(255, 255, 255, 0.8)',
+    color: (styles['fav-button-icon-color'] as string) || '#000000',
+    borderRadius: (styles['fav-button-border-radius'] as string) || '50%'
+  };
+
+  const productNameStyles: React.CSSProperties = {
+    fontSize: (styles['product-name-font-size'] as string) || '14px',
+    color: (styles['product-name-color'] as string) || '#1a1a1a',
+    fontWeight: (styles['product-name-font-weight'] as string) || '400',
+    display: '-webkit-box',
+    WebkitLineClamp: parseInt(
+      (styles['product-name-line-clamp'] as string) || '2',
+      10
+    ),
+    WebkitBoxOrient: 'vertical' as const,
+    overflow: 'hidden'
+  };
+
+  const priceStyles: React.CSSProperties = {
+    fontSize: (styles['price-font-size'] as string) || '16px',
+    color: (styles['price-color'] as string) || '#1a1a1a',
+    fontWeight: (styles['price-font-weight'] as string) || '400'
+  };
+
+  const oldPriceStyles: React.CSSProperties = {
+    fontSize: (styles['old-price-font-size'] as string) || '14px',
+    color: (styles['old-price-color'] as string) || '#6b7280'
+  };
+
   return (
     <div
-      className="text-sm text-left flex flex-col justify-between"
+      className="flex flex-col group w-full"
       data-testid="product-box"
       ref={ref}
+      data-section-id="product-item-section"
     >
-      <div className="relative mb-3 h-full">
+      <div className="relative mb-2 w-full aspect-square">
         <Link href={absolute_url} onClick={() => pushProductClicked(product)}>
-          {image_url ? (
-            <Image
-              fill
-              loading="lazy"
-              src={image_url}
-              alt={product_name}
-              aspectRatio={width / height}
-              sizes="
-              (max-width: 768px) 50vw,
-              (max-width: 1024px) 30vw,
-              33vw"
-              crop="center"
-            />
-          ) : (
-            <Image
-              className="h-full"
-              src="/noimage.jpg"
-              fill
-              aspectRatio={width / height}
-              sizes="100vw"
-              alt={product_name}
-              imageClassName="object-cover"
-            />
-          )}
+          <Image
+            loading="lazy"
+            src={image_url || '/noimage.jpg'}
+            alt={product_name}
+            aspectRatio={width / height}
+            fill
+            crop="center"
+            sizes={`(max-width: 768px) ${
+              width === 260 ? 170 : width
+            }px, ${width}px`}
+            imageClassName="object-cover"
+          />
         </Link>
-        <FavButton className="absolute top-4 right-4" />
+
+        {showFavButton && (
+          <FavButton
+            className={`absolute ${positionClasses[favButtonPosition]} hover:opacity-100 transition-all flex items-center justify-center z-10`}
+            style={favButtonStyles}
+          />
+        )}
+
+        {isOnSale && (
+          <div className="absolute bottom-4 left-2 z-10">
+            <SaleTag />
+          </div>
+        )}
       </div>
-      <div>
-        <Link
-          href={absolute_url}
-          data-testid={`${product_name}-${index}`}
-          onClick={() => pushProductClicked(product)}
-        >
-          {product_name}
-        </Link>
-        <div className="font-semibold">
-          {parseFloat(retail_price) > parseFloat(price) && (
-            <Price
-              value={retail_price}
-              className="font-normal line-through mr-3"
-            />
-          )}
-          <Price value={price} data-testid="product-price" />
-        </div>
+
+      <Link
+        href={absolute_url}
+        data-testid={`${product_name}-${index}`}
+        onClick={() => pushProductClicked(product)}
+        className="hover:underline"
+        style={productNameStyles}
+      >
+        {product_name}
+      </Link>
+
+      <div className="flex items-center gap-2">
+        {isOnSale && (
+          <Price
+            value={retail_price}
+            className="line-through"
+            style={oldPriceStyles}
+          />
+        )}
+        <Price value={price} data-testid="product-price" style={priceStyles} />
       </div>
     </div>
   );

package/app-template/src/views/register/index.tsx

@@ -209,7 +209,7 @@ export const Register = () => {
   };
 
   return (
-    <section className="w-full py-10 px-5 md:py-0 md:block md:px-8 md:mx-auto lg:px-16">
+    <section className="w-full mt-6 lg:mt-8">
       <Modal
         title={contentModal.title}
         portalId="portal-modal-container"
@@ -230,14 +230,6 @@ export const Register = () => {
           }}
         />
       )}
-      <h2 className="mb-3 text-lg text-start text-black-800 font-light md:mb-9 md:text-2xl">
-        {t('auth.register.title')}
-      </h2>
-
-      <p className="mb-3 text-xs leading-4 text-primary-400">
-        {t('auth.register.subtitle')}
-      </p>
-
       <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
         <input
           type="hidden"
@@ -246,11 +238,11 @@ export const Register = () => {
         />
         <input type="hidden" value={locale} {...register('locale')} />
 
-        <div className={clsx({ 'mb-4': errors.email })}>
+        <div>
           <Input
             labelStyle="floating"
             label={t('auth.register.form.email.placeholder')}
-            className="h-14"
+            className="h-12"
             {...register('email')}
             error={errors.email}
             data-testid="register-email"
@@ -259,15 +251,13 @@ export const Register = () => {
         </div>
 
         <div
-          className={clsx('lg:flex', {
-            'mb-4': errors.first_name || errors.last_name
-          })}
+          className="lg:flex"
         >
           <div className="w-full lg:pr-2">
             <Input
               labelStyle="floating"
               label={t('auth.register.form.name.placeholder')}
-              className="block h-14"
+              className="block h-12"
               {...register('first_name')}
               error={errors.first_name}
               data-testid="register-name"
@@ -279,7 +269,7 @@ export const Register = () => {
             <Input
               labelStyle="floating"
               label={t('auth.register.form.surname.placeholder')}
-              className="block h-14"
+              className="block h-12"
               {...register('last_name')}
               error={errors.last_name}
               data-testid="register-surname"
@@ -288,12 +278,12 @@ export const Register = () => {
           </div>
         </div>
 
-        <div className={clsx('relative', { 'mb-4': errors.password })}>
+        <div className="relative">
           <div className="relative">
             <Input
               labelStyle="floating"
               label={t('auth.register.form.password.placeholder')}
-              className="h-14 pr-16"
+              className="h-12 pr-16"
               type={showPassword ? 'text' : 'password'}
               {...register('password')}
               data-testid="register-password"
@@ -319,11 +309,11 @@ export const Register = () => {
           />
         </div>
 
-        <div className={clsx({ 'mb-4': errors.phone })}>
+        <div>
           <Input
             labelStyle="floating"
             label={t('auth.register.form.phone.placeholder')}
-            className="h-14"
+            className="h-12"
             format={user_phone_format.replace(/9/g, '#')}
             allowEmptyFormatting
             mask="_"
@@ -339,7 +329,6 @@ export const Register = () => {
           <p className="mb-4">{t('auth.register.form.agreements.title')}:</p>
 
           <Checkbox
-            className={clsx(errors.confirm ? 'mb-8' : 'mb-4')}
             {...register('confirm')}
             error={errors.confirm}
             data-testid="register-agreement-1"
@@ -358,7 +347,7 @@ export const Register = () => {
           </Checkbox>
 
           <Checkbox
-            className={clsx(errors.kvkk_confirm ? 'mb-8' : 'mb-4')}
+            className="mt-4"
             {...register('kvkk_confirm')}
             error={errors.kvkk_confirm}
             data-testid="register-agreement-2"
@@ -377,7 +366,7 @@ export const Register = () => {
           </Checkbox>
 
           <Checkbox
-            className="mb-4"
+            className="mt-4"
             {...register('email_allowed')}
             data-testid="register-agreement-3"
           >
@@ -395,7 +384,7 @@ export const Register = () => {
           </Checkbox>
 
           <Checkbox
-            className="mb-4"
+            className="mt-4"
             {...register('sms_allowed')}
             data-testid="register-agreement-4"
           >
@@ -421,7 +410,7 @@ export const Register = () => {
         </div>
 
         <Button
-          className="text-xs font-semibold uppercase w-full h-14"
+          className="w-full h-12 text-sm font-normal"
           type="submit"
           disabled={isCaptchaVisible && !captchaValidated}
           data-testid="register-submit"

package/app-template/src/views/share/index.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Button, Icon } from '@theme/components';
 // eslint-disable-next-line @akinon/projectzero/link-import
 import Link from 'next/link';
-import { ShareProps } from '@theme/components/types';
+import { ShareProps } from '@theme/components/types/index';
 import clsx from 'clsx';
 
 const Share = ({
@@ -13,18 +13,21 @@ const Share = ({
   buttonAppearance = 'ghost',
   className,
   buttonIconName = 'share',
-  buttonIconSize = 16,
+  buttonIconSize = 24,
   buttonIconProps = {},
   items
 }: ShareProps) => {
   const [open, setOpen] = useState(false);
 
   return (
-    <div className={clsx('flex items-center', className)}>
+    <div className={clsx('flex items-center gap-4 border-t', className)}>
       <Button
         onClick={() => setOpen(!open)}
         appearance={buttonAppearance}
-        className={clsx('text-base', buttonClassName)}
+        className={clsx(
+          'text-base p-0 bg-transparent hover:bg-transparent hover:text-primary',
+          buttonClassName
+        )}
         aria-label="Share"
       >
         <div className="flex items-center gap-2">
@@ -53,12 +56,12 @@ const Share = ({
               className={
                 item.className
                   ? item.className
-                  : 'px-6 py-2 h-10 flex items-center hover:bg-gray-100'
+                  : 'p-4 h-auto flex items-center hover:bg-gray-100'
               }
             >
               <Icon
                 name={item.iconName}
-                size={item.iconSize ? item.iconSize : 16}
+                size={item.iconSize ? item.iconSize : 12}
               />
             </Link>
           </div>

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

@@ -11,44 +11,46 @@ export default function HomeHeroSliderContent({ data }) {
   };
 
   return (
-    <CarouselCore
-      responsive={{
-        all: {
-          breakpoint: { max: 5000, min: 0 },
-          items: 1
-        }
-      }}
-      arrows={false}
-      swipeable={true}
-      containerAspectRatio={{
-        mobile: imageRatio.mobile,
-        desktop: imageRatio.desktop
-      }}
-    >
-      {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>
+    <>
+      <CarouselCore
+        responsive={{
+          all: {
+            breakpoint: { max: 5000, min: 0 },
+            items: 1
+          }
+        }}
+        arrows={false}
+        swipeable={true}
+        containerAspectRatio={{
+          mobile: imageRatio.mobile,
+          desktop: imageRatio.desktop
+        }}
+      >
+        {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/widgets/flatpages/about-us/index.tsx

@@ -0,0 +1,78 @@
+'use client';
+import { Image } from '@akinon/next/components';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+import { LoaderSpinner } from '@theme/components';
+
+export default function AboutUs() {
+  const { data, isLoading } = useGetWidgetQuery('about-us');
+
+  if (isLoading) {
+    return (
+      <div className="py-20">
+        <LoaderSpinner />;
+      </div>
+    );
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <div>
+      <div className="container px-3 lg:px-0 py-4 lg:py-10">
+        <div className="flex gap-2.5 flex-col lg:flex-row">
+          <Image
+            src={data?.attributes?.image_1?.kwargs?.url}
+            alt={data?.attributes?.image_1?.value}
+            aspectRatio={350 / 330}
+            sizes="350px"
+            fill
+          />
+
+          <Image
+            src={data?.attributes?.image_2?.kwargs?.url}
+            alt={data?.attributes?.image_2?.value}
+            aspectRatio={350 / 330}
+            sizes="350px"
+            fill
+          />
+
+          <Image
+            src={data?.attributes?.image_3?.kwargs?.url}
+            alt={data?.attributes?.image_3?.value}
+            aspectRatio={350 / 330}
+            sizes="350px"
+            fill
+          />
+        </div>
+
+        <div className="my-10 lg:my-16 max-w-[495px] mx-auto">
+          <h1 className="text-[30px] lg:text-[40px] mb-8">
+            {data?.attributes?.title?.value}
+          </h1>
+          <div
+            className="text-[#121212] leading-[1.72] tracking-[0.64px]"
+            dangerouslySetInnerHTML={{
+              __html: data?.attributes?.content?.value || ''
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="bg-[#fafafa] lg:bg-black text-[#121212] lg:text-white py-10 lg:py-16">
+        <div className="container">
+          <h2 className="text-center text-xl lg:text-2xl mb-8">
+            {data?.attributes?.highlight_section_title?.value}
+          </h2>
+          <div
+            className="text-center max-w-[295px] lg:max-w-[700px] mx-auto leading-[1.72] tracking-[0.64px]"
+            dangerouslySetInnerHTML={{
+              __html: data?.attributes?.highlight_section?.value || ''
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/app-template/src/widgets/flatpages/blog-list/index.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { Image } from '@akinon/next/components';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+import { useLocalization } from '@akinon/next/hooks';
+import { WidgetResultType } from '@akinon/next/types';
+import { LoaderSpinner } from '@theme/components';
+import { formatDateToMonthYear } from '@theme/utils/formatDate';
+
+interface BlogImageData {
+  value: string;
+  data_type: 'image';
+  url: string;
+}
+
+interface BlogItemValue {
+  link: string;
+  image: string;
+  title: string;
+  description: string;
+  date: string;
+}
+
+interface BlogItemKwargs {
+  value: {
+    image: BlogImageData;
+  };
+  data_type: 'nested';
+}
+
+interface BlogItem {
+  value: BlogItemValue;
+  kwargs: BlogItemKwargs;
+}
+
+interface BlogListAttributes {
+  blogs: BlogItem[];
+}
+
+export default function BlogList() {
+  const { locale, t } = useLocalization();
+  const { data, isLoading } = useGetWidgetQuery('blog-list') as ReturnType<
+    typeof useGetWidgetQuery
+  >;
+  const blogData = data as WidgetResultType<BlogListAttributes> | undefined;
+
+  if (isLoading) {
+    return (
+      <div className="py-20">
+        <LoaderSpinner />
+      </div>
+    );
+  }
+
+  if (!blogData) {
+    return (
+      <div className="container mx-auto py-10">
+        <p className="text-center py-20">{t('blog.no_blog_posts')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="container px-3 lg:px-0 py-4 lg:py-10">
+        {blogData.attributes?.blogs?.length ? (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-2.5 ">
+            {blogData.attributes.blogs.map((blogItem, index) => (
+              <div
+                key={index}
+                className={
+                  `bg-[#fafafa]` + (index === 0 ? ' lg:col-span-2' : '')
+                }
+              >
+                <a
+                  key={index}
+                  href={blogItem.value.link}
+                  className="block group"
+                >
+                  <div className="w-full relative mb-4 overflow-hidden">
+                    <Image
+                      src={blogItem.kwargs.value.image.url}
+                      alt={blogItem.value.title}
+                      aspectRatio={index === 0 ? 1072 / 481 : 530 / 440}
+                      fill
+                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                      className="w-full h-full object-cover  transition-transform duration-300 hidden lg:block"
+                    />
+                    <Image
+                      src={blogItem.kwargs.value.image.url}
+                      alt={blogItem.value.title}
+                      aspectRatio={350 / 278}
+                      fill
+                      sizes="100vw"
+                      className="w-full h-full object-fill  transition-transform duration-300 lg:hidden"
+                    />
+                  </div>
+                  <div
+                    className={
+                      `p-6 ` +
+                      (index === 0
+                        ? 'lg:p-0 lg:pb-10 lg:max-w-[700px] lg:mx-auto lg:text-center'
+                        : '')
+                    }
+                  >
+                    <h3 className="text-2xl mb-1 text-[#121212] leading-[1.72] tracking-[0.64px]">
+                      {blogItem.value.title}
+                    </h3>
+                    <p className="mb-4 lg:mb-1">
+                      {formatDateToMonthYear(
+                        blogItem.value.date,
+                        locale as any
+                      )}
+                    </p>
+                    <p className="text-[#121212] leading-[1.72] tracking-[0.64px]">
+                      {blogItem.value.description}
+                    </p>
+                  </div>
+                </a>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p>{t('blog.no_blog_posts')}</p>
+        )}
+      </div>
+    </div>
+  );
+}