@weareconceptstudio/account 0.0.6 → 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(() => {
-    return (React.createElement(EmptyOrdersStyle, null,
-        React.createElement(Text, { tag: `h6`, className: `account-h6 account-font-bold account-primary-color1`, text: `emptyTitle` }),
-        React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 description`, text: `emptyDesc` })));
+    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(AccountButton, { text: `shopNow`, btnType: 'purple-text', url: shopUrl })));
 });
 export default EmptyOrders;

package/dist/components/EmptyOrders/style.js

@@ -3,7 +3,7 @@ const EmptyOrdersStyle = styled.section `
 	--account_descMTop: var(--sp3x);
 	--account_descMBot: var(--sp7x);
 
-	.description {
+	.empty-orders-description {
 		margin-top: var(--account_descMTop);
 		margin-bottom: var(--account_descMBot);
 	}

package/dist/components/OrderDetails/index.js

@@ -13,7 +13,7 @@ const OrderDetails = memo(({ className, status, order_date, delivery_date, order
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
                 translate('orderStatus'),
                 ":"),
-            status === 'delivered' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item value`, text: 'delivered' })) : status === 'canceled' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item value`, text: 'canceled' })) : (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item value`, text: 'inProgress' }))),
+            status === 'delivered' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item value delivered`, text: 'delivered' })) : status === 'canceled' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item value canceled`, text: 'canceled' })) : (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item value in-progress`, text: 'inProgress' }))),
         React.createElement("div", { className: `order-detail-item-wrap` },
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
                 translate('orderDate'),

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/OrdersList/OrderItem/index.js

@@ -12,7 +12,7 @@ const OrderItem = Memo(({ data }) => {
             React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: data.total_items })),
         React.createElement("div", { className: `col-item od-col-3 nowrap` },
             React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: `ID ${data.order_number}` })),
-        React.createElement("div", { className: `col-item od-col-4 nowrap` }, data.status === 'delivered' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item`, text: 'delivered' })) : data.status === 'canceled' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item`, text: 'canceled' })) : (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item`, text: 'inProgress' }))),
+        React.createElement("div", { className: `col-item od-col-4 nowrap` }, data.status === 'delivered' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item delivered`, text: 'delivered' })) : data.status === 'canceled' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item canceled`, text: 'canceled' })) : (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item in-progress`, text: 'inProgress' }))),
         React.createElement("div", { className: `col-item od-col-5 nowrap` },
             React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: handlePriceCheckFunc(data.total_price, data.currency) })),
         React.createElement("div", { className: `col-item od-col-6 nowrap` },

package/dist/components/OrdersList/index.js

@@ -45,7 +45,7 @@ const OrdersList = ({ data, total, pageSize, router, pathname, searchParams }) =
                         React.createElement("div", { className: `left-item-wrap last` },
                             React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1`, text: `${translate('orderNumber')}:` }),
                             React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: `ID ${item.order_number}` }))),
-                    React.createElement("div", { className: `right-wrap` }, item.status === 'delivered' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item`, text: 'delivered' })) : item.status === 'canceled' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item`, text: 'canceled' })) : (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item`, text: 'inProgress' })))),
+                    React.createElement("div", { className: `right-wrap` }, item.status === 'delivered' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item delivered`, text: 'delivered' })) : item.status === 'canceled' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item canceled`, text: 'canceled' })) : (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item in-progress`, text: 'inProgress' })))),
                 React.createElement("div", { className: `last-col-wrap` },
                     React.createElement("div", { className: `left-wrap` },
                         React.createElement("div", { className: `left-item-wrap` },

package/dist/components/TotalCheckout/index.js

@@ -16,7 +16,6 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
     useEffect(() => {
         setHeaderHeight(document.getElementsByTagName('header')[0]?.clientHeight);
     }, [winWidth]);
-    console.log(shippingCost);
     return (React.createElement(TotalCheckoutStyle, { "$headerHeight": headerHeight },
         React.createElement("div", { className: `cart-main-wrap` },
             React.createElement("div", { className: `left-panel-wrap panel` }, children),

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,
@@ -39,17 +35,13 @@ const Item = memo(({ data, edit, favorite, remove, select, isLast, favorites, ac
             React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, data?.product?.sale_price ? (React.createElement("div", null,
                 React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 alignRight`, text: handlePriceCheckFunc(data?.product?.sale_price, 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, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 alignRight`, text: handlePriceCheckFunc(data.product?.price, currency) }))),
-            console.log(data.total),
             React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap` },
                 React.createElement("div", { className: `col-item-inner-wrap` },
                     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;
         }
@@ -39,7 +36,7 @@ const ItemMobile = memo(({ data, additionalParameters, isLast, favorites }) => {
                     // 	className={`quantity-select-mobile-wrap`}
                     // 	onChange={(val) => addToCart({ productId: data.product.id, variantId: data.selectedVariant.id, optionId: data.selectedOption.id, qty: val, update: true })}
                     // />
-                    React.createElement(Select, { allowSearch: false, options: selectionList, value: 1, onChange: (val) => console.log(val) })) : (React.createElement("div", { className: `mobile-info-item` },
+                    React.createElement(Select, { allowSearch: false, options: selectionList, value: 1, onChange: () => { } })) : (React.createElement("div", { className: `mobile-info-item` },
                         React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1`, text: `quantityWithSymbol` }),
                         "\u00A0",
                         React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1`, text: data.qty }))))) : (React.createElement("div", { className: `mobile-info-item` },
@@ -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/components/ui/AccountButton/style.js

@@ -25,7 +25,9 @@ const AccountButtonStyle = styled.div `
 		border: 2px solid var(--account_primaryColor14);
 		color: var(--account_backgroundColor);
 		border-radius: var(--account_btnBorderRad);
-		transition: 0.1s;
+		transition:
+			background-color var(--account_trTime) ease-out,
+			border var(--account_trTime) ease-out;
 		display: inline-flex;
 		justify-content: center;
 		align-items: center;

package/dist/components/ui/WarningMessageForPopup/index.js

@@ -9,12 +9,12 @@ import AccountButton from '../AccountButton';
 const WarningMessageForPopup = React.memo(({ isDelete = false, isThankYou = false, onRemove, title, description, globalData }) => {
     const { closePopup } = useUi();
     const globalTheme = useTheme();
-    return (React.createElement(WarningMessageForPopupStyle, { theme: theme(globalTheme) },
-        React.createElement(Text, { tag: `h6`, className: `account-h6 account-font-bold account-primary-color1`, text: title }),
+    return (React.createElement(WarningMessageForPopupStyle, { className: 'warning-message-block', theme: theme(globalTheme) },
+        React.createElement(Text, { tag: `h6`, className: `account-h6 account-font-bold account-primary-color1 warning-message-title`, text: title }),
         React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 confirm-delete-address-text`, text: description }),
-        React.createElement("div", { className: `cancel-remove-wrap ${!isDelete && 'mobile-margin'}` }, isDelete ? (React.createElement(React.Fragment, null,
-            React.createElement(AccountButton, { btnType: `green-large-text`, text: `cancel`, onClick: closePopup }),
-            React.createElement(AccountButton, { text: `remove`, btnType: `full-width`, onClick: () => {
+        React.createElement("div", { className: `cancel-remove-wrap ${!isDelete ? 'mobile-margin' : ''}` }, isDelete ? (React.createElement(React.Fragment, null,
+            React.createElement(AccountButton, { text: `cancel`, onClick: closePopup, btnType: `green-large-text`, className: 'warning-message-popup-close' }),
+            React.createElement(AccountButton, { text: `remove`, btnType: `full-width`, className: 'warning-message-popup-remove', onClick: () => {
                     onRemove();
                     closePopup();
                 } }))) : isThankYou ? (
@@ -24,8 +24,9 @@ const WarningMessageForPopup = React.memo(({ isDelete = false, isThankYou = fals
         // 		btnType={`full-width`}
         // 		text={`continueToShop`}
         // 		url={globalData?.menu_bar[0]?.slug}
+        // 		className={'warning-message-popup-continue'}
         // 	/>
         // ) : null
-        React.createElement("div", null, "Global Data")) : (React.createElement(AccountButton, { text: `done`, btnType: `full-width`, onClick: closePopup })))));
+        React.createElement("div", null, "Global Data")) : (React.createElement(AccountButton, { text: `done`, onClick: closePopup, btnType: `full-width`, className: 'warning-message-popup-done' })))));
 });
 export default WarningMessageForPopup;

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,16 +26,16 @@ 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`, 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 }),
+                React.createElement(AccountButton, { text: `edit`, btnType: `green-small-text`, onClick: handleEditAddressPopup, className: 'btn-one-address-version' }),
                 !select_address && !data.is_default && (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: `vertical-line` }),
-                    React.createElement(AccountButton, { text: `remove`, btnType: `green-small-text`, onClick: handleDeletePopup })))))))));
+                    React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: 'btn-more-address-version' })))))))));
 };
 export default AddressItem;

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';