@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,283 +0,0 @@
-import { yupResolver } from '@hookform/resolvers/yup';
-import {
-  Button,
-  FileInput,
-  Input,
-  LoaderSpinner,
-  Select,
-  Link
-} from '@theme/components';
-import { useSession } from 'next-auth/react';
-import { useEffect, useState } from 'react';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { useAppSelector } from '@akinon/next/redux/hooks';
-import {
-  useGetContactSubjectsQuery,
-  useGetOrdersQuery,
-  useSendContactMutation
-} from '@akinon/next/data/client/account';
-import { ContactFormType } from '@akinon/next/types';
-import * as yup from 'yup';
-import { useLocalization } from '@akinon/next/hooks';
-
-const contactFormSchema = (t) =>
-  yup.object().shape({
-    full_name: yup.string().required(t('account.contact.form.error.required')),
-    email: yup
-      .string()
-      .email(t('account.contact.form.error.email_valid'))
-      .required(t('account.contact.form.error.required')),
-    phone: yup
-      .string()
-      .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
-      .length(11, t('account.contact.form.error.phone_length'))
-      .required(t('account.contact.form.error.required')),
-    subject: yup.string().required(t('account.contact.form.error.required')),
-    message: yup
-      .string()
-      .required(t('account.contact.form.error.required'))
-      .min(10, t('account.contact.form.error.message_length'))
-      .label('message'),
-    order: yup
-      .string()
-      .nullable()
-      .notRequired()
-      .when('subject', {
-        is: (value) => value === '2',
-        then: yup.string().required(t('account.contact.form.error.required'))
-      })
-  });
-
-const ContactForm = () => {
-  const { t } = useLocalization();
-  const { data: session, status } = useSession();
-
-  const filteredOrders = [
-    { label: t('account.contact.form.order.placeholder'), value: '' }
-  ];
-  const filteredSubjects = [
-    { label: t('account.contact.form.subject.placeholder'), value: '' }
-  ];
-  const [selectedSubject, setSelectedSubject] = useState(null);
-  const { user_phone_format } = useAppSelector((state) => state.config);
-
-  const {
-    data: contactSubject,
-    isLoading: subjectLoading,
-    isSuccess: subjectSuccess
-  } = useGetContactSubjectsQuery();
-
-  const {
-    data: orders,
-    isLoading: ordersLoading,
-    isSuccess: ordersSuccess
-  } = useGetOrdersQuery(
-    {},
-    {
-      skip: status === 'unauthenticated' || status === 'loading'
-    }
-  );
-
-  const [sendContact, { isSuccess: formSuccess }] = useSendContactMutation();
-
-  if (ordersSuccess) {
-    orders?.results?.map((item) => {
-      filteredOrders.push({ label: item.number, value: item.id.toString() });
-    });
-  }
-
-  if (subjectSuccess) {
-    contactSubject
-      ?.filter((item) => {
-        if (status === 'unauthenticated') {
-          return !item.is_order_needed;
-        }
-
-        return item;
-      })
-      .forEach((item) => {
-        filteredSubjects.push({ label: item.text, value: item.id });
-      });
-  }
-
-  const {
-    register,
-    reset,
-    handleSubmit,
-    control,
-    formState: { errors }
-  } = useForm<ContactFormType>({
-    resolver: yupResolver(contactFormSchema(t))
-  });
-
-  const onSubmit: SubmitHandler<ContactFormType> = (data) => {
-    sendContact(data);
-  };
-
-  const handleChange = (e) => {
-    setSelectedSubject(e.target.value);
-  };
-
-  useEffect(() => {
-    reset({
-      full_name:
-        session?.user?.firstName && session?.user?.lastName
-          ? `${session?.user?.firstName} ${session?.user?.lastName}`
-          : '',
-      email: session?.user?.email,
-      phone: session?.user?.phone
-    });
-  }, [session, reset]);
-
-  return (
-    <div className="flex-1">
-      <div className="bg-gray-150 p-4 lg:p-8">
-        <h2 className="text-3xl text-center mb-5">
-          {t('account.contact.header.title')}
-        </h2>
-        <p className="text-center">{t('account.contact.header.subtitle')}</p>
-      </div>
-      <div className="flex flex-col lg:flex-row">
-        {formSuccess ? (
-          <div>
-            <div className="border border-gray-500 mt-5 p-6 lg:px-24 lg:py-10 lg:w-[670px]">
-              <h3 className="text-3xl mb-5">
-                {t('account.contact.form.success.title')}
-              </h3>
-              <p className="text-sm mb-4">
-                {t('account.contact.form.success.description')}
-              </p>
-              <Link href={'/'} className="underline">
-                {t('account.contact.form.success.button')}
-              </Link>
-            </div>
-          </div>
-        ) : (
-          <form
-            onSubmit={handleSubmit(onSubmit)}
-            className="border border-gray-500 mt-5 p-6 lg:px-24 lg:py-10 lg:w-[670px]"
-          >
-            <div className="mb-5">
-              <Input
-                label={t('account.contact.form.full_name.placeholder')}
-                className="mb-1"
-                {...register('full_name')}
-                error={errors.full_name}
-                required
-              />
-            </div>
-            <div className="mb-5">
-              <Input
-                label={t('account.contact.form.email.placeholder')}
-                type="email"
-                className="mb-1"
-                {...register('email')}
-                error={errors.email}
-                required
-              />
-            </div>
-            <div className="mb-5">
-              <Input
-                label={t('account.contact.form.phone.placeholder')}
-                type="tel"
-                className="mb-1"
-                format={user_phone_format.replace(/\9/g, '#')}
-                mask="_"
-                allowEmptyFormatting={true}
-                control={control}
-                {...register('phone')}
-                error={errors.phone}
-                required
-              />
-            </div>
-
-            <div className="mb-5 relative">
-              {subjectLoading && <LoaderSpinner />}
-              {subjectSuccess && (
-                <>
-                  <Select
-                    className="w-full mb-1 border-gray-500 text-sm"
-                    options={filteredSubjects}
-                    {...register('subject')}
-                    error={errors.subject}
-                    onChange={handleChange}
-                    label={t('account.contact.form.subject.title')}
-                    required
-                  />
-                </>
-              )}
-            </div>
-
-            {selectedSubject === '2' && (
-              <div className="mb-5 relative">
-                {ordersLoading && <LoaderSpinner />}
-                {ordersSuccess && (
-                  <>
-                    <Select
-                      className="w-full mb-1 border-gray-500 text-sm"
-                      options={filteredOrders}
-                      {...register('order')}
-                      error={errors.order}
-                      label={t('account.contact.form.order.title')}
-                      required
-                    />
-                  </>
-                )}
-              </div>
-            )}
-
-            <label className="text-xs text-gray-800 mb-2 block">
-              {t('account.contact.form.message.title')}{' '}
-              <span className="text-secondary">*</span>
-            </label>
-            <textarea
-              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"
-              {...register('message')}
-            />
-            {errors.message && (
-              <div className="text-sm text-error">{errors.message.message}</div>
-            )}
-            <label className="text-xs text-gray-800 mb-2 block">
-              {t('account.contact.form.file.title')}
-            </label>
-            <FileInput className="w-full mb-5" title="test" />
-            <Button type="submit" className="w-full font-medium">
-              {t('account.contact.form.submit_button')}
-            </Button>
-          </form>
-        )}
-
-        <div className="my-6 lg:ml-8">
-          <h2 className="text-3xl mb-4">
-            {' '}
-            {t('account.contact.address_title')}
-          </h2>
-          <div className="mb-4">
-            <h3 className="font-medium text-sm">London</h3>
-            <p className="text-sm">7 Bell Yard, London, WC2A 2JR</p>
-            <p className="text-sm">+44 20 3740 62 63</p>
-          </div>
-          <div className="mb-4">
-            <h3 className="font-medium text-sm">İstanbul</h3>
-            <p className="text-sm">YTU Davutpasa Teknopark A1 Z10</p>
-            <p className="text-sm">+90 212 483 72 45</p>
-          </div>
-          <div className="mb-4">
-            <h3 className="font-medium text-sm">Dubai</h3>
-            <p className="text-sm">Level 21 Al Habtoor Business Tower</p>
-            <p className="text-sm">+971 4275 6336</p>
-          </div>
-          <div className="mb-4">
-            <h3 className="font-medium text-sm">Athens</h3>
-            <p className="text-sm">Averof 18a, Chalandri</p>
-            <p className="text-sm">+30 21 1411 6000</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ContactForm;

package/app-template/src/views/account/content-header.tsx

@@ -1,52 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Select } from '@theme/components';
-import clsx from 'clsx';
-import { ROUTES } from '@theme/routes';
-import { useRouter, useLocalization } from '@akinon/next/hooks';
-
-interface Props {
-  orders: Array<any>;
-}
-
-export const ContentHeader = (props: Props) => {
-  const { orders } = props;
-  const { t } = useLocalization();
-  const [selectedOrder, setSelectedOrder] = useState(orders[0]?.value);
-  const router = useRouter();
-
-  const handleChange = (e) => {
-    setSelectedOrder(e.target.value);
-  };
-
-  const handleClick = () => {
-    router.push(`${ROUTES.ACCOUNT_ORDERS}/${selectedOrder}`);
-  };
-
-  const isButtonDisabled = orders.length < 1;
-
-  return (
-    <div className="bg-gray-150 flex flex-col items-center justify-center p-6 w-full mb-12 md:flex-row">
-      <h3 className="text-2xl	mb-4 md:mb-0 md:mr-4 xl:text-3xl">
-        {t('account.base.widgets.order.title')}
-      </h3>
-      <Select
-        onChange={handleChange}
-        className="w-full mb-4 md:mb-0 md:w-56 md:mr-4 text-xs"
-        options={orders}
-        data-testid="account-orders-header-select"
-      ></Select>
-      <Button
-        className={clsx(
-          'w-full md:w-56',
-          isButtonDisabled &&
-            'hover:bg-black hover:text-white disabled:opacity-75'
-        )}
-        onClick={handleClick}
-        data-testid="account-orders-header-button"
-        disabled={isButtonDisabled}
-      >
-        {t('account.base.widgets.order.button')}
-      </Button>
-    </div>
-  );
-};

package/app-template/src/views/account/faq/faq-footer.tsx

@@ -1,30 +0,0 @@
-'use client';
-
-import { Link } from '@theme/components';
-import React from 'react';
-import { ROUTES } from '@theme/routes';
-import { Trans } from '@akinon/next/components/trans';
-
-export function FaqFooter() {
-  const LinkText = (props) => {
-    return (
-      <Link {...props} href={props.href || '#'} className="underline">
-        {props.title}
-      </Link>
-    );
-  };
-
-  return (
-    <div className="text-sm mt-6">
-      <Trans
-        i18nKey="account.faq.footer.info"
-        components={{
-          ContactLink: (
-            <LinkText href={ROUTES.ACCOUNT_CONTACT} title="contact us" />
-          ),
-          Faq: <LinkText href={ROUTES.ACCOUNT_FAQ} title="FAQ" />
-        }}
-      />
-    </div>
-  );
-}

package/app-template/src/views/account/faq/faq-search.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { Icon, Input } from '@theme/components';
-import React from 'react';
-import { useLocalization } from '@akinon/next/hooks';
-
-interface Props {
-  handleChange: (e) => void;
-  searchKey?: string;
-}
-
-export function FaqSearch(props: Props) {
-  const { handleChange, searchKey } = props;
-  const { t } = useLocalization();
-
-  return (
-    <div className="bg-gray-150 flex flex-col items-center justify-center p-6 w-full">
-      <h3 className="text-2xl	mb-4 md:mb-0 md:mr-4 xl:text-3xl">
-        {t('account.faq.header.title')}
-      </h3>
-
-      <div className="w-full flex items-center justify-between bg-white px-6 py-2 rounded-3xl md:mt-5 lg:w-4/12 lg:mt-2">
-        <div className="w-full">
-          <Input
-            className="w-full h-10 border-none placeholder:text-black text-base"
-            placeholder={t('account.faq.header.button.placeholder').toString()}
-            value={searchKey}
-            onChange={handleChange}
-          />
-        </div>
-        <Icon name="search" size={20} className="fill-primary ml-1" />
-      </div>
-    </div>
-  );
-}

package/app-template/src/views/account/faq/faq-tabs.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import { Accordion, LoaderSpinner, TabPanel, Tabs } from '@theme/components';
-import React from 'react';
-import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
-
-interface Props {
-  searchKey?: string;
-}
-
-export function FaqTabs(props: Props) {
-  const { searchKey } = props;
-  const { data, isLoading } = useGetWidgetQuery('faq');
-
-  if (isLoading) {
-    return <LoaderSpinner className="mt-4" />;
-  }
-
-  return (
-    <div className="px-4 py-6 border border-gray-500 mb-5 space-y-3 lg:px-8 lg:py-10 lg:my-4">
-      <Tabs>
-        {data?.attributes?.faq_categories?.map((item, index) => (
-          <TabPanel key={index} title={item.value.category}>
-            <div key={index}>
-              <div className="text-lg font-medium text-black-700 mb-4">
-                {item.value.category}
-              </div>
-
-              {data?.attributes?.faq_contents
-                ?.filter(
-                  (faq) =>
-                    faq.value.content.toLocaleLowerCase().includes(searchKey) ||
-                    faq.value.title.toLocaleLowerCase().includes(searchKey)
-                )
-                .map((faq, index) => {
-                  if (faq.value.category == item.value.category_id) {
-                    return (
-                      <Accordion title={faq.value.title} key={index}>
-                        <div
-                          dangerouslySetInnerHTML={{
-                            __html: faq.value.content
-                          }}
-                        />
-                      </Accordion>
-                    );
-                  }
-                })}
-            </div>
-          </TabPanel>
-        ))}
-      </Tabs>
-    </div>
-  );
-}

package/app-template/src/views/account/faq/index.ts

@@ -1,3 +0,0 @@
-export * from './faq-search';
-export * from './faq-tabs';
-export * from './faq-footer';

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

@@ -1,191 +0,0 @@
-import { useGetProductByPkQuery } from '@akinon/next/data/client/product';
-import { useRemoveFavoriteMutation } from '@akinon/next/data/client/wishlist';
-import { useAddProductToBasket } from '../../hooks';
-import clsx from 'clsx';
-import { FavoriteItem as FavoriteItemType } from '@akinon/next/types';
-import {
-  Price,
-  Button,
-  Icon,
-  Select,
-  Skeleton,
-  SkeletonWrapper,
-  Link
-} from '@theme/components';
-import { useLocalization } from '@akinon/next/hooks';
-import { Image } from '@akinon/next/components/image';
-import { useState } from 'react';
-interface Props {
-  item: FavoriteItemType;
-  index: number;
-}
-
-// item.produt is the product come from the favorites endpoint
-// data.product is the product come from the product endpoint
-// these are different because the favorites endpoint does not have the product variant and selected variants etc.
-
-export const FavoriteItem = (props: Props) => {
-  const { t } = useLocalization();
-  const { item, index } = props;
-  const [selectedProduct, setProduct] = useState(item.product);
-  const { data, isLoading, isSuccess } = useGetProductByPkQuery(
-    selectedProduct.pk
-  );
-  const [removeFavorite, { isLoading: isRemoveFavoriteLoading }] =
-    useRemoveFavoriteMutation();
-  const [addProductToBasket, { isLoading: isAddProductToBasketLoading }] =
-    useAddProductToBasket();
-
-  const handleOnClick = (selectedProduct, favoriteProduct) => {
-    if (
-      favoriteProduct.product.attributes.color ===
-        selectedProduct.attributes.color ||
-      favoriteProduct.product.pk === selectedProduct.pk
-    )
-      removeFavorite(favoriteProduct.pk);
-
-    addProductToBasket({
-      product: selectedProduct.pk,
-      quantity: 1,
-      attributes: {}
-    });
-  };
-
-  return (
-    <div className="w-1/2 flex flex-col mb-8 px-3 lg:w-1/3">
-      <div className="relative mb-3 h-full flex items-center">
-        <Link href={selectedProduct.absolute_url} className="w-full h-full">
-          {selectedProduct.productimage_set[0] ? (
-            <Image
-              src={selectedProduct.productimage_set[0]?.image}
-              alt={selectedProduct.name}
-              aspectRatio={192 / 280}
-              fill
-              crop="center"
-              sizes="(min-width: 425px) 216px,
-              (min-width: 475px) 264px,
-              (min-width: 768px) 356px,
-              (min-width: 1024px) 212px,
-              (min-width: 1170px) 260px,
-              (min-width: 1370px) 352px, 192px"
-            />
-          ) : (
-            <Image
-              src="/noimage.jpg"
-              fill
-              aspectRatio={192 / 280}
-              sizes="(min-width: 425px) 216px,
-              (min-width: 475px) 264px,
-              (min-width: 768px) 356px,
-              (min-width: 1024px) 212px,
-              (min-width: 1170px) 260px,
-              (min-width: 1370px) 352px, 192px"
-              alt={t('account.base.no_image')}
-              className="object-cover"
-            />
-          )}
-        </Link>
-
-        <Icon
-          name="close"
-          size={14}
-          onClick={() => removeFavorite(item.pk)}
-          className={clsx(
-            'absolute top-4 right-4 cursor-pointer',
-            isRemoveFavoriteLoading
-              ? 'pointer-events-none hover:cursor-wait' // TODO: Cursors not working fix!
-              : 'hove:cursor-pointer'
-          )}
-          data-testid="favorites-remove"
-        />
-      </div>
-
-      <div
-        data-testid={`favorites-variant-${selectedProduct.pk}-${index}`}
-        className="flex flex-1 flex-col justify-between"
-      >
-        <div className="text-sm">
-          <Link
-            href={selectedProduct.absolute_url}
-            data-testid="favorites-product-name"
-          >
-            {selectedProduct.name}
-          </Link>
-        </div>
-
-        <div>
-          {parseFloat(selectedProduct.retail_price) >
-            parseFloat(selectedProduct.price) && (
-            <span className="font-normal line-through mr-3">
-              <Price value={selectedProduct.retail_price} />
-            </span>
-          )}
-          <span className="font-semibold">
-            <Price value={selectedProduct.price} />
-          </span>
-        </div>
-
-        {isLoading && (
-          <SkeletonWrapper className="gap-2">
-            <SkeletonWrapper>
-              <Skeleton className="w-full h-10 mt-2" />
-              <Skeleton className="w-full h-10 mt-2" />
-            </SkeletonWrapper>
-            <Skeleton className="w-full h-10" />
-          </SkeletonWrapper>
-        )}
-
-        {isSuccess && (
-          <div className="flex flex-col gap-2">
-            <div className="flex flex-col">
-              {data.variants.map((variant, i) => {
-                const variantOptions = variant.options
-                  .filter((option) => option.is_selectable)
-                  .map((option) => ({
-                    is_selected: option.is_selected,
-                    label: option.label,
-                    value: option.value
-                  }));
-
-                return (
-                  <Select
-                    className="w-full mt-2"
-                    key={i}
-                    options={variantOptions}
-                    defaultValue={
-                      selectedProduct.attributes[variant.attribute_key]
-                    }
-                    onChange={(e) => {
-                      const selectedProduct = variant.options.find(
-                        ({ label }) => label === e.currentTarget.value
-                      )?.product;
-
-                      setProduct(selectedProduct);
-                    }}
-                  />
-                );
-              })}
-            </div>
-
-            <Button
-              disabled={
-                !selectedProduct.in_stock || isAddProductToBasketLoading
-              }
-              appearance="outlined"
-              type="submit"
-              className={clsx(
-                'w-full',
-                !selectedProduct.in_stock &&
-                  'hover:bg-transparent hover:text-black'
-              )}
-              onClick={() => handleOnClick(selectedProduct, item)}
-              data-testid="favorites-add-cart"
-            >
-              {t('account.my_wishlist.submit_button')}
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};