@akinon/projectzero 2.0.0-beta.2 → 2.0.0-beta.20

package/app-template/src/utils/styles.ts

@@ -0,0 +1,71 @@
+export type ResponsiveSize = 'mobile' | 'tablet' | 'desktop';
+
+const breakpointOrder: ResponsiveSize[] = ['mobile', 'tablet', 'desktop'];
+
+export function getResponsiveStyle(
+  style: Record<string, Record<string, string>> = {},
+  currentBreakpoint: ResponsiveSize,
+  context?: 'slider-item'
+): Record<string, string> {
+  let result = style.default ? { ...style.default } : {};
+  let largestDefinedBreakpoint: ResponsiveSize | undefined;
+
+  for (let i = 0; i < breakpointOrder.length; i++) {
+    const breakpoint = breakpointOrder[i];
+
+    if (breakpoint === currentBreakpoint) break;
+    if (style[breakpoint] && Object.keys(style[breakpoint]).length > 0) {
+      largestDefinedBreakpoint = breakpoint;
+      break;
+    }
+  }
+
+  if (largestDefinedBreakpoint) {
+    const styles = Object.entries(style[largestDefinedBreakpoint]).reduce(
+      (acc, [key, value]) => {
+        if (
+          context === 'slider-item' &&
+          key === 'display' &&
+          value === 'none'
+        ) {
+          return acc;
+        }
+        acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, string>
+    );
+
+    result = {
+      ...result,
+      ...styles
+    };
+  }
+
+  if (
+    style[currentBreakpoint] &&
+    Object.keys(style[currentBreakpoint]).length > 0
+  ) {
+    const styles = Object.entries(style[currentBreakpoint]).reduce(
+      (acc, [key, value]) => {
+        if (
+          context === 'slider-item' &&
+          key === 'display' &&
+          value === 'none'
+        ) {
+          return acc;
+        }
+        acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, string>
+    );
+
+    result = {
+      ...result,
+      ...styles
+    };
+  }
+
+  return result;
+}

package/app-template/src/utils/variant-validation.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Trans } from '@akinon/next/components/trans';
+import { VariantType } from '@akinon/next/types';
+
+export const isVariantSelectionComplete = (variants: VariantType[]): boolean => {
+  return variants?.every((variant) =>
+    variant?.options.some((opt) => opt.is_selected)
+  );
+};
+
+export const getUnselectedVariant = (variants: VariantType[]): VariantType | undefined => {
+  return variants.find((variant) =>
+    variant.options.every((opt) => !opt.is_selected)
+  );
+};
+
+export const createVariantErrorMessage = (unselectedVariant: VariantType) => {
+  const TransComponent = Trans as any;
+  return React.createElement(
+    TransComponent,
+    {
+      i18nKey: "product.please_select_variant",
+      components: {
+        VariantName: React.createElement('span', {}, unselectedVariant.attribute_name)
+      }
+    }
+  );
+};
+
+export const validateVariantSelection = (variants: VariantType[]) => {
+  const unselectedVariant = getUnselectedVariant(variants);
+  
+  if (unselectedVariant) {
+    return {
+      isValid: false,
+      errorMessage: createVariantErrorMessage(unselectedVariant)
+    };
+  }
+
+  return { isValid: true, errorMessage: null };
+};

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

@@ -259,23 +259,25 @@ export const AddressForm = (props: Props) => {
       {/* TODO: Fix select and textarea components */}
 
       <Select
-        className="w-full border-gray-500 text-sm mt-2"
+        className="w-full border-gray-500 text-sm"
         options={countryOptions}
         {...register('country')}
         error={errors.country}
         data-testid="address-form-country"
         label={t('account.address_book.form.country.title')}
+        labelClassName="mb-3"
         required
       />
 
       {city && (
         <Select
-          className="w-full border-gray-500 text-sm mt-2"
+          className="w-full border-gray-500 text-sm"
           options={cityOptions}
           {...register('city')}
           error={errors.city}
           data-testid="address-form-city"
           label={t('account.address_book.form.province.title')}
+          labelClassName="mb-3"
           required
         />
       )}
@@ -283,24 +285,26 @@ export const AddressForm = (props: Props) => {
         <div className="flex gap-4">
           <div className="flex-1">
             <Select
-              className="w-full border-gray-500 text-sm mt-2"
+              className="w-full border-gray-500 text-sm"
               options={townshipOptions}
               {...register('township')}
               error={errors.township}
               data-testid="address-form-township"
               label={t('account.address_book.form.township.title')}
+              labelClassName="mb-3"
               required
             />
           </div>
           {district && (
             <div className="flex-1">
               <Select
-                className="w-full border-gray-500 text-sm mt-2"
+                className="w-full border-gray-500 text-sm"
                 options={districtOptions}
                 {...register('district')}
                 error={errors.district}
                 data-testid="address-form-district"
                 label={t('account.address_book.form.district.title')}
+                labelClassName="mb-3"
                 required
               />
             </div>

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,158 +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-none 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"
-              className="w-full mb-5"
-              {...register('file')}
-            />
-            <Button type="submit" className="w-full font-medium">
-              {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,13 +31,13 @@ export const ContentHeader = (props: Props) => {
       </h3>
       <Select
         onChange={handleChange}
-        className="w-full mb-4 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',
+          'w-full md:w-56 md:ms-4',
           isButtonDisabled &&
             'hover:bg-black hover:text-white disabled:opacity-75'
         )}

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="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

@@ -8,7 +8,8 @@ export const OrderCancellationItem = ({
   item,
   value,
   onChange,
-  selectOption
+  selectOption,
+  fileInput
 }) => {
   const { t } = useLocalization();
   const checkboxStatus =
@@ -38,7 +39,6 @@ export const OrderCancellationItem = ({
     <div className="flex flex-wrap justify-between border-gray border-b mb-4 pb-3">
       <div className="flex gap-3 mb-5 lg:mb-0">
         {checkboxStatus && (
-          // TODO: Static image will change (TR)
           <Checkbox
             className="m-auto"
             data-testid="account-orders-return-checkbox"
@@ -80,7 +80,7 @@ export const OrderCancellationItem = ({
           </div>
         </div>
       </div>
-      <div className="flex flex-wrap justify-between w-full items-start lg:items-center lg:w-auto">
+      <div className="flex flex-wrap justify-between w-full items-start lg:items-center lg:w-80 gap-4">
         <div className="w-full flex flex-col lg:items-center lg:flex-row">
           {item.active_cancellation_request?.easy_return?.code && (
             <div className="flex items-center">
@@ -93,6 +93,7 @@ export const OrderCancellationItem = ({
 
           {selectOption}
         </div>
+        <div>{fileInput}</div>
       </div>
     </div>
   );

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>