@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

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

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

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

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