@akinon/projectzero 2.0.0-beta.9 → 2.0.1

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

@@ -79,7 +79,10 @@ const ContactForm = () => {
     }
   );
 
-  const [sendContact, { isSuccess: formSuccess }] = useSendContactMutation();
+  const [
+    sendContact,
+    { isSuccess: formSuccess, isLoading: isSubmitting, error: submitError }
+  ] = useSendContactMutation();
 
   if (ordersSuccess) {
     orders?.results?.map((item) => {
@@ -111,7 +114,7 @@ const ContactForm = () => {
     resolver: yupResolver(contactFormSchema(t))
   });
 
-  const onSubmit: SubmitHandler<ContactFormType> = (data, event) => {
+  const onSubmit: SubmitHandler<ContactFormType> = (data) => {
     const formData = new FormData();
 
     Object.keys(data ?? {}).forEach((key) => {
@@ -122,6 +125,9 @@ const ContactForm = () => {
       }
     });
 
+    formData.append('subject', 'tdsadasdsa');
+    formData.append('order', '2222');
+
     sendContact(formData);
   };
 
@@ -141,153 +147,164 @@ const ContactForm = () => {
   }, [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">
+    <div className="max-w-lg mx-auto">
+      <div className="flex flex-col text-black-750">
         {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>
+            <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>
         ) : (
-          <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>
+              <h2 className="text-[40px] mb-8">
+                {' '}
+                {t('account.contact.header.title')}
+              </h2>
+
+              <div className="mb-16">
+                <h3 className="mb-8 font-bold">{t('account.contact.hours')}</h3>
+                <p> Monday – Friday: 10:00am – 7:30pm</p>
+                <p>Saturday: 10:00am – 6:00pm</p>
+                <p>Sunday: 11:00am – 6:00pm</p>
+              </div>
             </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')}
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="flex flex-col gap-4"
+            >
+              <div className="flex flex-col gap-4 lg:flex-row">
+                <div className="lg:w-1/2">
+                  <Input
+                    placeholder={t(
+                      'account.contact.form.full_name.placeholder'
+                    )}
+                    {...register('full_name')}
+                    error={errors.full_name}
+                    className="h-12"
                     required
                   />
-                </>
-              )}
-            </div>
+                </div>
+
+                <div className="lg:w-1/2">
+                  <Input
+                    placeholder={t('account.contact.form.email.placeholder')}
+                    type="email"
+                    {...register('email')}
+                    className="h-12"
+                    error={errors.email}
+                    required
+                  />
+                </div>
+              </div>
 
-            {selectedSubject === '2' && (
-              <div className="mb-5 relative">
-                {ordersLoading && <LoaderSpinner />}
-                {ordersSuccess && (
+              <div>
+                <Input
+                  placeholder={t('account.contact.form.phone.placeholder')}
+                  type="tel"
+                  className="h-12"
+                  format={user_phone_format.replace(/9/g, '#')}
+                  mask="_"
+                  allowEmptyFormatting={true}
+                  control={control}
+                  {...register('phone')}
+                  error={errors.phone}
+                  required
+                />
+              </div>
+
+              <div className="relative">
+                {subjectLoading && <LoaderSpinner />}
+                {subjectSuccess && (
                   <>
                     <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')}
+                      className="w-full h-12 border-gray-500 text-sm"
+                      options={filteredSubjects}
+                      {...register('subject')}
+                      error={errors.subject}
+                      onChange={handleChange}
                       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-hidden focus:border-black hover:border-black"
-              rows={7}
-              name="message"
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore - Fix TS error
-              {...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 name="file" title="file" {...register('file')} />
-            <Button type="submit" className="w-full font-medium mt-4">
-              {t('account.contact.form.submit_button')}
-            </Button>
-          </form>
-        )}
+              {selectedSubject === '2' && (
+                <div className="relative">
+                  {ordersLoading && <LoaderSpinner />}
+                  {ordersSuccess && (
+                    <>
+                      <Select
+                        className="w-full h-12 border-gray-500 text-sm"
+                        options={filteredOrders}
+                        {...register('order')}
+                        error={errors.order}
+                        required
+                      />
+                    </>
+                  )}
+                </div>
+              )}
 
-        <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>
+              <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"
+                placeholder={t('account.contact.form.message.title')}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore - Fix TS error
+                {...register('message')}
+              />
+              {errors.message && (
+                <div className="text-sm text-error">
+                  {errors.message.message}
+                </div>
+              )}
+
+              <FileInput
+                name="file"
+                title="file"
+                buttonClassName="w-full h-12"
+                {...register('file')}
+              />
+              <Button
+                type="submit"
+                className="w-fit mt-4 h-12 px-8"
+                disabled={isSubmitting}
+              >
+                {isSubmitting
+                  ? t('account.contact.form.submitting')
+                  : t('account.contact.form.submit_button')}
+              </Button>
+
+              {submitError && (
+                <div className="text-sm text-error mt-2">
+                  {'data' in submitError &&
+                  submitError.data &&
+                  typeof submitError.data === 'object'
+                    ? Object.entries(submitError.data).map(
+                        ([field, messages]) => (
+                          <div key={field}>
+                            {Array.isArray(messages)
+                              ? messages.join(', ')
+                              : String(messages)}
+                          </div>
+                        )
+                      )
+                    : t('account.contact.form.error.general')}
+                </div>
+              )}
+            </form>
+          </>
+        )}
       </div>
     </div>
   );

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

@@ -31,14 +31,15 @@ export const ContentHeader = (props: Props) => {
       </h3>
       <Select
         onChange={handleChange}
-        className="w-full mb-4 bg-white md:mb-0 md:w-56 md:mr-4 text-xs"
+        className="w-full mb-4 md:mb-0 md:w-56 text-xs"
         options={orders}
         data-testid="account-orders-header-select"
       ></Select>
       <Button
         className={clsx(
-          'w-full md:w-56',
-          isButtonDisabled && 'hover:bg-black/75 hover:text-white'
+          'w-full md:w-56 md:ms-4',
+          isButtonDisabled &&
+            'hover:bg-black hover:text-white disabled:opacity-75'
         )}
         onClick={handleClick}
         data-testid="account-orders-header-button"

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

@@ -3,6 +3,7 @@
 import { Accordion, LoaderSpinner, TabPanel, Tabs } from '@theme/components';
 import React from 'react';
 import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+import { useLocalization } from '@akinon/next/hooks';
 
 interface Props {
   searchKey?: string;
@@ -11,6 +12,7 @@ interface Props {
 export function FaqTabs(props: Props) {
   const { searchKey } = props;
   const { data, isLoading } = useGetWidgetQuery('faq');
+  const { locale } = useLocalization();
 
   if (isLoading) {
     return <LoaderSpinner className="mt-4" />;
@@ -29,8 +31,12 @@ export function FaqTabs(props: Props) {
               {data?.attributes?.faq_contents
                 ?.filter(
                   (faq) =>
-                    faq.value.content.toLocaleLowerCase().includes(searchKey) ||
-                    faq.value.title.toLocaleLowerCase().includes(searchKey)
+                    faq.value.content
+                      .toLocaleLowerCase(locale)
+                      .includes(searchKey) ||
+                    faq.value.title
+                      .toLocaleLowerCase(locale)
+                      .includes(searchKey)
                 )
                 .map((faq, index) => {
                   if (faq.value.category == item.value.category_id) {

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

@@ -91,7 +91,7 @@ export const FavoriteItem = (props: Props) => {
           size={14}
           onClick={() => removeFavorite(item.pk)}
           className={clsx(
-            'absolute top-4 right-4 cursor-pointer',
+            'absolute top-4 right-4 cursor-pointer p-1 drop-shadow-[1px_2px_0px_rgb(255,255,255)]',
             isRemoveFavoriteLoading
               ? 'hover:cursor-wait'
               : 'hover:cursor-pointer'

package/app-template/src/views/account/order.tsx

@@ -13,7 +13,7 @@ export const Order = (props) => {
     .reverse()
     .join(' ');
 
-  const orderStatus = getOrderStatus(props.status.value.toString(), t);
+  const orderStatus = getOrderStatus(props?.status?.value?.toString(), t);
 
   return (
     <div className="border border-gray px-5 py-4 text-sm mb-4 last:mb-0">
@@ -58,30 +58,32 @@ export const Order = (props) => {
 
         <div className="w-full flex flex-col justify-between mt-6 mb-2 order-3 md:items-center md:flex-row md:order-none md:gap-20 lg:gap-40">
           <ul className="flex flex-wrap gap-3.5 mb-6 items-center md:mb-0">
-            {props.orderitem_set.slice(0, 3).map((item, index) => (
+            {props?.orderitem_set?.slice(0, 3).map((item, index) => (
               // TODO: Static image will change (TR)
-              <li className="shrink-0" key={index}>
+              <li className="flex-shrink-0" key={index}>
                 <Image
-                  src={item.product.image ? item.product.image : '/noimage.jpg'}
-                  alt={item.product.name}
+                  src={
+                    item?.product?.image ? item.product.image : '/noimage.jpg'
+                  }
+                  alt={item?.product?.name}
                   width={64}
                   height={96}
                 />
               </li>
             ))}
-            {props.orderitem_set.length > 3 && (
-              <div>+ {props.orderitem_set.length - 3}</div>
+            {props?.orderitem_set?.length > 3 && (
+              <div>+ {props?.orderitem_set?.length - 3}</div>
             )}
           </ul>
 
-          <span className={orderStatus.className}>{orderStatus.label}</span>
+          <span className={orderStatus?.className}>{orderStatus?.label}</span>
         </div>
 
         <div
           className="order-2 flex items-end md:order-none"
           data-testid="account-orders-count"
         >
-          {props.orderitem_set.length} {t('account.my_orders.order.items')}
+          {props?.orderitem_set?.length} {t('account.my_orders.order.items')}
         </div>
       </div>
     </div>

package/app-template/src/views/account/orders/order-cancellation-item.tsx

@@ -45,7 +45,7 @@ export const OrderCancellationItem = ({
             onClick={handleClick}
           />
         )}
-        <div className="shrink-0">
+        <div className="flex-shrink-0">
           <Link href={item.product.absolute_url}>
             <Image
               src={item.product.image ? item.product.image : '/noimage.jpg'}

package/app-template/src/views/account/orders/order-detail-header.tsx

@@ -21,7 +21,7 @@ export const OrderDetailHeader = ({ title, order, children }: Props) => {
         <div>
           <span>{t('account.my_orders.detail.order_number')}</span>:{' '}
           <span data-testid="account-orders-return-order-id">
-            {order.number}
+            {order?.number}
           </span>
         </div>