@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/views/sales-contract-modal/index.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import { Price, Button, Modal } from '@theme/components';
+import { Order } from '@akinon/next/types';
+import { useState } from 'react';
+import dayjs from 'dayjs';
+import { useLocalization } from '@akinon/next/hooks';
+
+interface Props {
+  data: Order;
+}
+
+export const SalesContractModal = ({ data }: Props) => {
+  const { t } = useLocalization();
+  const [openModal, setOpenModal] = useState(false);
+
+  const billingAddressName = data.billing_address.is_corporate
+    ? data.billing_address.company_name
+    : data.billing_address.first_name + ' ' + data.billing_address.last_name;
+
+  const billingAddress =
+    data.billing_address.line +
+    '/' +
+    data.billing_address.township.name +
+    '/' +
+    data.billing_address.city.name;
+
+  return (
+    <div className="w-full">
+      <Button
+        className="underline bg-white text-black border-0 px-0"
+        onClick={() => setOpenModal(true)}
+      >
+        {t('account.my_orders.return.contract')}
+      </Button>
+      <Modal
+        title={t('account.sales_contract.title_modal')}
+        portalId="portal-modal-container"
+        open={openModal}
+        setOpen={setOpenModal}
+      >
+        <div className="p-6 max-h-80 overflow-auto">
+          <div>
+            <div className="mb-5">
+              <div className="leading-6">
+                {t('account.sales_contract.customer_details')}
+              </div>
+
+              <div className="font-light text-sm">
+                <span>{t('account.sales_contract.name_surname_title')}</span>
+                <span>{billingAddressName}</span>
+              </div>
+
+              <div className="font-light text-sm">
+                {t('account.sales_contract.address')}
+                <span>{billingAddress}</span>
+              </div>
+
+              <div className="font-light text-sm">
+                {t('account.sales_contract.phone')}
+                <span>{data.billing_address.phone_number}</span>
+              </div>
+
+              <div className="font-light text-sm">
+                {t('account.sales_contract.email')}
+                <span>{data.billing_address.email}</span>
+              </div>
+            </div>
+
+            <div className="mb-5">
+              <div className="leading-6">
+                {t('account.sales_contract.shipping_details')}
+              </div>
+
+              <div className="font-light text-sm">
+                {t('account.sales_contract.name_surname_title')}
+                <span>
+                  {data.shipping_address.is_corporate
+                    ? data.shipping_address.company_name
+                    : data.shipping_address.first_name +
+                      ' ' +
+                      data.shipping_address.last_name}
+                </span>
+              </div>
+
+              {data.billing_address.is_corporate && (
+                <>
+                  <div className="font-light text-sm">
+                    {t('account.sales_contract.tax_no')}
+                    <span>{data.shipping_address.tax_no}</span>
+                  </div>
+
+                  <div className="font-light text-sm">
+                    {t('account.sales_contract.tax_office')}
+                    <span>{data.shipping_address.tax_office}</span>
+                  </div>
+                </>
+              )}
+
+              <div className="font-light text-sm">
+                {t('account.sales_contract.address')}
+                <span>
+                  {data.shipping_address.line +
+                    '/' +
+                    data.shipping_address.township.name +
+                    '/' +
+                    data.shipping_address.city.name}
+                </span>
+              </div>
+
+              <div className="font-light text-sm">
+                {t('account.sales_contract.phone')}
+                <span>{data.shipping_address.phone_number}</span>
+              </div>
+
+              <div className="font-light text-sm">
+                {t('account.sales_contract.email')}
+                <span>{data.shipping_address.email}</span>
+              </div>
+            </div>
+
+            <div className="mb-5">
+              <div className="leading-6">
+                {t('account.sales_contract.billing_details')}
+              </div>
+
+              <div className="font-light text-sm">
+                {t('account.sales_contract.name_surname_title')}
+                <span>{billingAddressName}</span>
+              </div>
+
+              {data.billing_address.is_corporate && (
+                <>
+                  <div className="font-light text-sm">
+                    {t('account.sales_contract.tax_no')}
+                    <span>{data.billing_address.tax_no}</span>
+                  </div>
+
+                  <div className="font-light text-sm">
+                    {t('account.sales_contract.tax_office')}
+                    <span>{data.billing_address.tax_office}</span>
+                  </div>
+                </>
+              )}
+
+              <div className="font-light text-sm">
+                {t('account.sales_contract.address')}
+                <span>{billingAddress}</span>
+              </div>
+
+              <div className="font-light text-sm">
+                {t('account.sales_contract.phone')}
+                <span>{data.billing_address.phone_number}</span>
+              </div>
+
+              <div className="font-light text-sm">
+                {t('account.sales_contract.email')}
+                <span>{data.billing_address.email}</span>
+              </div>
+            </div>
+
+            <div className="mb-5">
+              <div className="leading-6">
+                <span>{t('account.sales_contract.agreement_details')}</span>
+              </div>
+              <div className="font-light text-sm">
+                {t('account.sales_contract.agreement_date')}
+                <span>{dayjs().format('DD/MM/YYYY')}</span>
+              </div>
+            </div>
+
+            <table className="w-full border">
+              <thead className="text-sm">
+                <tr>
+                  <th className="border font-normal text-left py-2 px-3">
+                    {t('account.sales_contract.product')}
+                  </th>
+                  <th className="border font-normal py-2 px-3">
+                    {t('account.sales_contract.quantity')}
+                  </th>
+                  <th className="border font-normal text-left py-2 px-3">
+                    {t('account.sales_contract.product_price')}
+                  </th>
+                  <th className="border font-normal text-left py-2 px-3">
+                    {t('account.sales_contract.total_price')}
+                  </th>
+                </tr>
+              </thead>
+
+              <tbody className="text-sm">
+                {data.orderitem_set.map((value, index) => {
+                  return (
+                    <tr key={index.toString()}>
+                      <td className="border font-light text-left py-2 px-3">
+                        {value.product.name}
+                      </td>
+                      <td className="border font-light text-center py-2 px-3">
+                        {value.quantity ? value.quantity : '1'}
+                      </td>
+                      <td className="border font-light text-center py-2 px-3">
+                        <Price
+                          value={
+                            value.unit_price ? value.unit_price : value.price
+                          }
+                        />
+                      </td>
+                      <td className="border font-light text-right py-2 px-3">
+                        <Price
+                          value={
+                            value.total_amount
+                              ? value.total_amount
+                              : value.price
+                          }
+                        />
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+
+              <tfoot className="text-sm">
+                <tr>
+                  <th
+                    colSpan={3}
+                    className="border text-left py-2 px-3 font-normal"
+                  >
+                    {t('account.sales_contract.products_total')}
+                  </th>
+                  <td
+                    className="border text-right py-2 px-3 font-light"
+                    colSpan={1}
+                  >
+                    <Price value={data.discount_amount} />
+                  </td>
+                </tr>
+
+                <tr>
+                  <th
+                    colSpan={3}
+                    className="border text-left py-2 px-3 font-normal"
+                  >
+                    {t('account.sales_contract.shipping_price')}
+                  </th>
+                  <td
+                    className="border text-right py-2 px-3 font-light"
+                    colSpan={1}
+                  >
+                    <Price value={data.shipping_amount} />
+                  </td>
+                </tr>
+
+                <tr>
+                  <th
+                    colSpan={3}
+                    className="border text-left py-2 px-3 font-normal"
+                  >
+                    {t('account.sales_contract.payment_type')}
+                  </th>
+                  <td
+                    className="border text-right py-2 px-3 font-light"
+                    colSpan={1}
+                  >
+                    {data.payment_option_slug}
+                  </td>
+                </tr>
+
+                <tr>
+                  <th
+                    colSpan={3}
+                    className="border text-left py-2 px-3 font-normal"
+                  >
+                    {t('account.sales_contract.order_total')}
+                  </th>
+                  <td
+                    className="border text-right py-2 px-3 font-light"
+                    colSpan={1}
+                  >
+                    <Price value={data.amount} />
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};

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

@@ -0,0 +1,71 @@
+'use client';
+
+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 clsx from 'clsx';
+
+const Share = ({
+  buttonText = null,
+  buttonClassName,
+  buttonAppearance = 'ghost',
+  className,
+  buttonIconName = 'share',
+  buttonIconSize = 16,
+  buttonIconProps = {},
+  items
+}: ShareProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className={clsx('flex items-center', className)}>
+      <Button
+        onClick={() => setOpen(!open)}
+        appearance={buttonAppearance}
+        className={clsx('text-base', buttonClassName)}
+        aria-label="Share"
+      >
+        <div className="flex items-center gap-2">
+          <Icon
+            name={buttonIconName}
+            size={buttonIconSize}
+            {...buttonIconProps}
+          />
+          {buttonText && <span>{buttonText}</span>}
+        </div>
+      </Button>
+
+      <div
+        className={clsx(
+          'share-group flex transition-max-width ease-linear duration-300',
+          open
+            ? 'opacity-100 max-w-xs visible pointer-events-auto'
+            : 'opacity-0 max-w-0 invisible pointer-events-none'
+        )}
+      >
+        {items.map((item, index) => (
+          <div key={index} className="share-item">
+            <Link
+              target={'_blank'}
+              href={item.href}
+              className={
+                item.className
+                  ? item.className
+                  : 'px-6 py-2 h-10 flex items-center hover:bg-gray-100'
+              }
+            >
+              <Icon
+                name={item.iconName}
+                size={item.iconSize ? item.iconSize : 16}
+              />
+            </Link>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Share;

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

@@ -0,0 +1,54 @@
+'use client';
+
+import React from 'react';
+import { CarouselCore } from '@theme/components/carousel-core';
+import { Image, Link } from '@akinon/next/components';
+
+export default function HomeHeroSliderContent({ data }) {
+  const imageRatio = {
+    mobile: 375 / 540,
+    desktop: 1540 / 540
+  };
+
+  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>
+  );
+}

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

@@ -0,0 +1,86 @@
+'use client';
+
+import React from 'react';
+import { CarouselCore } from '@theme/components/carousel-core';
+import { ProductItem } from '@theme/views/product-item';
+import { Icon } from '@theme/components';
+import { useRef } from 'react';
+
+const responsive = {
+  desktop: {
+    breakpoint: { max: 3000, min: 1024 },
+    items: 5
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 768 },
+    items: 3
+  },
+  mobile: {
+    breakpoint: { max: 768, min: 0 },
+    items: 2
+  }
+};
+
+export default function RecommendationContent({ data }) {
+  const carouselRef = useRef(null);
+
+  const goToPrev = () => {
+    carouselRef.current.previous();
+  };
+
+  const goToNext = () => {
+    carouselRef.current.next();
+  };
+
+  return (
+    data?.products && (
+      <div className="container my-8">
+        {data?.attributes?.title?.value && (
+          <div className="text-2xl text-secondary font-light lg:mb-2">
+            {data?.attributes?.title.value}
+          </div>
+        )}
+        <div className="flex items-center relative">
+          <div className="justify-center items-center z-10">
+            <div
+              onClick={goToPrev}
+              className="flex justify-center cursor-pointer bg-secondary rounded-full p-2.5 mr-2"
+            >
+              <Icon name="chevron-start" size={18} className="fill-[#FFFFFF]" />
+            </div>
+          </div>
+
+          <div className="w-full overflow-hidden">
+            <CarouselCore
+              ref={carouselRef}
+              swipeable={true}
+              responsive={responsive}
+              arrows={false}
+              itemClass="pr-2.5"
+              containerAspectRatio={{ mobile: 484 / 431, desktop: 1278 / 453 }}
+            >
+              {data?.products?.map((product, index) => (
+                <div key={product.pk}>
+                  <ProductItem
+                    product={product}
+                    width={272}
+                    height={416}
+                    index={index}
+                  />
+                </div>
+              ))}
+            </CarouselCore>
+          </div>
+          <div className="justify-center items-center z-10 ml-2">
+            <div
+              onClick={goToNext}
+              className="flex justify-center cursor-pointer bg-secondary rounded-full p-2.5"
+            >
+              <Icon name="chevron-end" size={18} className="fill-[#FFFFFF]" />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  );
+}

package/app-template/src/widgets/footer-copyright.tsx

@@ -0,0 +1,25 @@
+import 'server-only';
+
+import { getWidgetData } from '@akinon/next/data/server';
+
+type FooterCopyrightItem = {
+  value: string;
+};
+
+type FooterCopyrightType = {
+  copyright_text: FooterCopyrightItem;
+};
+
+export default async function FooterCopyright() {
+  const data = await getWidgetData<FooterCopyrightType>({
+    slug: 'footer-copyright'
+  });
+
+  return (
+    <div className="flex items-center justify-center px-4 py-3 bg-gray-100">
+      <span className="text-xs text-black">
+        {data?.attributes?.copyright_text?.value}
+      </span>
+    </div>
+  );
+}

package/app-template/src/widgets/footer-info.tsx

@@ -0,0 +1,78 @@
+import 'server-only';
+
+import { Link } from '@theme/components';
+import { getWidgetData } from '@akinon/next/data/server';
+
+type FooterInfoItem = {
+  value: string;
+};
+
+type FooterInfoType = {
+  logo_class?: FooterInfoItem;
+  button_link: FooterInfoItem;
+  description: FooterInfoItem;
+  button_text: FooterInfoItem;
+  title: FooterInfoItem;
+};
+
+export default async function FooterInfo() {
+  const data = await getWidgetData<FooterInfoType>({ slug: 'footer-info' });
+
+  return (
+    <div className="flex flex-col w-full mb-4 pb-4 text-xs border-b md:border-b-0 md:pb-0 md:mb-0 md:w-3/12 lg:w-1/6 md:pr-7">
+      <div className="flex items-center mb-8">
+        <div className="mr-3">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="42"
+            height="42"
+            viewBox="0 0 42 42"
+          >
+            <defs>
+              <filter id="t1e4dv4wva">
+                <feColorMatrix
+                  in="SourceGraphic"
+                  values="0 0 0 0 0.816000 0 0 0 0 0.169000 0 0 0 0 0.184000 0 0 0 1.000000 0"
+                />
+              </filter>
+            </defs>
+            <g fill="none" fillRule="evenodd">
+              <g>
+                <g
+                  filter="url(#t1e4dv4wva)"
+                  transform="translate(-84 -1211) translate(0 1143)"
+                >
+                  <g>
+                    <path
+                      fill="#d02b2f"
+                      d="M25.915 19.945c-3.562 0-6.449 2.937-6.449 6.559 0 3.622 2.887 6.558 6.45 6.558 3.56 0 6.448-2.936 6.448-6.558s-2.887-6.559-6.449-6.559zm11 11.885c-1.959 4.176-6.147 7.062-11 7.062-6.728 0-12.181-5.546-12.181-12.388s5.453-12.389 12.181-12.389c.77 0 1.52.076 2.25.214L21 0 0 42h42l-5.085-10.17z"
+                      transform="translate(84 68)"
+                    />
+                  </g>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </div>
+
+        <span className="text-2xl font-medium leading-6 uppercase">
+          <div
+            dangerouslySetInnerHTML={{
+              __html: `${data?.attributes?.title?.value}`
+            }}
+          />
+        </span>
+      </div>
+
+      <div className="md:mb-10">{data?.attributes?.description?.value}</div>
+
+      <div className="font-medium underline">
+        {data?.attributes?.button_link && (
+          <Link href={data?.attributes?.button_link?.value}>
+            {data?.attributes?.button_text?.value}
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}