@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/app/[commerce]/[locale]/[currency]/account/profile/page.tsx

@@ -0,0 +1,399 @@
+'use client';
+
+import { yupResolver } from '@hookform/resolvers/yup';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { AccountProfileFormType } from '@akinon/next/types';
+import * as yup from 'yup';
+import {
+  Button,
+  Checkbox,
+  Input,
+  Modal,
+  Radio,
+  Select,
+  Link
+} from '@theme/components';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useEffect, useState } from 'react';
+import {
+  useUpdateProfileMutation,
+  useGetProfileInfoQuery
+} from '@akinon/next/data/client/account';
+import { ROUTES } from '@theme/routes';
+import { useLocalization } from '@akinon/next/hooks';
+import { Trans } from '@akinon/next/components/trans';
+
+const accountProfileFormSchema = (t) =>
+  yup.object().shape({
+    first_name: yup
+      .string()
+      .required(t('account.my_profile.form.required'))
+      .matches(
+        /^[a-zA-ZğüşöçıİĞÜŞÖÇ\s]+$/,
+        t('account.my_profile.form.error.name_match')
+      ),
+    last_name: yup
+      .string()
+      .required(t('account.my_profile.form.required'))
+      .matches(
+        /^[a-zA-ZğüşöçıİĞÜŞÖÇ\s]+$/,
+        t('account.my_profile.form.error.surname_match')
+      ),
+    birthdate: yup
+      .object()
+      .shape({
+        day: yup.number().required(t('account.my_profile.form.required')),
+        month: yup.number().required(t('account.my_profile.form.required')),
+        year: yup.number().required(t('account.my_profile.form.required'))
+      })
+      .test(
+        'isValidBirthdate',
+        t('account.my_profile.form.birth_date.error.not_valid'),
+
+        (value) => {
+          const { day, month, year } = value;
+          const date = new Date(`${year}-${month}-${day}`);
+
+          return date && date <= new Date();
+        }
+      ),
+    phone: yup
+      .string()
+      .transform((value: string) => value?.replace(/_/g, '').replace(/ /g, ''))
+      .length(11, t('account.my_profile.form.phone.error.not_valid'))
+      .required(t('account.my_profile.form.required')),
+    gender: yup.string().required(t('account.my_profile.form.required'))
+  });
+
+export default function Page() {
+  const { t } = useLocalization();
+  const { user_phone_format } = useAppSelector((state) => state.config);
+  const { data: profileInfo } = useGetProfileInfoQuery();
+  const [updateProfile] = useUpdateProfileMutation();
+
+  const [responseMessage, setResponseMessage] = useState({
+    title: '',
+    content: ''
+  });
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors }
+  } = useForm<AccountProfileFormType>({
+    resolver: yupResolver(accountProfileFormSchema(t))
+  });
+
+  const handleSuccess = () => {
+    setResponseMessage({
+      title: t('account.my_profile.form.success.title').toString(),
+      content: t('account.my_profile.form.success.description').toString()
+    });
+    setIsModalOpen(true);
+  };
+
+  const handleError = () => {
+    setResponseMessage({
+      title: t('account.my_profile.form.error.title').toString(),
+      content: t('account.my_profile.form.error.description').toString()
+    });
+    setIsModalOpen(true);
+  };
+
+  const handleModalClick = () => {
+    setIsModalOpen(false);
+  };
+
+  const onSubmit: SubmitHandler<AccountProfileFormType> = async (data) => {
+    const dateOfBirth = `${data.birthdate.year}-${data.birthdate.month}-${data.birthdate.day}`;
+
+    if ('birthdate' in data) {
+      delete data.birthdate;
+    }
+
+    updateProfile({
+      date_of_birth: dateOfBirth,
+      ...data
+    })
+      .unwrap()
+      .then(handleSuccess)
+      .catch(handleError);
+  };
+
+  const buildOptionDays = () => {
+    const days = Array.from({ length: 31 }, (_, index) => {
+      const day = (index + 1).toString().padStart(2, '0');
+      return { label: day, value: day };
+    });
+
+    return days;
+  };
+
+  const buildOptionMonths = () => {
+    const months = [
+      'january',
+      'february',
+      'march',
+      'april',
+      'may',
+      'june',
+      'july',
+      'august',
+      'september',
+      'october',
+      'november',
+      'december'
+    ];
+
+    const options = months.map((month, index) => {
+      const monthValue = (index + 1).toString().padStart(2, '0');
+      return {
+        label: t(`account.my_profile.form.months.${month}`),
+        value: monthValue
+      };
+    });
+
+    return options;
+  };
+
+  const buildOptionYears = () => {
+    const currentYear = new Date().getFullYear();
+    const minOffset = 0;
+    const maxOffset = 80;
+
+    const years = Array.from(
+      { length: maxOffset - minOffset + 1 },
+      (_, index) => {
+        const year = currentYear - index;
+        return { label: year, value: year };
+      }
+    );
+
+    return years;
+  };
+
+  useEffect(() => {
+    const todayDate = new Date().toISOString().slice(0, 10);
+
+    const {
+      first_name = '',
+      last_name = '',
+      phone = '',
+      gender = '',
+      email_allowed = false,
+      sms_allowed = false,
+      date_of_birth = todayDate
+    } = profileInfo || {};
+
+    const [year, month, day] =
+      date_of_birth?.split('-') ?? todayDate.split('-');
+
+    reset({
+      first_name,
+      last_name,
+      phone,
+      gender,
+      email_allowed,
+      sms_allowed,
+      birthdate: {
+        day,
+        month,
+        year
+      }
+    });
+  }, [profileInfo, reset]);
+
+  return (
+    <div>
+      <div className="p-6 bg-gray-150">
+        <h3 className="text-3xl text-center mb-5">
+          {t('account.my_profile.header.title')}
+        </h3>
+        <p className="text-center">{t('account.my_profile.header.subtitle')}</p>
+      </div>
+      <div className="flex flex-col lg:flex-row">
+        <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 flex flex-col gap-5 lg:flex-row lg:gap-x-7">
+            <Input
+              type="text"
+              label={t('account.my_profile.form.name.placeholder')}
+              className="w-full lg:w-56"
+              {...register('first_name')}
+              error={errors.first_name}
+              required
+            />
+            <Input
+              type="text"
+              label={t('account.my_profile.form.surname.placeholder')}
+              className="w-full lg:w-56"
+              {...register('last_name')}
+              error={errors.last_name}
+              required
+            />
+          </div>
+          <Input
+            name="email"
+            label={t('account.my_profile.form.email.placeholder')}
+            type="email"
+            value={profileInfo?.email ?? ''}
+            disabled
+            className="mb-5"
+            required
+          />
+          <div className="mb-5">
+            <Input
+              label={t('account.my_profile.form.phone.placeholder')}
+              type="tel"
+              format={user_phone_format.replace(/\9/g, '#')}
+              mask="_"
+              allowEmptyFormatting={true}
+              control={control}
+              {...register('phone')}
+              error={errors.phone}
+              required
+            />
+          </div>
+          <div className="mb-6">
+            <label className="text-xs text-gray-800 mb-2 block">
+              {t('account.my_profile.form.birth_date.title')}
+            </label>
+            <div className="flex flex-col items-center gap-2 sm:flex-row">
+              <div className="w-full sm:w-24">
+                <Select
+                  className="w-full border-gray-400 text-gray-800 bg-white"
+                  options={buildOptionDays()}
+                  {...register('birthdate.day')}
+                />
+              </div>
+              <div className="w-full sm:w-24">
+                <Select
+                  className="w-full border-gray-400 text-gray-800 bg-white"
+                  options={buildOptionMonths()}
+                  {...register('birthdate.month')}
+                />
+              </div>
+              <div className="w-full sm:w-24">
+                <Select
+                  className="w-full border-gray-400 text-gray-800 bg-white pr-0.5"
+                  options={buildOptionYears()}
+                  {...register('birthdate.year')}
+                />
+              </div>
+            </div>
+            {errors && (
+              <div className="mt-1 text-sm text-error">
+                {errors.birthdate?.message}
+              </div>
+            )}
+          </div>
+          <div className="mb-6">
+            <label className="text-xs text-gray-800 mb-3 block">
+              {t('account.my_profile.form.gender.title')}
+            </label>
+            <div className="flex flex-wrap gap-4">
+              <Radio
+                className="accent-primary"
+                name="gender"
+                value="female"
+                {...register('gender')}
+              >
+                {t('account.my_profile.form.gender.female')}
+              </Radio>
+              <Radio
+                className="accent-primary"
+                name="gender"
+                value="male"
+                {...register('gender')}
+              >
+                {t('account.my_profile.form.gender.male')}
+              </Radio>
+              <Radio
+                className="accent-primary"
+                name="gender"
+                value="none"
+                {...register('gender')}
+              >
+                {t('account.my_profile.form.gender.other')}
+              </Radio>
+            </div>
+            {errors.gender?.type === 'typeError' && (
+              <div className="text-sm text-error">
+                {t('account.my_profile.form.required')}
+              </div>
+            )}
+          </div>
+          <div className="mb-6">
+            <label className="text-xs text-gray-800 mb-3 block">
+              {t('account.my_profile.form.communication_channel.title')}
+            </label>
+            <div className="flex gap-6">
+              <Checkbox
+                className="accent-primary"
+                {...register('email_allowed')}
+              >
+                {t('account.my_profile.form.communication_channel.email')}
+              </Checkbox>
+              <Checkbox className="accent-primary" {...register('sms_allowed')}>
+                {t('account.my_profile.form.communication_channel.sms')}
+              </Checkbox>
+            </div>
+          </div>
+          <Button type="submit" className="w-full">
+            {t('account.my_profile.form.submit_button')}
+          </Button>
+        </form>
+        <div className="my-6 lg:ml-8">
+          <h2 className="text-3xl mb-4">
+            {t('account.my_profile.info.title')}
+          </h2>
+          <p className="text-sm font-medium">
+            <Trans
+              i18nKey="account.my_profile.info.content"
+              components={{
+                ContactLink: (
+                  <Link href={ROUTES.ACCOUNT_CONTACT}>
+                    {t('account.my_profile.info.contact')}
+                  </Link>
+                ),
+                Faq: (
+                  <Link href={ROUTES.ACCOUNT_FAQ}>
+                    {t('account.my_profile.info.faq')}
+                  </Link>
+                )
+              }}
+            />
+          </p>
+        </div>
+      </div>
+      <Modal
+        portalId="my-profile-modal"
+        open={isModalOpen}
+        setOpen={setIsModalOpen}
+      >
+        <div className="flex flex-col items-center justify-center gap-12 p-6">
+          <h3
+            className="text-2xl font-bold"
+            data-testid="account-my-profile-response"
+          >
+            {responseMessage.title}
+          </h3>
+          <p className="text-center">{responseMessage.content}</p>
+          <Button
+            onClick={handleModalClick}
+            appearance="outlined"
+            className="font-medium px-10 py-2"
+          >
+            {t('account.my_profile.form.close_button')}
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/address/stores/page.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { useLocalization } from '@akinon/next/hooks';
+import {
+  useGetCountriesQuery,
+  useGetStoresQuery,
+  useGetRetailStoreCitiesQuery
+} from '@akinon/next/data/client/address';
+import {
+  Select,
+  Accordion,
+  Button,
+  Icon,
+  SkeletonWrapper,
+  Skeleton
+} from '@theme/components';
+import { GoogleMap, LoadScriptNext, Marker } from '@react-google-maps/api';
+import { useForm } from 'react-hook-form';
+import { Image } from '@akinon/next/components/image';
+
+type SelectOptionType = {
+  label: string;
+  value: string | number;
+};
+
+export default function Stores() {
+  const { t } = useLocalization();
+
+  const [selectedCityPk, setSelectedCityPk] = useState(null);
+  const [center, setCenter] = useState({
+    lat: 39.1615254,
+    lng: 35.0687716,
+    zoom: 2
+  });
+
+  const { register, watch } = useForm();
+
+  const selectedCountry = watch('country');
+  const selectedCity = watch('city');
+
+  const { data: stores } = useGetStoresQuery();
+  const { data: country, isLoading: countryLoading } = useGetCountriesQuery();
+  const { data: city, isLoading: cityLoading } = useGetRetailStoreCitiesQuery(
+    selectedCountry,
+    {
+      skip: !selectedCountry
+    }
+  );
+
+  const countryOptions = useMemo(() => {
+    if (country) {
+      const options: SelectOptionType[] = [
+        { label: t('common.stores.select_country'), value: '' }
+      ];
+      options.push(
+        ...country.results.map((item) => ({ label: item.name, value: item.pk }))
+      );
+      return options;
+    }
+    return [];
+  }, [country]);
+
+  const cityOptions = useMemo(() => {
+    if (city) {
+      const options: SelectOptionType[] = [
+        { label: t('common.stores.select_city'), value: '' }
+      ];
+      options.push(
+        ...city.results.map((item) => ({ label: item.name, value: item.pk }))
+      );
+      return options;
+    }
+    return [];
+  }, [city]);
+
+  const handleBackButtonClick = () => {
+    setSelectedCityPk(null);
+    setCenter({ lat: 39.1615254, lng: 35.0687716, zoom: 2 });
+  };
+
+  useEffect(() => {
+    if (selectedCity) {
+      setSelectedCityPk(Number(selectedCity));
+    }
+  }, [selectedCity]);
+
+  return (
+    <div className="container px-4 mx-auto my-4 lg:px-0">
+      <h1 className="text-lg lg:text-3xl mb-4">{t('common.stores.title')}</h1>
+
+      <form className="flex flex-wrap flex-col gap-1 md:gap-6 md:flex-row">
+        {countryLoading && (
+          <SkeletonWrapper>
+            <Skeleton className="w-full h-10 md:w-60" />
+          </SkeletonWrapper>
+        )}
+
+        {country && (
+          <Select
+            className="border-gray-100 w-full mb-3 md:mb-0 md:w-60"
+            options={countryOptions}
+            {...register('country')}
+          />
+        )}
+
+        {cityLoading && (
+          <SkeletonWrapper>
+            <Skeleton className="w-full h-10 md:w-60" />
+          </SkeletonWrapper>
+        )}
+
+        {city && (
+          <Select
+            className="border-gray-100 w-full mb-3 md:mb-0 md:w-60"
+            options={cityOptions}
+            {...register('city')}
+          />
+        )}
+      </form>
+
+      <div className="flex gap-6 mt-4 flex-col md:flex-row">
+        {city && (
+          <div className="w-full flex-shrink-0 md:w-60 overflow-y-scroll max-h-[36rem]">
+            {cityLoading && (
+              <SkeletonWrapper>
+                <Skeleton className="w-full h-20" />
+              </SkeletonWrapper>
+            )}
+
+            {city.results.map((city, index) => (
+              <div
+                className={clsx({
+                  hidden: selectedCityPk !== city.pk && selectedCityPk !== null
+                })}
+                key={index}
+              >
+                <div className="flex items-center border-b border-gray-100">
+                  <Button
+                    className={clsx([
+                      'w-full',
+                      'flex',
+                      'justify-between',
+                      'items-center',
+                      'bg-transparent',
+                      'text-primary',
+                      'border-0',
+                      'p-0'
+                    ])}
+                    onClick={() => setSelectedCityPk(city.pk)}
+                  >
+                    {city.name}
+                  </Button>
+                  {selectedCityPk !== city.pk ? (
+                    <Icon name="chevron-end" size={12} />
+                  ) : (
+                    <Button
+                      onClick={handleBackButtonClick}
+                      className="bg-transparent text-primary border-0 p-0"
+                    >
+                      <Icon name="close" size={12} />
+                    </Button>
+                  )}
+                </div>
+
+                <div className={clsx({ hidden: selectedCityPk !== city.pk })}>
+                  {stores &&
+                    stores.results
+                      .filter((store) => store?.township?.city?.pk === city.pk)
+                      .map((store, index) => (
+                        <Accordion
+                          key={index}
+                          title={store.name}
+                          titleClassName="text-xs font-bold"
+                          iconSize={12}
+                          className="relative py-3 border-b justify-center mb-0"
+                        >
+                          <div className="text-xs">
+                            {store.address && (
+                              <div className="mb-2">T: {store.address} </div>
+                            )}
+                            <div className="mb-1">
+                              {store.township.city.name && (
+                                <span>{store.township.city.name} / </span>
+                              )}
+                              {store.township.city.country.name && (
+                                <span>{store.township.city.country.name}</span>
+                              )}
+                            </div>
+                            {store.phone_number && (
+                              <div>T: {store.phone_number} </div>
+                            )}
+                            {store.fax_phone_number && (
+                              <div>F: {store.fax_phone_number}</div>
+                            )}
+
+                            {store.image && (
+                              <Image
+                                src={store.image}
+                                alt={store.address}
+                                className="mt-2"
+                                sizes="256px"
+                                aspectRatio={256 / 192}
+                                fill
+                              />
+                            )}
+                          </div>
+
+                          {store.latitude && store.longitude && (
+                            <Button
+                              className="w-full mt-2"
+                              onClick={() =>
+                                setCenter({
+                                  lat: Number(store.latitude),
+                                  lng: Number(store.longitude),
+                                  zoom: 15
+                                })
+                              }
+                            >
+                              {t('common.stores.directions')}
+                            </Button>
+                          )}
+                        </Accordion>
+                      ))}
+
+                  <button
+                    className="text-sm font-medium underline cursor-pointer mt-2"
+                    onClick={handleBackButtonClick}
+                  >
+                    {t('common.stores.back')}
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="w-full">
+          <div className="relative w-full h-[18rem] lg:h-[36rem]">
+            <LoadScriptNext
+              googleMapsApiKey={process.env.NEXT_PUBLIC_MAP_API_KEY}
+              loadingElement={
+                <SkeletonWrapper>
+                  <Skeleton className="w-full h-48 mt-4 md:h-96 md:mt-0" />
+                </SkeletonWrapper>
+              }
+            >
+              <GoogleMap
+                mapContainerStyle={{ width: '100%', height: '100%' }}
+                center={center}
+                zoom={center.zoom}
+              >
+                {stores &&
+                  stores.results.map((store, index) => (
+                    <Marker
+                      key={index}
+                      position={{
+                        lat: parseFloat(store.latitude),
+                        lng: parseFloat(store.longitude)
+                      }}
+                    />
+                  ))}
+              </GoogleMap>
+            </LoadScriptNext>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/anonymous-tracking/page.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { AnonymousTracking } from '@theme/views/anonymous-tracking';
+import { AnonymousTrackingOrderDetail } from '@theme/views/anonymous-tracking/order-detail';
+import { Login } from '@theme/views/login';
+import { useSearchParams } from 'next/navigation';
+
+import { useMemo, useState } from 'react';
+
+export default function AnonymousTrackingPage() {
+  const searchParams = useSearchParams();
+  const [order, setOrder] = useState(null);
+
+  const isSuccess = useMemo(() => {
+    const successParam = searchParams.get('formSuccess');
+
+    return successParam === 'true';
+  }, [searchParams]);
+
+  return (
+    <div className="container px-4 lg:px-0 lg:mx-auto">
+      {isSuccess ? (
+        <AnonymousTrackingOrderDetail order={order} />
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 my-7 md:mt-20">
+          <Login />
+
+          <AnonymousTracking setOrder={setOrder} />
+        </div>
+      )}
+    </div>
+  );
+}

package/app-template/src/app/[commerce]/[locale]/[currency]/auth/oauth-login/page.tsx

@@ -0,0 +1,3 @@
+import OauthLogin from '@akinon/next/components/oauth-login';
+
+export default OauthLogin;