@akinon/projectzero 1.32.0 → 1.33.0

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

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

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

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

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

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

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

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

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