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

package/app-template/src/types/widget.ts

@@ -0,0 +1,169 @@
+export type WidgetStyle = {
+  [breakpoint: string]: Record<string, string>;
+};
+
+export type WidgetParent = {
+  id: string;
+  type: 'container';
+  tag: string;
+  style: WidgetStyle;
+};
+
+export type ImageSizes = {
+  mobile?: string;
+  tablet?: string;
+  desktop?: string;
+  [key: string]: string | undefined;
+};
+
+export type WidgetAttribute = {
+  type:
+    | 'image'
+    | 'link'
+    | 'divider'
+    | 'icon'
+    | 'text'
+    | 'video'
+    | 'collection'
+    | 'container'
+    | 'slider'
+    | 'slider-item'
+    | string;
+  tag: string;
+  parentId: string;
+  value?: {
+    text?: string;
+    src?: string;
+    alt?: string;
+    href?: string;
+    title?: string;
+    target?: string;
+    url?: string;
+    type?: string;
+    width?: string;
+    height?: string;
+    autoplay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    sizes?: { [size: string]: string };
+    products?: Array<Product>;
+    limit?: number;
+    mobileSrc?: string;
+    tabletSrc?: string;
+    desktopSrc?: string;
+    mediaQueries?: {
+      mobile?: string;
+      tablet?: string;
+      desktop?: string;
+      [key: string]: string | undefined;
+    };
+  };
+  style: WidgetStyle;
+  insideCollection?: boolean;
+  containerId?: string;
+  instanceId?: string;
+  items?: number;
+  slidesToSlide?: number;
+  showDots?: string;
+  arrows?: string;
+  infinite?: string;
+  autoPlay?: string;
+  autoPlaySpeed?: number;
+  selectedSlideItem?: number;
+  sliderItems?: number;
+  slider?: any;
+};
+
+export type WidgetData = {
+  attributes: { [key: string]: WidgetAttribute };
+  name: string;
+  template: string;
+  slug: string;
+  parent?: WidgetParent;
+  children?: WidgetData[];
+};
+
+export type Product = {
+  absolute_url: string;
+  attribute_set: number;
+  attributes: {
+    [key: string]: any;
+  };
+  attributes_kwargs: any;
+  base_code: string;
+  basket_offers: Array<{
+    kwargs: { show_benefit_products: boolean };
+    label: string;
+    listing_kwargs: {
+      [key: string]: any;
+    };
+    pk: number;
+  }>;
+  currency_type: string;
+  data_source: null;
+  item_id?: string;
+  extra_attributes: {
+    [key: string]: any;
+  };
+  form_schema: null;
+  image?: string;
+  in_stock: boolean;
+  is_ready_to_basket: boolean;
+  name: string;
+  pk: number;
+  price: string;
+  price_type: string;
+  product_type: string;
+  productimage_set: Array<{
+    created_date: Date;
+    image: string;
+    order: number;
+    pk: number;
+    specialimage_set: Array<{
+      [key: string]: any;
+    }>;
+    status: string;
+  }>;
+  productvideo_set: Array<{
+    [key: string]: any;
+  }>;
+  retail_price: string;
+  sku: string;
+  stock: number;
+  unit_type: string;
+  created_date: string;
+  modified_date: string;
+  description?: string;
+  quantity: string;
+  extra_data: {
+    [key: string]: any;
+  };
+  [key: string]: any;
+};
+
+export interface WidgetContentProps {
+  widgetData: WidgetData;
+  skipParentWrapper?: boolean;
+  collectionData?: any[];
+  collectionLimit?: number;
+  selectedWidget?: any;
+  onWidgetClick?: (e: React.MouseEvent) => void;
+  designMode?: boolean;
+  responsive?: string;
+  draggable?: boolean;
+  onDragStart?: (e: React.DragEvent) => void;
+  onDragOver?: (e: React.DragEvent) => void;
+  onDragLeave?: (e: React.DragEvent) => void;
+  onDrop?: (e: React.DragEvent) => void;
+}
+
+export interface DynamicWidgetContainerProps {
+  onRender?: (widgetData: WidgetData) => void;
+  customRender?: (
+    widgetData: WidgetData
+  ) => React.ReactNode | typeof RENDER_NOTHING;
+  instanceId?: string;
+}
+
+export const RENDER_NOTHING = Symbol('RENDER_NOTHING');

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

@@ -0,0 +1,48 @@
+type Locale = 'en' | 'tr';
+
+const monthNamesByLocale: Record<Locale, string[]> = {
+  en: [
+    'JANUARY',
+    'FEBRUARY',
+    'MARCH',
+    'APRIL',
+    'MAY',
+    'JUNE',
+    'JULY',
+    'AUGUST',
+    'SEPTEMBER',
+    'OCTOBER',
+    'NOVEMBER',
+    'DECEMBER'
+  ],
+  tr: [
+    'OCAK',
+    'ŞUBAT',
+    'MART',
+    'NİSAN',
+    'MAYIS',
+    'HAZİRAN',
+    'TEMMUZ',
+    'AĞUSTOS',
+    'EYLÜL',
+    'EKİM',
+    'KASIM',
+    'ARALIK'
+  ]
+};
+
+export const formatDateToMonthYear = (
+  dateString: string,
+  locale: Locale = 'en'
+): string => {
+  try {
+    const date = new Date(dateString);
+    const monthNames = monthNamesByLocale[locale];
+    const month = monthNames[date.getUTCMonth()];
+    const year = date.getUTCFullYear();
+
+    return `${month} ${year}`;
+  } catch {
+    return dateString;
+  }
+};

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/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) => {
@@ -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-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" {...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>
   );