@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,288 +0,0 @@
-'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

@@ -1,71 +0,0 @@
-'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

@@ -1,54 +0,0 @@
-'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

@@ -1,86 +0,0 @@
-'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

@@ -1,25 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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>
-  );
-}