@weareconceptstudio/account 0.0.7 → 0.0.9

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;

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

@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+const SelectAddressStyle = styled.div `
+	--account_selectAddressWrapMBot: var(--sp5x);
+	--account_itemDistance: var(--sp3x);
+
+	.select-address-wrap {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: var(--account_selectAddressWrapMBot);
+	}
+
+	.flex-wrapper {
+		display: flex;
+		flex-wrap: wrap;
+		margin-left: calc(-1 * calc(var(--account_itemDistance) / 2));
+		margin-right: calc(-1 * calc(var(--account_itemDistance) / 2));
+
+		.item-container {
+			&:not(:nth-child(1), :nth-child(2)) {
+				margin-top: var(--account_itemDistance) !important;
+			}
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_selectAddressWrapMBot: var(--sp4x);
+		--account_itemDistance: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_selectAddressWrapMBot: var(--sp3x);
+		--account_itemDistance: var(--sp2x);
+
+		.select-address-wrap {
+			.btn-wrap {
+				margin-top: var(--sp1x);
+			}
+		}
+	}
+`;
+export default SelectAddressStyle;

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

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

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

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react';
+import { useUi } from '@weareconceptstudio/core';
+import { useAddressContext, AddressProvider } from '../AddressProvider';
+import SelectShippingBillingPopup from '../SelectShippingBillingPopup';
+import AddressItem from '../AddressItem';
+const SelectShippingBilling = () => {
+    const { openPopup } = useUi();
+    const addressContext = useAddressContext();
+    const { selectedAddresses, setSelectedAddresses, addresses } = addressContext;
+    //! Handle Popups
+    const handleAddNewShippingAddressPopup = useCallback(() => {
+        openPopup(React.createElement(AddressForm, { title: `addNewShippingAddress`, selected: { value: false, type: 'shipping' } }));
+    }, []);
+    const handleAddNewBillingAddressPopup = useCallback(() => {
+        openPopup(React.createElement(AddressForm, { title: `addNewBillingAddress`, selected: { value: false, type: 'billing' } }));
+    }, []);
+    const handleShippingChangePopup = useCallback(() => {
+        openPopup(React.createElement(AddressProvider, { ...addressContext },
+            React.createElement(SelectShippingBillingPopup, { type: 'shipping', data: addresses, title: 'selectShippingAddress', selectedAddresses: selectedAddresses, setSelectedAddresses: setSelectedAddresses, handleClick: handleAddNewShippingAddressPopup })));
+    }, [addresses, selectedAddresses]);
+    const handleBillingChangePopup = useCallback(() => {
+        openPopup(React.createElement(AddressProvider, { ...addressContext },
+            React.createElement(SelectShippingBillingPopup, { type: 'billing', data: addresses, title: 'selectBillingAddress', selectedAddresses: selectedAddresses, setSelectedAddresses: setSelectedAddresses, handleClick: handleAddNewBillingAddressPopup })));
+    }, [addresses, selectedAddresses]);
+    return (React.createElement("div", { style: { marginTop: 50 }, className: 'shipping-billing-change-wrapper' },
+        React.createElement(AddressItem, { checkout_review: true, type: 'shipping', select_address: false, title: 'shippingAddress', data: selectedAddresses.shipping, onClick: handleShippingChangePopup, setSelectedAddresses: setSelectedAddresses }),
+        React.createElement(AddressItem, { checkout_review: true, type: 'billing', select_address: false, title: 'billingAddress', data: selectedAddresses.billing, onClick: handleBillingChangePopup, setSelectedAddresses: setSelectedAddresses })));
+};
+export default SelectShippingBilling;

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

@@ -0,0 +1,3 @@
+export default SelectShippingBillingPopup;
+declare const SelectShippingBillingPopup: React.NamedExoticComponent<object>;
+import React from 'react';

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

@@ -0,0 +1,25 @@
+import React, { memo as Memo, useState, useCallback } from 'react';
+import { Text, useUi } from '@weareconceptstudio/core';
+import { useTheme } from 'styled-components';
+import theme from '../../../styles/theme';
+//* Components
+import SelectAddress from '../SelectAddress';
+import AccountButton from '../../../components/ui/AccountButton';
+//* Style
+import SelectShippingBillingStyle from './style';
+const SelectShippingBillingPopup = Memo(({ title, type }) => {
+    const { closePopup } = useUi();
+    const globalTheme = useTheme();
+    // const handleAddressChangeSubmit = useCallback(() => {
+    // 	let findItem = data.find((item) => item.id === checkedId);
+    // 	setSelectedAddresses({ ...selectedAddresses, [findItem?.type]: { ...findItem } });
+    // 	// getCart({ addressId: checkedId });
+    // 	closePopup();
+    // }, [data, selectedAddresses, checkedId]);
+    return (React.createElement(SelectShippingBillingStyle, { theme: theme(globalTheme) },
+        React.createElement(SelectAddress, { type: type, title: title }),
+        React.createElement("div", { className: `cancel-and-save-wrap` },
+            React.createElement(AccountButton, { btnType: `green-large-text`, text: `cancel`, onClick: closePopup }),
+            React.createElement(AccountButton, { btnType: `full-width`, text: `saveAndApply` }))));
+});
+export default SelectShippingBillingPopup;

package/dist/{components/SelectShippingBilling → modules/address/SelectShippingBillingPopup}/style.js

@@ -1,31 +1,8 @@
 import styled from 'styled-components';
 const SelectShippingBillingAddressStyle = styled.section `
-	--account_selectAddressWrapMBot: var(--sp5x);
-	--account_itemDistance: var(--sp3x);
 	--account_cancelAndSaveWrapMTop: var(--sp5x);
 	--account_cancelDistance: var(--sp5x);
 
-	.select-address-wrap {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: var(--account_selectAddressWrapMBot);
-	}
-
-	.flex-wrapper {
-		display: flex;
-		flex-wrap: wrap;
-		margin-left: calc(-1 * calc(var(--account_itemDistance) / 2));
-		margin-right: calc(-1 * calc(var(--account_itemDistance) / 2));
-
-		.item-container {
-			&:not(:nth-child(1), :nth-child(2)) {
-				margin-top: var(--account_itemDistance) !important;
-			}
-		}
-	}
-
 	.cancel-and-save-wrap {
 		display: flex;
 		justify-content: flex-end;
@@ -40,50 +17,36 @@ const SelectShippingBillingAddressStyle = styled.section `
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
-		--account_selectAddressWrapMBot: var(--sp4x);
-		--account_itemDistance: var(--sp3x);
 		--account_cancelAndSaveWrapMTop: var(--sp4x);
 		--account_cancelDistance: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
-		--account_selectAddressWrapMBot: var(--sp3x);
-		--account_itemDistance: var(--sp2x);
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
-		--account_selectAddressWrapMBot: var(--sp3x);
-		--account_itemDistance: var(--sp2x);
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp3x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
-		--account_selectAddressWrapMBot: var(--sp3x);
-		--account_itemDistance: var(--sp2x);
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp2-5x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
-		--account_selectAddressWrapMBot: var(--sp3x);
-		--account_itemDistance: var(--sp2x);
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp2-5x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
-		--account_selectAddressWrapMBot: var(--sp3x);
-		--account_itemDistance: var(--sp2x);
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp2-5x);
 	}
 
 	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
-		--account_selectAddressWrapMBot: var(--sp3x);
-		--account_itemDistance: var(--sp2x);
 		--account_cancelAndSaveWrapMTop: var(--sp3x);
 		--account_cancelDistance: var(--sp2x);
 
@@ -101,12 +64,6 @@ const SelectShippingBillingAddressStyle = styled.section `
 				}
 			}
 		}
-
-		.select-address-wrap {
-			.btn-wrap {
-				margin-top: var(--sp1x);
-			}
-		}
 	}
 `;
 export default SelectShippingBillingAddressStyle;

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

@@ -0,0 +1,15 @@
+import React, { memo as Memo } from 'react';
+import { useAddressContext } from '../AddressProvider';
+import { Text } from '@weareconceptstudio/core';
+import { FormBuilder } from '@weareconceptstudio/form';
+//* Style
+import ShippingBillingFormStyle from './style';
+const ShippingBillingForm = Memo(({ firstStepFormRef, title, className }) => {
+    const { createAddress, formFields } = useAddressContext();
+    return (React.createElement(ShippingBillingFormStyle, { className: className || '' },
+        React.createElement(Text, { text: title, className: `account-p account-p2 account-font-bold account-primary-color1 title` }),
+        React.createElement(FormBuilder, { formOptions: {
+                ref: firstStepFormRef,
+            }, onSubmit: createAddress, fields: formFields, className: 'form-wrapper' })));
+});
+export default ShippingBillingForm;

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

@@ -0,0 +1,9 @@
+export * from "./AddressProvider";
+export { default as AddressesTemplate } from "./AddressesTemplate";
+export { default as AddressWrap } from "./AddressWrap";
+export { default as AddressForm } from "./AddressForm";
+export { default as AddressItem } from "./AddressItem";
+export { default as ShippingBillingInfo } from "./ShippingBillingInfo";
+export { default as ShippingBillingForm } from "./ShippingBillingForm";
+export { default as SelectShippingBilling } from "./SelectShippingBilling";
+export { default as SelectShippingBillingPopup } from "./SelectShippingBillingPopup";

package/dist/modules/address/index.js

@@ -0,0 +1,9 @@
+export * from './AddressProvider';
+export { default as AddressesTemplate } from './AddressesTemplate';
+export { default as AddressWrap } from './AddressWrap';
+export { default as AddressForm } from './AddressForm';
+export { default as AddressItem } from './AddressItem';
+export { default as ShippingBillingInfo } from './ShippingBillingInfo';
+export { default as ShippingBillingForm } from './ShippingBillingForm';
+export { default as SelectShippingBilling } from './SelectShippingBilling';
+export { default as SelectShippingBillingPopup } from './SelectShippingBillingPopup';

package/dist/modules/index.d.ts

@@ -0,0 +1 @@
+export * from "./address";

package/dist/modules/index.js

@@ -0,0 +1 @@
+export * from './address';

package/dist/templates/AccountSettingsTemplate/AccountInfo/index.js

@@ -10,7 +10,7 @@ const AccountInfo = ({ user, onAccountUpdate, displayFields = defaultDisplayFiel
     const [edit, setEdit] = useState(false);
     //! Handle Popup
     const handleSuccessPopup = useCallback(() => {
-        openPopup(React.createElement(WarningMessageForPopup, { title: 'Testing success message title', description: 'Testing success message description' }), { className: 'messagePopup' });
+        openPopup(React.createElement(WarningMessageForPopup, { title: 'yourSettingsHaveBeenSaved', description: 'yourSettingsHaveBeenSaved' }), { className: 'messagePopup' });
     }, []);
     //! On Finish
     const onFinish = useCallback((values) => {

package/dist/templates/AccountTemplate/index.js

@@ -16,7 +16,7 @@ const AccountTemplate = ({ isFullWidth = false, menuOptions = [], children, onSi
             React.createElement(Text, { tag: `span`, className: `account-p account-p1 account-font-bold sidebar-item`, text: menuItem.name }))));
     }, [menuOptions]);
     return (React.createElement(Page, { className: 'account use-account' },
-        React.createElement(AccountStyle, null,
+        React.createElement(AccountStyle, { className: 'account-container' },
             React.createElement("div", { className: 'account-wrap' },
                 React.createElement("aside", { className: 'sidebar' },
                     React.createElement("div", { className: `sidebar-inner-wrap` },

package/dist/templates/AccountTemplate/style.js

@@ -33,12 +33,6 @@ const AccountStyle = styled.section `
 			width: var(--account_sidebarWidth);
 			padding: 0 calc(var(--account_colDistance) / 2);
 
-			//! Sticky Styles
-			.sidebar-inner-wrap {
-				position: sticky;
-				top: calc(var(--account_accountPadT) + ${(props) => props.$headerHeight}px);
-			}
-
 			.my-acc-wrap {
 				.account-line {
 					width: var(--account_accountLineWidth);

package/dist/templates/CartTemplate/index.d.ts

@@ -1,11 +1,10 @@
 export default CartTemplate;
-declare function CartTemplate({ items, itemsCount, shippingCost, loading, children, shoppingUrl, subtotal, total, actions, btnDisabled, checkoutUrl }: {
+declare function CartTemplate({ items, itemsCount, shippingCost, loading, children, subtotal, total, actions, btnDisabled, checkoutUrl }: {
     items: any;
     itemsCount: any;
     shippingCost: any;
     loading: any;
     children: any;
-    shoppingUrl: any;
     subtotal: any;
     total: any;
     actions: any;