+
+ );
+};
+
+export default AddressCard;
diff --git a/src/components/address/address-form.tsx b/src/components/address/address-form.tsx
new file mode 100644
index 0000000..c0c8f84
--- /dev/null
+++ b/src/components/address/address-form.tsx
@@ -0,0 +1,191 @@
+import Button from '@/components/ui/button';
+import Input from '@/components/ui/input';
+import Label from '@/components/ui/label';
+import Radio from '@/components/ui/radio/radio';
+import TextArea from '@/components/ui/text-area';
+import { useTranslation } from 'next-i18next';
+import * as yup from 'yup';
+import { useModalState } from '@/components/ui/modal/modal.context';
+import { Form } from '@/components/ui/form/form';
+import { AddressType, GoogleMapLocation } from '@/types';
+import { useSettings } from '@/contexts/settings.context';
+import { Controller } from 'react-hook-form';
+import GooglePlacesAutocomplete from '@/components/form/google-places-autocomplete';
+
+type FormValues = {
+ title: string;
+ type: string;
+ address: {
+ country: string;
+ city: string;
+ state: string;
+ zip: string;
+ street_address: string;
+ };
+ location: GoogleMapLocation;
+};
+
+const addressSchema = yup.object().shape({
+ type: yup
+ .string()
+ .oneOf([AddressType.Billing, AddressType.Shipping])
+ .required('error-type-required'),
+ title: yup.string().required('error-title-required'),
+ address: yup.object().shape({
+ country: yup.string().required('error-country-required'),
+ city: yup.string().required('error-city-required'),
+ state: yup.string().required('error-state-required'),
+ zip: yup.string().required('error-zip-required'),
+ street_address: yup.string().required('error-street-required'),
+ }),
+});
+
+const AddressForm: React.FC+ {address.title} +
++ {formatAddress(address.address)} +
+
+ {onEdit && (
+
+ )}
+
+
+
+ onSubmit={onSubmit}
+ className="grid h-full grid-cols-2 gap-5"
+ //@ts-ignore
+ validationSchema={addressSchema}
+ options={{
+ shouldUnregister: true,
+ defaultValues: {
+ title: address?.title ?? '',
+ type: address?.type ?? type,
+ address: {
+ city: address?.address?.city ?? '',
+ country: address?.address?.country ?? '',
+ state: address?.address?.state ?? '',
+ zip: address?.address?.zip ?? '',
+ street_address: address?.address?.street_address ?? '',
+ ...address?.address,
+ },
+ location: address?.location ?? '',
+ },
+ }}
+ resetValues={{
+ title: address?.title ?? '',
+ type: address?.type ?? type,
+ ...(address?.address && address),
+ }}
+ >
+ {({
+ register,
+ control,
+ getValues,
+ setValue,
+ formState: { errors },
+ }) => (
+ <>
+
+ );
+};
+
+export default AddressForm;
diff --git a/src/components/address/address-header.tsx b/src/components/address/address-header.tsx
new file mode 100644
index 0000000..35a18fb
--- /dev/null
+++ b/src/components/address/address-header.tsx
@@ -0,0 +1,37 @@
+import { PlusIcon } from '@/components/icons/plus-icon';
+import { useTranslation } from 'next-i18next';
+
+interface AddressHeaderProps {
+ count: number | boolean;
+ label: string;
+ onAdd: () => void;
+}
+
+export const AddressHeader: React.FC+ {address ? t('text-update') : t('text-add-new')} {t('text-address')} +
+
+
+
+
+
+
+ {useGoogleMap && (
+
+
+
+
+ (
+ {
+ onChange(location);
+ setValue('address.country', location?.country);
+ setValue('address.city', location?.city);
+ setValue('address.state', location?.state);
+ setValue('address.zip', location?.zip);
+ setValue(
+ 'address.street_address',
+ location?.street_address,
+ );
+ }}
+ data={getValues('location')!}
+ />
+ )}
+ />
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ );
+};
diff --git a/src/components/address/create-or-update.tsx b/src/components/address/create-or-update.tsx
new file mode 100644
index 0000000..9608c76
--- /dev/null
+++ b/src/components/address/create-or-update.tsx
@@ -0,0 +1,49 @@
+import {
+ useModalAction,
+ useModalState,
+} from '@/components/ui/modal/modal.context';
+import AddressForm from '@/components/address/address-form';
+import { AddressType, GoogleMapLocation } from '@/types';
+import { useUpdateUserMutation } from '@/data/user';
+
+type FormValues = {
+ __typename?: string;
+ title: string;
+ type: AddressType;
+ address: {
+ country: string;
+ city: string;
+ state: string;
+ zip: string;
+ street_address: string;
+ };
+ location: GoogleMapLocation;
+};
+
+const CreateOrUpdateAddressForm = () => {
+ const {
+ data: { customerId, address },
+ } = useModalState();
+ const { closeModal } = useModalAction();
+ const { mutate: updateProfile } = useUpdateUserMutation();
+
+ function onSubmit(values: FormValues) {
+ const { __typename, ...rest } = values;
+ updateProfile({
+ id: customerId,
+ input: {
+ address: [
+ {
+ ...(address?.id ? { id: address.id } : {}),
+ ...rest,
+ },
+ ],
+ },
+ });
+ return closeModal();
+ }
+
+ return
+ {count && (
+
+ {count}
+
+ )}
+
+ {onAdd && (
+
+ )}
+ {label}
+
+
+
+
+ + {t('common:text-export-import')} +
+You can only import csv file.
+
+ {values?.map((singleValues: any, index: number) => (
+
+ {singleValues.value}
+
+ ))}
+
+ );
+ },
+ },
+ {
+ title: t('table:table-item-slug'),
+ dataIndex: 'slug',
+ key: 'slug',
+ align: alignLeft,
+ width: 180,
+ },
+ {
+ title: t('table:table-item-actions'),
+ dataIndex: 'slug',
+ key: 'actions',
+ align: alignRight,
+ width: 120,
+ render: (slug: string, record: Attribute) => (
+
+ (
+
+
+ )}
+
+ );
+};
+
+export default TypeList;
diff --git a/src/components/brand/brand-validation-schema.ts b/src/components/brand/brand-validation-schema.ts
new file mode 100644
index 0000000..8e7627d
--- /dev/null
+++ b/src/components/brand/brand-validation-schema.ts
@@ -0,0 +1,26 @@
+import * as yup from "yup";
+import isEmpty from "lodash/isEmpty";
+
+yup.addMethod(yup.object, "notEmptyObject", function (errorMessage) {
+ return this.test(`test-not-empty-object`, errorMessage, function (value) {
+ const { path, createError } = this;
+ return (
+ (value && !isEmpty(value)) || createError({ path, message: errorMessage })
+ );
+ });
+})
+
+export const typeValidationSchema = yup.object().shape({
+ name: yup.string().required("form:error-name-required"),
+ images: yup
+ .array()
+ .min(1, 'form:add-at-least-one-image')
+ .of(
+ yup.object().shape({
+ key: yup.object().shape({
+ value: yup.string().required("form:text-select-layout")
+ }),
+ image: yup.array().min(1, "form:error-min-one-image")
+ })
+ )
+});
diff --git a/src/components/cart/add-to-cart/add-to-cart-btn.tsx b/src/components/cart/add-to-cart/add-to-cart-btn.tsx
new file mode 100644
index 0000000..4d12bd1
--- /dev/null
+++ b/src/components/cart/add-to-cart/add-to-cart-btn.tsx
@@ -0,0 +1,92 @@
+import { PlusIcon } from '@/components/icons/plus-icon';
+import CartIcon from '@/components/icons/cart';
+import { useTranslation } from 'next-i18next';
+import cn from 'classnames';
+
+type Props = {
+ variant?: 'helium' | 'neon' | 'argon' | 'oganesson' | 'single' | 'big';
+ onClick(event: React.MouseEvent
+
+
+ + {t('text-no-products')} +
+
+
+
+
+
+
+
+ {itemPrice}
+
+ {item.name}
+{price}
+ + {item.quantity} X {item.unit} + +
+
+ {getIcon({
+ iconList: categoriesIcon,
+ iconName: item.value,
+ className: 'max-h-full max-w-full',
+ })}
+
+ {item.label}
+
+ );
+ return item;
+});
+
+type FormValues = {
+ name: string;
+ slug: string;
+ details: string;
+ parent: any;
+ image: AttachmentInput[];
+ banner_image: AttachmentInput[];
+ icon: any;
+ // type: any;
+};
+
+const defaultValues = {
+ image: [],
+ banner_image: [],
+ name: '',
+ slug: '',
+ details: '',
+ parent: '',
+ icon: '',
+};
+
+type IProps = {
+ initialValues?: Category | undefined;
+};
+export default function CreateOrUpdateCategoriesForm({
+ initialValues,
+}: IProps) {
+ const router = useRouter();
+ const { t } = useTranslation();
+
+ const [isSlugDisable, setIsSlugDisable] = useState
+ {image?.map((image: Attachment, index: number) => (
+
+ );
+ },
+ },
+ {
+ title: t('table:table-item-banner-image'),
+ dataIndex: 'banner_image',
+ key: 'banner_image',
+ align: 'center',
+ width: 100,
+ render: (banner_image: Attachment[]) => {
+ if (!banner_image?.length) return null;
+ return (
+
+ {banner_image && banner_image.map(
+ (image: Attachment, index: number) => (
+
+ );
+ },
+ },
+ {
+ title: t('table:table-item-icon'),
+ dataIndex: 'icon',
+ key: 'icon',
+ align: 'center',
+ width: 120,
+ render: (icon: string) => {
+ if (!icon) return null;
+ return (
+
+ {getIcon({
+ iconList: categoriesIcon,
+ iconName: icon,
+ className: 'w-5 h-5 max-h-full max-w-full',
+ })}
+
+ );
+ },
+ },
+ {
+ title: (
+
+ (
+