@weareconceptstudio/account 0.0.7 → 0.0.8

package/dist/AccountProvider.d.ts

@@ -1,8 +1,11 @@
 export function useAccountContext(): any;
-export function AccountProvider({ fontFamily, children, maxQty, currency }: {
+export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currency, addressType, addressFormFields }: {
     fontFamily?: string;
+    shopUrl?: string;
     children: any;
     maxQty?: number;
     currency: any;
+    addressType: any;
+    addressFormFields: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/AccountProvider.js

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useEffect } from 'react';
 import { useTranslation } from '@weareconceptstudio/core';
 import { ThemeProvider } from 'styled-components';
+import { AddressProvider } from './modules/address/AddressProvider';
 //* Translations
 import translations from './translations';
 //* Styles
@@ -13,15 +14,16 @@ export const useAccountContext = () => {
     const context = useContext(AccountContext);
     return context;
 };
-export const AccountProvider = ({ fontFamily = 'core_Font', children, maxQty = 99, currency }) => {
+export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields }) => {
     const { addTranslation } = useTranslation();
     useEffect(() => {
         addTranslation(translations, 'prepend');
     }, []);
-    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty } },
-        React.createElement(ThemeProvider, { theme: theme },
-            React.createElement(AccountVariables, { fontFamily: fontFamily }),
-            React.createElement(AccountHelperClass, null),
-            React.createElement(AccountTypography, null),
-            children)));
+    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl } },
+        React.createElement(AddressProvider, { addressType: addressType, addressFormFields: addressFormFields },
+            React.createElement(ThemeProvider, { theme: theme },
+                React.createElement(AccountVariables, { fontFamily: fontFamily }),
+                React.createElement(AccountHelperClass, null),
+                React.createElement(AccountTypography, null),
+                children))));
 };

package/dist/components/EmptyOrders/index.js

@@ -1,12 +1,13 @@
 import React, { memo as Memo } from 'react';
+import { useAccountContext } from '../../AccountProvider';
 import { Text } from '@weareconceptstudio/core';
-//* Style
-import EmptyOrdersStyle from './style';
-//* Components
 import AccountButton from '../ui/AccountButton';
+import EmptyOrdersStyle from './style';
 const EmptyOrders = Memo(() => {
+    const { shopUrl } = useAccountContext();
     return (React.createElement(EmptyOrdersStyle, { className: 'empty-orders' },
         React.createElement(Text, { tag: `h6`, className: `account-h6 account-font-bold account-primary-color1 empty-orders-title`, text: `emptyTitle` }),
-        React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 empty-orders-description`, text: `emptyDesc` })));
+        React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 empty-orders-description`, text: `emptyDesc` }),
+        React.createElement(AccountButton, { text: `shopNow`, btnType: 'purple-text', url: shopUrl })));
 });
 export default EmptyOrders;

package/dist/components/OrderedItems/index.d.ts

@@ -1,5 +1,5 @@
 export default OrderedItems;
-declare function OrderedItems({ data, status, currency }: {
+declare function OrderedItems({ data: items, status, currency }: {
     data: any;
     status: any;
     currency: any;

package/dist/components/OrderedItems/index.js

@@ -1,46 +1,13 @@
-import React, { useMemo, useCallback, useState } from 'react';
-import { Image, Text, useTranslation, useUi } from '@weareconceptstudio/core';
-// import SwiperCore, { Navigation } from 'swiper';
-// import { Swiper, SwiperSlide } from 'swiper/react';
-// SwiperCore.use([Navigation]);
+import React, { useMemo } from 'react';
+import { Image, Text, useUi } from '@weareconceptstudio/core';
 //* Utils
 import { handlePriceCheckFunc } from '../../utils/_functions';
 //* Components
-// import OldEditor from '../OldEditor';
-// import ReviewPopup from './ReviewPopup';
-// import ImagesPopup from '../ImagesPopup';
 import AccountButton from '../ui/AccountButton';
 //* Styles
-// import 'swiper/swiper-bundle.css';
 import OrderedItemsStyle from './style';
-const OrderedItems = ({ data, status, currency }) => {
-    const { translate } = useTranslation();
-    const { winWidth, openPopup } = useUi();
-    const createReview = () => { };
-    const updateReview = () => { };
-    //! State
-    const [items, setItems] = useState(data);
-    //! Handle Review update
-    const addOrUpdateReview = useCallback((id, newValues) => {
-        setItems(items.map((item) => (item.id == id ? { ...item, review: newValues } : item)));
-    }, [items]);
-    //! Review popup
-    // const handleReviewPopup = useCallback(
-    // 	({ orderItemId, product, review }) => {
-    // 		return openPopup(
-    // 			<ReviewPopup
-    // 				review={review}
-    // 				product={product}
-    // 				orderItemId={orderItemId}
-    // 				createReview={createReview}
-    // 				updateReview={updateReview}
-    // 				addOrUpdateReview={addOrUpdateReview}
-    // 			/>,
-    // 			{ className: 'is-review-popup' }
-    // 		);
-    // 	},
-    // 	[addOrUpdateReview]
-    // );
+const OrderedItems = ({ data: items, status, currency }) => {
+    const { winWidth } = useUi();
     //! Store order items
     const storeOrderedItems = useMemo(() => {
         return items.map((item, index) => winWidth >= 768 ? (React.createElement("div", { key: index, className: `item-wrap` },

package/dist/components/cart/Items/Simple/Item/index.js

@@ -1,19 +1,17 @@
 import React, { memo, useMemo } from 'react';
-import { Image, Text, useUi } from '@weareconceptstudio/core';
+import { Image, Text } from '@weareconceptstudio/core';
 import { Select } from '@weareconceptstudio/form';
 import { useAccountContext } from '../../../../../AccountProvider';
 import { handlePriceCheckFunc } from '../../../../../utils/_functions';
 import Button from '../../../../ui/AccountButton';
-import FavoriteButton from '../../../../FavoriteButton';
 const pathname = '/cart/';
-const Item = memo(({ data, edit, favorite, remove, select, isLast, favorites, actions }) => {
-    const { openPopup } = useUi();
+const Item = memo(({ data, remove, select, isLast, actions }) => {
     const { currency, maxQty } = useAccountContext();
     const selectionList = useMemo(() => {
         if (select) {
             const selectList = [];
             for (let index = 1; index <= maxQty; index++) {
-                selectList.push({ value: index, label: index });
+                selectList.push({ id: index, name: index });
             }
             return selectList;
         }
@@ -29,9 +27,7 @@ const Item = memo(({ data, edit, favorite, remove, select, isLast, favorites, ac
                     React.createElement("div", { className: `right-first-item-wrap` },
                         React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 capitalize`, text: data.product.short_info_1 })),
                     React.createElement("div", { className: `right-second-item-wrap` },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: data.product.short_info_2 })),
-                    edit && !data.product?.out_of_stock ? (React.createElement("div", { className: `edit-btn-wrap empty` },
-                        React.createElement(Button, { text: 'edit', btnType: `green-small-text`, onClick: () => openPopup(React.createElement("div", null, "Product Individual")) }))) : pathname === '/cart/' ? (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color3 underline opacityZero empty`, text: 'empty' })) : (''))),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: data.product.short_info_2 })))),
             React.createElement("div", { className: `col-item tl-col-2` }, select ? (React.createElement("div", { className: `select-and-out-of-stock-wrap` }, !data.product?.out_of_stock ? (React.createElement(Select, { allowSearch: false, options: selectionList, value: data.qty, onChange: (val) => actions.add({
                     productId: data.product.id,
                     qty: val,
@@ -44,11 +40,8 @@ const Item = memo(({ data, edit, favorite, remove, select, isLast, favorites, ac
                     React.createElement("div", { className: `flex-end-wrap` }, data?.product.sale_price ? (React.createElement("div", null,
                         React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right`, text: `${data.sale_total} ${currency}` }),
                         React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right`, text: handlePriceCheckFunc(data.product?.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right`, text: `${data.total} ${currency}` }))),
-                    React.createElement("div", { className: `favorite-and-remove-wrap` },
-                        favorite && !data.product?.out_of_stock && (React.createElement("div", { className: `favorite-btn-wrap` },
-                            React.createElement(FavoriteButton, { qty: data.qty, type: `withText`, favorites: favorites, productId: data.product?.id, optionId: data.selectedOption?.id, variantId: data.selectedVariant?.id }))),
-                        remove && (React.createElement("div", { className: `remove-btn-wrap` },
-                            React.createElement(Button, { text: 'remove', btnType: `green-small-text`, onClick: () => actions.delete({ productId: data.product?.id }) }))))))),
+                    React.createElement("div", { className: `favorite-and-remove-wrap` }, remove && (React.createElement("div", { className: `remove-btn-wrap` },
+                        React.createElement(Button, { text: 'remove', btnType: `green-small-text`, onClick: () => actions.delete({ productId: data.product?.id }) }))))))),
         isLast ? React.createElement("div", { className: 'line' }) : null));
 });
 export default Item;

package/dist/components/cart/Items/Simple/ItemMobile/index.js

@@ -3,23 +3,20 @@ import { Image, Text, useUi } from '@weareconceptstudio/core';
 import { Select } from '@weareconceptstudio/form';
 import Button from '../../../../ui/AccountButton';
 import { useAccountContext } from '../../../../../AccountProvider';
-//* Utils
 import { handlePriceCheckFunc } from '../../../../../utils/_functions';
-//* Components
-import FavoriteButton from '../../../../FavoriteButton';
 // import ProductIndividual from '@/components/common/ProductIndividual';
 //TODO: Fake
 const pathname = '/cart/';
 const addToCart = () => { };
 const removeCart = () => { };
-const ItemMobile = memo(({ data, additionalParameters, isLast, favorites }) => {
+const ItemMobile = memo(({ data, additionalParameters, isLast }) => {
     const { openPopup } = useUi();
     const { currency } = useAccountContext();
     const selectionList = useMemo(() => {
         if (additionalParameters.select) {
             const selectList = [];
             for (let index = 1; index <= data.qty; index++) {
-                selectList.push({ value: index, label: index });
+                selectList.push({ id: index, name: index });
             }
             return selectList;
         }
@@ -57,16 +54,6 @@ const ItemMobile = memo(({ data, additionalParameters, isLast, favorites }) => {
                             React.createElement(Text, { className: `account-p account-p3 account-font-bold secondaryColor2`, text: handlePriceCheckFunc(data.product?.discountedPrice * data.qty, currency) }),
                             React.createElement(Text, { className: `account-p account-p3 account-font-regular primaryColor2 lineThrough`, text: handlePriceCheckFunc(data.product?.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold primaryColor1`, text: handlePriceCheckFunc(data.product?.price * data.qty || data.total, currency || currency) }))))),
             pathname === '/cart/' && (React.createElement("div", { className: `edit-remove-favorite-mobile-wrap` },
-                additionalParameters.edit.item && !data.product?.out_of_stock ? (React.createElement(Button, { text: 'edit', btnType: `green-small-text`, onClick: () => openPopup(
-                    // <ProductIndividual
-                    // 	isPopup
-                    // 	qty={data.qty}
-                    // 	itemId={data.id}
-                    // 	selectedOption={data.selectedOption}
-                    // 	selectedVariant={data.selectedVariant}
-                    // 	{...data.product}
-                    // />
-                    React.createElement("div", null, "Product Individual")) })) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold primaryColor3 underline opacityZero empty`, text: 'empty' })),
                 React.createElement("div", { className: `favorite-remove-mobile-wrap` }, additionalParameters.remove && (React.createElement(Button, { text: 'remove', btnType: `green-small-text`, onClick: () => removeCart({ productId: data.product.id, variantId: data.selectedVariant.id, optionId: data.selectedOption.id }) })))))),
         React.createElement("div", { className: 'line' })));
 });

package/dist/components/cart/Items/Simple/index.js

@@ -5,7 +5,7 @@ import Item from './Item';
 import ItemMobile from './ItemMobile';
 //* Style
 import CartItemsStyle from './style';
-const CartItems = memo(({ data, className, title, smallFontSize, additionalParameters, currency, isLast, favorites, actions }) => {
+const CartItems = memo(({ data, className, title, smallFontSize, additionalParameters, currency, isLast, actions }) => {
     const { winWidth } = useUi();
     //! Store
     const orderStore = useMemo(() => {
@@ -20,9 +20,9 @@ const CartItems = memo(({ data, className, title, smallFontSize, additionalParam
                 React.createElement("div", { className: `title-wrap tl-col-4 title-item` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap alignRight`, text: `total` }))),
             React.createElement("div", { className: `items-wrap` }, data?.map((item, index) => {
-                return (React.createElement(Item, { key: index, data: item, currency: currency, favorites: favorites, isLast: data.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item, favorite: additionalParameters.favorite, actions: actions }));
+                return (React.createElement(Item, { key: index, data: item, currency: currency, isLast: data.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item, actions: actions }));
             })))) : (React.createElement("div", { className: `mobile-order-items-table-wrap` }, data?.map((item, index) => {
-            return (React.createElement(ItemMobile, { key: index, data: item, isLast: isLast, currency: currency, favorites: favorites, additionalParameters: additionalParameters }));
+            return (React.createElement(ItemMobile, { key: index, data: item, isLast: isLast, currency: currency, additionalParameters: additionalParameters }));
         })));
     }, [winWidth, data, additionalParameters, currency]);
     return (React.createElement(CartItemsStyle, { className: className || '' },

package/dist/components/index.d.ts

@@ -1,14 +1,8 @@
 export * from './ui';
 export * from './cart';
 export { default as FormInputCode } from './FormInputCode';
-export { default as AddressWrap } from './AddressWrap';
-export { default as AddressForm } from './AddressForm';
-export { default as AddressItem } from './AddressItem';
 export { default as TotalCheckout } from './TotalCheckout';
 export { default as EmptyOrders } from './EmptyOrders';
 export { default as OrderDetails } from './OrderDetails';
 export { default as OrderedItems } from './OrderedItems';
 export { default as OrdersList } from './OrdersList';
-export { default as ShippingBillingInfo } from './ShippingBillingInfo';
-export { default as ShippingBillingForm } from './ShippingBillingForm';
-export { default as SelectShippingBilling } from './SelectShippingBilling';

package/dist/components/index.js

@@ -1,14 +1,8 @@
 export * from './ui';
 export * from './cart';
 export { default as FormInputCode } from './FormInputCode';
-export { default as AddressWrap } from './AddressWrap';
-export { default as AddressForm } from './AddressForm';
-export { default as AddressItem } from './AddressItem';
 export { default as TotalCheckout } from './TotalCheckout';
 export { default as EmptyOrders } from './EmptyOrders';
 export { default as OrderDetails } from './OrderDetails';
 export { default as OrderedItems } from './OrderedItems';
 export { default as OrdersList } from './OrdersList';
-export { default as ShippingBillingInfo } from './ShippingBillingInfo';
-export { default as ShippingBillingForm } from './ShippingBillingForm';
-export { default as SelectShippingBilling } from './SelectShippingBilling';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './AccountProvider';
+export * from './modules';
 export * from './templates';
 export * from './components';

package/dist/index.js

@@ -1,4 +1,5 @@
 'use client';
 export * from './AccountProvider';
+export * from './modules';
 export * from './templates';
 export * from './components';

package/dist/modules/address/AddressForm/index.js

@@ -0,0 +1,44 @@
+import React, { memo as Memo, useState, useCallback } from 'react';
+import { useUi, Text } from '@weareconceptstudio/core';
+import { FormBuilder } from '@weareconceptstudio/form';
+import AccountButton from '../../../components/ui/AccountButton';
+import { useTheme } from 'styled-components';
+import theme from '../../../styles/theme';
+//* Icons
+import { CheckboxIcon, CheckboxCheckedIcon } from '../../../utils/icons';
+//* Style
+import AddressFormStyle from './style';
+const AddressForm = Memo(({ title, data, formFields, type, createAddress, updateAddress }) => {
+    const globalTheme = useTheme();
+    const { closePopup } = useUi();
+    //! States
+    const [isChecked, setIsChecked] = useState(data?.is_default || false);
+    const [isDisabled, setIsDisabled] = useState(false);
+    //! On Finish
+    const onFinish = useCallback((values) => {
+        const newData = {
+            ...values,
+            is_default: isChecked,
+            type,
+        };
+        setIsDisabled(true);
+        return (!isDisabled &&
+            eval(data?.id ? `updateAddress(newData, data.id)` : `createAddress(newData)`).then(() => {
+                closePopup();
+            }));
+    }, [data, isChecked, createAddress, updateAddress, isDisabled]);
+    return (React.createElement(AddressFormStyle, { theme: theme(globalTheme), className: 'address-form-block' },
+        React.createElement(Text, { tag: `h6`, text: title, className: `account-h6 account-font-bold account-primary-color1 address-form-block-title` }),
+        React.createElement(FormBuilder, { formOptions: {
+                initialValues: data,
+            }, onSubmit: onFinish, fields: formFields, className: 'form-wrapper' },
+            React.createElement("div", { className: `default-info-wrap` }, !data?.is_default ? (React.createElement("div", { className: `banner-wrap cursor-pointer`, onClick: () => setIsChecked(!isChecked) },
+                isChecked ? (React.createElement("div", { className: 'checkbox-wrap', role: 'button' },
+                    React.createElement(CheckboxCheckedIcon, null))) : (React.createElement("div", { className: 'checkbox-wrap', role: 'button' },
+                    React.createElement(CheckboxIcon, null))),
+                React.createElement(Text, { className: `account-p account-p2 account-font-medium account-primary-color1 address-form-is-default-checkbox`, text: `${type === 'shipping' ? 'makeYourDefaultShippingAddress' : type == 'billing' ? 'makeYourDefaultBillingAddress' : 'makeYourDefaultAddress'}` }))) : (React.createElement(Text, { className: `account-p account-p2 account-font-medium account-primary-color1 address-form-is-default`, text: `${type === 'shipping' ? 'thisYourDefaultShippingAddress' : type == 'billing' ? 'thisYourDefaultBillingAddress' : 'thisYourDefaultAddress'}` }))),
+            React.createElement("div", { className: `cancel-and-save-wrap` },
+                React.createElement(AccountButton, { text: `cancel`, onClick: closePopup, btnType: `green-large-text`, className: `address-form-cancel-btn` }),
+                React.createElement(AccountButton, { type: 'submit', text: `saveAndApply`, btnType: `full-width`, className: `address-form-cancel-submit ${isDisabled ? 'disabled' : ''}` })))));
+});
+export default AddressForm;

package/dist/{components → modules/address}/AddressItem/index.d.ts

@@ -1,12 +1,10 @@
 export default AddressItem;
-declare function AddressItem({ title, data, checkout_review, select_address, type, onClick, checkedId, setCheckedId }: {
+declare function AddressItem({ type, title, data, checkout_review, select_address, onClick }: {
+    type: any;
     title: any;
     data: any;
     checkout_review: any;
     select_address: any;
-    type: any;
     onClick: any;
-    checkedId: any;
-    setCheckedId: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/{components → modules/address}/AddressItem/index.js

@@ -1,22 +1,22 @@
 import React, { useCallback } from 'react';
 import { Text, useUi } from '@weareconceptstudio/core';
+import { useAddressContext } from '../AddressProvider';
 //* Components
 import AddressForm from '../AddressForm';
-import AccountButton from '../ui/AccountButton';
-import WarningMessageForPopup from '../ui/WarningMessageForPopup';
+import AccountButton from '../../../components/ui/AccountButton';
+import WarningMessageForPopup from '../../../components/ui/WarningMessageForPopup';
 //* Style
 import AddressItemStyle from './style';
-const AddressItem = ({ title, data, checkout_review, select_address, type, onClick, checkedId, setCheckedId }) => {
+const AddressItem = ({ type, title, data, checkout_review, select_address, onClick }) => {
     const { openPopup } = useUi();
+    const { formFields, createAddress, updateAddress, deleteAddress, selectedAddresses, setSelectedAddresses } = useAddressContext();
     //! Handle Popups
     const handleDeletePopup = useCallback(() => {
         openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteAddressMessage', description: 'confirmDeleteAddress', onRemove: () => deleteAddress(data.id, data.type) }), { className: 'messagePopup' });
     }, [data]);
     const handleEditAddressPopup = useCallback(() => {
-        openPopup(React.createElement(AddressForm, { data: data, selected: { value: true, type: data.type }, title: type === 'billing' ? `updateYourBillingAddress` : `updateYourShippingAddress` }));
+        openPopup(React.createElement(AddressForm, { title: type === 'billing' ? `updateYourBillingAddress` : type == 'shipping' ? `updateYourShippingAddress` : 'updateYourAddress', data: data, formFields: formFields, createAddress: createAddress, updateAddress: updateAddress }));
     }, [data]);
-    //TODO:
-    const deleteAddress = () => { };
     return (data && (React.createElement(AddressItemStyle, { className: `item-container` },
         checkout_review && (React.createElement("div", { className: `change-address-wrap` },
             React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: title }),
@@ -26,11 +26,11 @@ const AddressItem = ({ title, data, checkout_review, select_address, type, onCli
                 React.createElement("div", { className: `personal-data-wrap` },
                     React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `${data.first_name} ${data.last_name}` }),
                     React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 col-wrap`, text: `${data.address_1}, ${data.address_2 ? data.address_2 + ',' : ''}` }),
-                    React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: `${data.region}, ${data.zip_code}, ${data.city}, ${data.country}` }),
-                    React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 phone col-wrap`, text: `${data.phone_number}` })),
-                data.is_default ? (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 margin-style is-default`, text: `${type === 'shipping' ? 'defaultShippingAddress' : 'defaultBillingAddress'}` })) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 margin-style opacity-zero`, text: `empty` })),
-                select_address && (React.createElement("div", { className: `circle-selected-wrap cursor-pointer ${checkedId === data.id ? 'active' : ''}`, onClick: () => setCheckedId(data.id) },
-                    React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${checkedId === data.id ? 'selected' : 'note-selected'}` },
+                    React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: `${data.city}` }),
+                    React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 phone col-wrap`, text: `${data.phone}` })),
+                data.is_default ? (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 margin-style is-default`, text: `${type === 'shipping' ? 'defaultShippingAddress' : type == 'billing' ? 'defaultBillingAddress' : 'defaultAddress'}` })) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 margin-style opacity-zero`, text: `empty` })),
+                select_address && (React.createElement("div", { className: `circle-selected-wrap cursor-pointer ${selectedAddresses?.id === data.id ? 'active' : ''}`, onClick: () => setSelectedAddresses(data) },
+                    React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedAddresses?.id === data.id ? 'selected' : 'note-selected'}` },
                         React.createElement("path", { d: 'M13.345 30.462c-1.062 0-1.859-0.531-2.39-1.328l-9.56-16.996c-0.797-1.328-0.266-2.921 1.062-3.718 1.328-0.531 2.921 0 3.718 1.328l7.436 13.012 12.481-20.183c0.797-1.328 2.39-1.593 3.718-0.797s1.593 2.39 0.797 3.718l-14.871 23.635c-0.531 0.797-1.328 1.328-2.39 1.328z' }))))),
             !checkout_review && (React.createElement("div", { className: `edit-remove-wrapper` },
                 React.createElement(AccountButton, { text: `edit`, btnType: `green-small-text`, onClick: handleEditAddressPopup, className: 'btn-one-address-version' }),

package/dist/modules/address/AddressProvider.d.ts

@@ -0,0 +1,7 @@
+export function useAddressContext(): any;
+export function AddressProvider({ addressType, addressFormFields, children }: {
+    addressType: any;
+    addressFormFields?: any[];
+    children: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/modules/address/AddressProvider.js

@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { api } from '@weareconceptstudio/core';
+const AddressContext = createContext(null);
+export const useAddressContext = () => {
+    const context = useContext(AddressContext);
+    return context;
+};
+export const AddressProvider = ({ addressType, addressFormFields = [], children }) => {
+    const [addresses, setAddresses] = useState(addressType ? { billing: [], shipping: [] } : []);
+    const [selectedAddresses, setSelectedAddresses] = useState(addressType ? { billing: {}, shipping: {} } : {});
+    const hasAddressType = useMemo(() => {
+        return !!addressType;
+    }, [addressType]);
+    const hasCheckoutAddress = useMemo(() => {
+        if (hasAddressType) {
+            return !(addresses.shipping.length > 0 && addresses.billing.length > 0);
+        }
+        return !(addresses.length > 0);
+    }, [hasAddressType, addresses]);
+    useEffect(() => {
+        api.get({ url: 'addresses' }).then((res) => {
+            setAddresses(res.data);
+            setSelectedAddresses(addressType
+                ? {
+                    shipping: res.data[0],
+                    billing: res.data[0],
+                }
+                : res.data[0]);
+        });
+    }, []);
+    const createAddress = async (data) => {
+        return await api.post('addresses', data).then((res) => {
+            setAddresses(res.data);
+        });
+    };
+    const updateAddress = async (data, addressId) => {
+        return await api.put(`addresses/${addressId}`, data).then((res) => {
+            setAddresses(res.data);
+        });
+    };
+    const deleteAddress = async (addressId) => {
+        return await api.delete(`addresses/${addressId}`).then((res) => {
+            setAddresses(res.data);
+        });
+    };
+    return (React.createElement(AddressContext.Provider, { value: {
+            hasAddressType,
+            formFields: addressFormFields,
+            createAddress,
+            updateAddress,
+            deleteAddress,
+            addresses,
+            selectedAddresses,
+            setSelectedAddresses,
+            hasCheckoutAddress,
+        } }, children));
+};

package/dist/{components → modules/address}/AddressWrap/index.d.ts

@@ -1,7 +1,8 @@
 export default AddressWrap;
-declare function AddressWrap({ title, addresses, className }: {
+declare function AddressWrap({ title, addNewText, type, className }: {
     title?: string;
-    addresses?: any[];
+    addNewText?: string;
+    type: any;
     className: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/{components → modules/address}/AddressWrap/index.js

@@ -1,24 +1,24 @@
 import React from 'react';
 import classNames from 'classnames';
+import { useAddressContext } from '../AddressProvider';
 import { Text, useUi } from '@weareconceptstudio/core';
-import AccountButton from '../ui/AccountButton';
+import AccountButton from '../../../components/ui/AccountButton';
 import EmptyAddress from '../EmptyAddress';
 import AddressItem from '../AddressItem';
 import AddressForm from '../AddressForm';
-const AddressWrap = ({ title = 'addresses', addresses = [], className }) => {
+const AddressWrap = ({ title = 'addresses', addNewText = 'addNewAdd', type, className }) => {
     const { openPopup } = useUi();
+    const { formFields, createAddress, updateAddress, addresses } = useAddressContext();
     const classString = classNames('address-wrap', {
         [className]: className,
     });
     const handleAddNewAddressPopup = () => {
-        openPopup(React.createElement(AddressForm, null));
+        openPopup(React.createElement(AddressForm, { type: type, title: 'addNewAddress', formFields: formFields, createAddress: createAddress, updateAddress: updateAddress }));
     };
     return (React.createElement("div", { className: classString },
         React.createElement("div", { className: `address-title-container` },
             React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: title }),
-            React.createElement(AccountButton, { text: `addNewAdd`, btnType: `purple-text`, onClick: handleAddNewAddressPopup })),
-        addresses.length > 0 ? (React.createElement("div", { className: `flex-wrapper` }, addresses.map((item, index) => {
-            return (React.createElement(AddressItem, { key: index, data: item }));
-        }))) : (React.createElement(EmptyAddress, null))));
+            React.createElement(AccountButton, { text: addNewText, btnType: `purple-text`, onClick: handleAddNewAddressPopup })),
+        addresses.length > 0 ? (React.createElement("div", { className: `flex-wrapper` }, addresses.map((item, index) => (React.createElement(AddressItem, { key: index, type: type, data: item }))))) : (React.createElement(EmptyAddress, null))));
 };
 export default AddressWrap;

package/dist/modules/address/AddressesTemplate/index.d.ts

@@ -0,0 +1,3 @@
+export default AddressesTemplate;
+declare function AddressesTemplate(): React.JSX.Element;
+import React from 'react';

package/dist/modules/address/AddressesTemplate/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useAddressContext } from '../AddressProvider';
+import AddressWrap from '../AddressWrap';
+import AddressesTemplateStyle from './style';
+const AddressesTemplate = () => {
+    const { hasAddressType } = useAddressContext();
+    return (React.createElement(AddressesTemplateStyle, null, hasAddressType ? (React.createElement(React.Fragment, null,
+        React.createElement(AddressWrap, { type: 'shipping', title: 'shippingAddress', addNewText: 'addNewShippingAddress' }),
+        React.createElement(AddressWrap, { type: 'billing', title: 'billingAddress', addNewText: 'addNewBillingAddress' }))) : (React.createElement(AddressWrap, null))));
+};
+export default AddressesTemplate;

package/dist/modules/address/SelectAddress/index.d.ts

@@ -0,0 +1,6 @@
+export default SelectAddress;
+declare function SelectAddress({ type, title }: {
+    type: any;
+    title: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/modules/address/SelectAddress/index.js

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { useAddressContext } from '../AddressProvider';
+import { Text, useUi } from '@weareconceptstudio/core';
+import AddressForm from '../AddressForm';
+import AddressItem from '../AddressItem';
+import AccountButton from '../../../components/ui/AccountButton';
+import SelectAddressStyle from './style';
+const SelectAddress = ({ type, title }) => {
+    const { openPopup } = useUi();
+    const { addresses, formFields, hasAddressType, createAddress } = useAddressContext();
+    const handleNewAddressPopup = () => {
+        openPopup(React.createElement(AddressForm, { title: `addNewShippingAddress`, formFields: formFields, createAddress: createAddress, selected: { value: false, type: 'shipping' } }));
+    };
+    return (React.createElement(SelectAddressStyle, null,
+        React.createElement("div", { className: `select-address-wrap` },
+            React.createElement(Text, { tag: `h6`, className: hasAddressType ? `account-h6 account-font-bold account-primary-color1` : 'account-p account-p2 account-font-bold account-primary-color1', text: title }),
+            React.createElement(AccountButton, { onClick: handleNewAddressPopup, text: `addNewAdd`, btnType: hasAddressType ? `purple-text` : 'green-small-text' })),
+        addresses?.length > 0 ? (React.createElement("div", { className: `flex-wrapper` }, addresses.map((item, index) => {
+            return (React.createElement(AddressItem, { id: item.id, type: type, data: item, key: index, select_address: true, checkout_review: false }));
+        }))) : null));
+};
+export default SelectAddress;

package/dist/modules/address/SelectAddress/style.d.ts

@@ -0,0 +1,2 @@
+export default SelectAddressStyle;
+declare const SelectAddressStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;