@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,107 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import {
-  useEditAddressMutation,
-  useRemoveAddressMutation,
-  useSetDefaultAddressMutation
-} from '@akinon/next/data/client/address';
-import { Address } from '@akinon/next/types';
-import { AddressForm } from './address-form';
-import { Button, Modal, Radio } from '@theme/components';
-import { useLocalization } from '@akinon/next/hooks';
-
-export interface Props {
-  address: Address;
-  index: number;
-}
-
-export const AddressCard = (props: Props) => {
-  const { t } = useLocalization();
-  const { address, index } = props;
-  const [isEditAddressModalOpen, setIsEditAddressModalOpen] = useState(false);
-  const [editAddress] = useEditAddressMutation();
-  const [removeAddress] = useRemoveAddressMutation();
-  const [setDefaultAddress] = useSetDefaultAddressMutation();
-
-  const onSubmit = async (data) => {
-    await editAddress(data);
-    setIsEditAddressModalOpen(false);
-  };
-
-  return (
-    <div key={address.pk} className="border border-gray-200 p-6 relative">
-      <div className="bg-black w-12 h-12 text-white rounded-full text-center -top-6 absolute left-1/2 -translate-x-1/2">
-        <span
-          className="top-1/2 relative block -translate-y-1/2"
-          data-testid="address-card-count"
-        >
-          {index + 1}
-        </span>
-      </div>
-      <h2
-        className="text-center text-xl my-4 break-all"
-        data-testid="address-card-title"
-      >
-        {address.title}
-      </h2>
-      <Radio
-        className="mb-4 accent-primary"
-        name="address"
-        defaultChecked={address.primary}
-        onChange={() => setDefaultAddress({ pk: address.pk, primary: true })}
-      >
-        {t('account.address_book.card.default_address')}
-      </Radio>
-
-      <div className="mb-5">
-        <p
-          title={address.line}
-          className="text-xs leading-5 break-all mb-2 font-medium truncate"
-        >
-          {address.line}
-        </p>
-
-        <p className="text-xs leading-5 break-all font-medium">
-          {address.township.name}/{address.city.name}
-        </p>
-      </div>
-
-      <div className="text-xs flex justify-between pt-5 border-t border-gray-200 mt-auto">
-        <Button
-          appearance="ghost"
-          className="underline p-0 h-auto"
-          onClick={() => setIsEditAddressModalOpen(true)}
-        >
-          {t('account.address_book.card.edit')}
-        </Button>
-        <Modal
-          portalId={`account-address-edit-address-modal-${address.pk}`}
-          title={t('account.address_book.modal.edit_address')}
-          open={isEditAddressModalOpen}
-          setOpen={setIsEditAddressModalOpen}
-          className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
-        >
-          <AddressForm
-            data={{
-              ...address,
-              country: address.country.pk,
-              city: address.city.pk,
-              township: address.township.pk,
-              district: address.district.pk
-            }}
-            onSubmit={onSubmit}
-          />
-        </Modal>
-        <Button
-          appearance="ghost"
-          className="underline p-0 h-auto"
-          onClick={() => removeAddress(address.pk)}
-          data-testid="address-card-remove"
-        >
-          {t('account.address_book.card.remove')}
-        </Button>
-      </div>
-    </div>
-  );
-};

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

@@ -1,374 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-import { useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
-import clsx from 'clsx';
-import { AddressType, AddressFormType } from '@akinon/next/types';
-import {
-  Button,
-  Checkbox,
-  Icon,
-  Input,
-  Radio,
-  Select
-} from '@theme/components';
-import {
-  useGetCountriesQuery,
-  useGetCitiesQuery,
-  useGetTownshipsQuery,
-  useGetDistrictsQuery
-} from '@akinon/next/data/client/address';
-import { useAppSelector } from '@akinon/next/redux/hooks';
-import { useLocalization } from '@akinon/next/hooks';
-
-type SelectOptionType = {
-  label: string;
-  value: string | number;
-};
-
-interface Props {
-  data?: any;
-  onSubmit: (data: any) => void;
-}
-
-const makeAddressFormSchema = (t, { phoneNumberLength }) =>
-  yup.object().shape({
-    title: yup.string().required(t('account.address_book.form.error.required')),
-    first_name: yup
-      .string()
-      .required(t('account.address_book.form.error.required')),
-    last_name: yup
-      .string()
-      .required(t('account.address_book.form.error.required')),
-    phone_number: yup
-      .string()
-      .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
-      .length(
-        phoneNumberLength,
-        t('account.address_book.form.error.phone_length')
-      )
-      .required(t('account.address_book.form.error.required')),
-    country: yup
-      .string()
-      .required(t('account.address_book.form.error.required')),
-    city: yup.string().required(t('account.address_book.form.error.required')),
-    township: yup
-      .string()
-      .required(t('account.address_book.form.error.required')),
-    district: yup
-      .string()
-      .required(t('account.address_book.form.error.required')),
-    line: yup
-      .string()
-      .required(t('account.address_book.form.error.required'))
-      .min(10, t('account.address_book.form.error.line_min'))
-      .max(255, t('account.address_book.form.error.line_max')),
-    postcode: yup
-      .string()
-      .min(5, t('account.address_book.form.error.postcode_min'))
-      .max(5, t('account.address_book.form.error.postcode_max'))
-      .required(t('account.address_book.form.error.required')),
-    company_name: yup.string().nullable(),
-    tax_no: yup.string().nullable(),
-    tax_office: yup.string().nullable(),
-    e_bill_taxpayer: yup.boolean().nullable()
-  });
-
-export const AddressForm = (props: Props) => {
-  const { t } = useLocalization();
-
-  const { data, onSubmit } = props;
-  const config = useAppSelector((state) => state.config);
-  const addressFormSchema = makeAddressFormSchema(t, {
-    phoneNumberLength: config.user_phone_format.length
-  });
-  const {
-    register,
-    handleSubmit,
-    watch,
-    control,
-    reset,
-    formState: { errors }
-  } = useForm<AddressFormType>({
-    resolver: yupResolver(addressFormSchema),
-    defaultValues: { is_corporate: AddressType.individual, type: 'customer' }
-  });
-
-  const selectedFormType = watch('is_corporate');
-  const selectedCountry = watch('country');
-  const selectedCity = watch('city');
-  const selectedTownship = watch('township');
-
-  const { data: country } = useGetCountriesQuery();
-  const { data: city } = useGetCitiesQuery(selectedCountry, {
-    skip: !selectedCountry
-  });
-  const { data: township } = useGetTownshipsQuery(selectedCity, {
-    skip: !selectedCity
-  });
-  const { data: district } = useGetDistrictsQuery(selectedTownship, {
-    skip: !selectedTownship
-  });
-
-  const countryOptions = useMemo(() => {
-    if (country) {
-      const options: SelectOptionType[] = [
-        { label: t('account.address_book.form.country.placeholder'), 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('account.address_book.form.province.placeholder'),
-          value: ''
-        }
-      ];
-      options.push(
-        ...city.results.map((item) => ({ label: item.name, value: item.pk }))
-      );
-      return options;
-    }
-    return [];
-  }, [city]);
-
-  const townshipOptions = useMemo(() => {
-    if (township) {
-      const options: SelectOptionType[] = [
-        {
-          label: t('account.address_book.form.township.placeholder'),
-          value: ''
-        }
-      ];
-      options.push(
-        ...township.results.map((item) => ({
-          label: item.name,
-          value: item.pk
-        }))
-      );
-      return options;
-    }
-    return [];
-  }, [township]);
-
-  const districtOptions = useMemo(() => {
-    if (district) {
-      const options: SelectOptionType[] = [
-        {
-          label: t('account.address_book.form.district.placeholder'),
-          value: ''
-        }
-      ];
-      options.push(
-        ...district.results.map((item) => ({
-          label: item.name,
-          value: item.pk
-        }))
-      );
-      return options;
-    }
-    return [];
-  }, [district]);
-
-  useEffect(() => {
-    if (data && country) {
-      reset({
-        ...data,
-        is_corporate:
-          String(data.is_corporate) === AddressType.company ? 'true' : 'false' // TODO: Fix this! This hack for radio buttons can't be set to boolean value
-      });
-    }
-  }, [data, country, reset]);
-
-  return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="flex flex-col py-4 px-6 gap-6"
-    >
-      <div className="flex gap-8">
-        <Radio
-          {...register('is_corporate')}
-          value="false"
-          data-testid="address-form-personal"
-        >
-          <span className="text-base">
-            {t('account.address_book.form.type.personal')}
-          </span>
-        </Radio>
-        <Radio
-          {...register('is_corporate')}
-          value="true"
-          data-testid="address-form-corporate"
-        >
-          <span className="text-base">
-            {t('account.address_book.form.type.corporate')}
-          </span>
-        </Radio>
-      </div>
-      <Input
-        label={t('account.address_book.form.address_title.placeholder')}
-        {...register('title')}
-        error={errors.title}
-        data-testid="address-form-title"
-        required
-      />
-      <Input
-        label={t('account.address_book.form.name.placeholder')}
-        {...register('first_name')}
-        error={errors.first_name}
-        data-testid="address-form-first-name"
-        required
-      />
-      <Input
-        label={t('account.address_book.form.surname.placeholder')}
-        {...register('last_name')}
-        error={errors.last_name}
-        data-testid="address-form-last-name"
-        required
-      />
-      <Input
-        label={t('account.address_book.form.phone.placeholder')}
-        format={config.user_phone_format.replaceAll(/\9/g, '#')}
-        mask="_"
-        allowEmptyFormatting={true}
-        control={control}
-        {...register('phone_number')}
-        error={errors.phone_number}
-        data-testid="address-form-phone"
-        required
-      />
-      {/* TODO: Fix select and textarea components */}
-
-      <Select
-        className="w-full border-gray-500 text-sm mt-2"
-        options={countryOptions}
-        {...register('country')}
-        error={errors.country}
-        data-testid="address-form-country"
-        label={t('account.address_book.form.country.title')}
-        required
-      />
-
-      {city && (
-        <Select
-          className="w-full border-gray-500 text-sm mt-2"
-          options={cityOptions}
-          {...register('city')}
-          error={errors.city}
-          data-testid="address-form-city"
-          label={t('account.address_book.form.province.title')}
-          required
-        />
-      )}
-      {township && (
-        <div className="flex gap-4">
-          <div className="flex-1">
-            <Select
-              className="w-full border-gray-500 text-sm mt-2"
-              options={townshipOptions}
-              {...register('township')}
-              error={errors.township}
-              data-testid="address-form-township"
-              label={t('account.address_book.form.township.title')}
-              required
-            />
-          </div>
-          {district && (
-            <div className="flex-1">
-              <Select
-                className="w-full border-gray-500 text-sm mt-2"
-                options={districtOptions}
-                {...register('district')}
-                error={errors.district}
-                data-testid="address-form-district"
-                label={t('account.address_book.form.district.title')}
-                required
-              />
-            </div>
-          )}
-        </div>
-      )}
-      <label className="text-xs text-gray-800 relative">
-        <>
-          <span>{t('account.address_book.form.address.title')}</span>
-          <span className="text-secondary"> *</span>
-        </>
-
-        <textarea
-          {...register('line')}
-          rows={6}
-          className={clsx(
-            'block w-full mt-2 border p-2',
-            errors.line
-              ? 'border-error focus:border-error'
-              : 'border-gray-500 hover:border-black focus:border-black'
-          )}
-          data-testid="address-form-address-field"
-        />
-        {errors.line && (
-          <span
-            className="absolute -bottom-5 left-0 text-sm text-error"
-            data-testid="address-form-address-field-error"
-          >
-            {errors.line.message}
-          </span>
-        )}
-      </label>
-      <Input
-        type="number"
-        label={t('account.address_book.form.post_code.placeholder')}
-        {...register('postcode')}
-        error={errors.postcode}
-        data-testid="address-form-post-code"
-        required
-      />
-      {selectedFormType === AddressType.company && (
-        <>
-          <Input
-            type="text"
-            label={t('account.address_book.form.company_name.placeholder')}
-            {...register('company_name')}
-            error={errors.company_name}
-            data-testid="address-form-company-name"
-          />
-          <Input
-            type="number"
-            label={t('account.address_book.form.tax_no.placeholder')}
-            {...register('tax_no')}
-            error={errors.tax_no}
-            data-testid="address-form-tax-no"
-          />
-          <Input
-            type="text"
-            label={t('account.address_book.form.tax_office.placeholder')}
-            {...register('tax_office')}
-            error={errors.tax_office}
-            data-testid="address-form-tax-office"
-          />
-          <Checkbox
-            className="accent-primary"
-            {...register('e_bill_taxpayer')}
-            data-testid="address-form-taxpayer"
-          >
-            {t('account.address_book.form.taxpayer.title')}
-          </Checkbox>
-        </>
-      )}
-      <Button
-        type="submit"
-        className="flex items-center justify-center font-semibold gap-2"
-        data-testid="address-form-submit"
-      >
-        <span>{t('account.address_book.form.submit_button')}</span>
-        <Icon name="chevron-end" size={12} className="fill-white" />
-      </Button>
-    </form>
-  );
-};

package/app-template/src/views/account/back-button.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import clsx from 'clsx';
-import { Icon, Link } from '@theme/components';
-import { usePathname } from 'next/navigation';
-import { ROUTES } from 'routes';
-
-export default function AccountBackButton() {
-  const pathname = usePathname();
-  const accountMenuRegex = new RegExp(`^${ROUTES.ACCOUNT}/?$`).test(pathname);
-
-  return (
-    <div
-      className={clsx(
-        'w-full flex items-center bg-gray-150 p-6 pb-0 md:hidden',
-        {
-          hidden: accountMenuRegex
-        }
-      )}
-    >
-      <Link className="flex items-center" href={ROUTES.ACCOUNT} passHref>
-        <Icon name="chevron-start" size={12} className="fill-primary" />
-        <Icon name="user" size={23} className="fill-primary ml-1" />
-      </Link>
-    </div>
-  );
-}