@weareconceptstudio/account 0.0.0 → 0.0.1

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

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

package/dist/templates/AddressesTemplate/index.js

@@ -0,0 +1,21 @@
+import React, { memo, useCallback } from 'react';
+import { useUi, Text } from '@weareconceptstudio/core';
+//* Components
+import { AccountButton, AddressForm, AddressItem } from '../../components';
+//* Style
+import AddressesTemplateStyle from './style';
+const AddressesTemplate = memo(({ shipping_addresses, billing_addresses }) => {
+    const { openPopup } = useUi();
+    //! Handle Add New Address Click
+    const handleAddNewAddressPopup = useCallback((type) => {
+        openPopup(React.createElement(AddressForm, { title: `addNew${type.charAt(0).toUpperCase() + type.slice(1)}Address`, selected: { values: false, type } }));
+    }, []);
+    return (React.createElement(AddressesTemplateStyle, null, ['shipping', 'billing'].map((type) => (React.createElement("div", { key: type, className: `address-wrap ${type}` },
+        React.createElement("div", { className: `address-title-container` },
+            React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: `${type}Address` }),
+            React.createElement(AccountButton, { text: `addNewAdd`, btnType: `purple-text`, onClick: () => handleAddNewAddressPopup(type) })),
+        eval(`${type}_addresses`) && eval(`${type}_addresses`).length > 0 ? (React.createElement("div", { className: `flex-wrapper` }, eval(`${type}_addresses`).map((item, index) => {
+            return (React.createElement(AddressItem, { select_address: false, checkout_review: false, data: item, type: type, key: index }));
+        }))) : (React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 empty-address-text`, text: `emptyAddress` })))))));
+});
+export default AddressesTemplate;

package/dist/templates/AddressesTemplate/style.d.ts

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

package/dist/templates/AddressesTemplate/style.js

@@ -0,0 +1,89 @@
+import styled from 'styled-components';
+const AddressesTemplateStyle = styled.section `
+	--account_addressWrapMTop: var(--sp16x);
+	--account_emptyAddressTextMTop: var(--sp2-5x);
+
+	--account_itemDistance: var(--sp5x);
+	--account_flexWrapperMTop: var(--sp5x);
+
+	.billing {
+		margin-top: var(--account_addressWrapMTop);
+	}
+
+	.address-wrap {
+		.address-title-container {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.empty-address-text {
+			margin-top: var(--account_emptyAddressTextMTop);
+		}
+
+		.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));
+			margin-top: var(--account_flexWrapperMTop);
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_addressWrapMTop: var(--sp11x);
+		--account_emptyAddressTextMTop: var(--sp2x);
+
+		--account_itemDistance: var(--sp4x);
+		--account_flexWrapperMTop: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_addressWrapMTop: var(--sp8x);
+		--account_emptyAddressTextMTop: var(--sp2x);
+
+		--account_itemDistance: var(--sp4x);
+		--account_flexWrapperMTop: 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_addressWrapMTop: var(--sp8x);
+		--account_emptyAddressTextMTop: var(--sp2x);
+
+		--account_itemDistance: var(--sp4x);
+		--account_flexWrapperMTop: 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_addressWrapMTop: var(--sp8x);
+		--account_emptyAddressTextMTop: var(--sp2x);
+
+		--account_itemDistance: var(--sp3x);
+		--account_flexWrapperMTop: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_addressWrapMTop: var(--sp8x);
+		--account_emptyAddressTextMTop: var(--sp1-5x);
+
+		--account_itemDistance: var(--sp3x);
+		--account_flexWrapperMTop: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_addressWrapMTop: var(--sp8x);
+		--account_emptyAddressTextMTop: var(--sp1-5x);
+
+		--account_itemDistance: var(--sp3x);
+		--account_flexWrapperMTop: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_addressWrapMTop: var(--sp6x);
+		--account_emptyAddressTextMTop: var(--sp2x);
+
+		--account_flexWrapperMTop: var(--sp2x);
+		--account_itemDistance: var(--sp2x);
+	}
+`;
+export default AddressesTemplateStyle;

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

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

package/dist/templates/CartTemplate/index.js

@@ -0,0 +1,23 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Container, Page } from '@weareconceptstudio/core';
+import { EmptyCart, TotalCheckout, AccountButton } from '../../components';
+import CartTemplateStyle from './style';
+const CartTemplate = memo(({ items, itemsCount, loading, favorites, children, shoppingUrl }) => {
+    //! State
+    const [isAnyItemOutOfStock, setIsAnyItemOutOfStock] = useState();
+    useEffect(() => {
+        setIsAnyItemOutOfStock(items.find((item) => item.qty > item.qty));
+    }, [items]);
+    return (React.createElement(Page, { className: 'cart use-account' },
+        React.createElement(Container, null,
+            React.createElement(CartTemplateStyle, null,
+                React.createElement(TotalCheckout, { buttonProps: {
+                        url: '/checkout/',
+                        text: 'proceedToCheckout',
+                        disabled: !!isAnyItemOutOfStock,
+                    } }, itemsCount > 0 ? (React.createElement(React.Fragment, null,
+                    React.createElement("div", null, "Cart Items"),
+                    shoppingUrl ? (React.createElement(AccountButton, { btnType: `purple-text`, text: `continueShopping`, className: `continue-shop-text`, url: shoppingUrl })) : null)) : (!loading && (React.createElement(EmptyCart, { data: items, shoppingUrl: shoppingUrl })))),
+                children))));
+});
+export default CartTemplate;

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

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

package/dist/templates/CartTemplate/style.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+const CartTemplateStyle = styled.section `
+	--account_continueShopTextMT: var(--sp7x);
+
+	.continue-shop-text {
+		margin-top: var(--account_continueShopTextMT);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_continueShopTextMT: var(--sp5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_continueShopTextMT: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_continueShopTextMT: var(--sp4x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_continueShopTextMT: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_continueShopTextMT: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_continueShopTextMT: var(--sp3x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_continueShopTextMT: var(--sp3x);
+	}
+`;
+export default CartTemplateStyle;

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

@@ -0,0 +1,9 @@
+export default CheckoutTemplate;
+declare function CheckoutTemplate({ items, total, subtotal, shippingCost, currency }: {
+    items: any;
+    total: any;
+    subtotal: any;
+    shippingCost: any;
+    currency: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/templates/CheckoutTemplate/index.js

@@ -0,0 +1,155 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Container, useUi, Page } from '@weareconceptstudio/core';
+//* Style
+import CheckoutTemplateStyle from './style';
+//* Components
+import { AddressForm, AddressItem, CustomCheckbox, SelectShippingBilling, Sequence, ShippingBillingForm, TotalCheckout } from '../../components';
+//TODO: router.push, createAddress, shipping_addresses, billing_addresses, globalData, user, items, total, subtotal,  shippingCost, currency, getCart , checkout
+const createAddress = () => { };
+const shipping_addresses = [
+    {
+        first_name: 'Karlen',
+        last_name: 'Nersisyan',
+        address_1: 'Araratyan st.',
+        address_2: '58/5',
+        region: {
+            name: 'Sengavit',
+        },
+        zip_code: '3027',
+        city: {
+            name: 'Yerevan',
+        },
+        country: {
+            name: 'Armenia',
+        },
+        phone_number: '077250899',
+        is_default: true,
+    },
+];
+const billing_addresses = [
+    {
+        first_name: 'Karlen',
+        last_name: 'Nersisyan',
+        address_1: 'Araratyan st.',
+        address_2: '58/5',
+        region: {
+            name: 'Sengavit',
+        },
+        zip_code: '3027',
+        city: {
+            name: 'Yerevan',
+        },
+        country: {
+            name: 'Armenia',
+        },
+        phone_number: '077250899',
+        is_default: true,
+    },
+];
+const globalData = {
+    countries: [],
+};
+const user = {
+    verified: true,
+};
+const getCart = () => { };
+const checkout = () => { };
+const CheckoutTemplate = ({ items, total, subtotal, shippingCost, currency }) => {
+    const { openPopup } = useUi();
+    //! Ref
+    const formRef = useRef();
+    const getDefaultShippingAddress = useMemo(() => {
+        return shipping_addresses.find((item) => item.is_default);
+    }, [shipping_addresses]);
+    const getDefaultBillingAddress = useMemo(() => {
+        return billing_addresses.find((item) => item.is_default);
+    }, [billing_addresses]);
+    //! States
+    const [hide, setHide] = useState(false);
+    const [countryShippingId, setShippingCountryId] = useState(globalData.countries.length > 1 ? '' : 1);
+    const [countryBillingId, setBillingCountryId] = useState(globalData.countries.length > 1 ? '' : 1);
+    const [regionShippingId, setShippingRegionId] = useState();
+    const [regionBillingId, setBillingRegionId] = useState();
+    const [selectedAddresses, setSelectedAddresses] = useState({ shipping: getDefaultShippingAddress, billing: getDefaultBillingAddress });
+    useEffect(() => {
+        setSelectedAddresses({ shipping: getDefaultShippingAddress, billing: getDefaultBillingAddress });
+        getCart({ addressId: getDefaultShippingAddress?.id });
+    }, [getDefaultShippingAddress, getDefaultBillingAddress]);
+    const handleCheckoutFirstStep = useCallback(() => {
+        return formRef.current.submit();
+    }, []);
+    const handleCheckoutSecondStep = useCallback((note) => {
+        return checkout({ shipping_address_id: selectedAddresses.shipping.id, billing_address_id: selectedAddresses.billing.id, subtotal, total, note });
+    }, [total, subtotal, selectedAddresses]);
+    const handleFormFinish = useCallback((vals) => {
+        if (hide) {
+            let shippingAddress = Object.assign({}, vals.shipping);
+            let billingAddress = Object.assign({}, vals.shipping);
+            billingAddress.type = 'billing';
+            return createAddress({ ...shippingAddress }), createAddress({ ...billingAddress });
+        }
+        else {
+            return vals.shipping && createAddress({ ...vals.shipping }), vals.billing && createAddress({ ...vals.billing });
+        }
+    }, [hide]);
+    //! handle form change
+    const handleFormChange = useCallback((val) => {
+        const name = Object.keys(Object.values(val)[0])[0];
+        const value = Object.values(val)[0]?.[`${name}`];
+        if (name === 'country_id') {
+            setShippingCountryId(value);
+            setBillingCountryId(value);
+            setShippingRegionId('');
+            setBillingRegionId('');
+            formRef.current.setFieldsValue({ region_id: '', city_id: '' });
+        }
+        else if (name === 'region_id') {
+            setShippingRegionId(value);
+            setBillingRegionId(value);
+            formRef.current.setFieldsValue({ city_id: '' });
+        }
+    }, []);
+    //! 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(SelectShippingBilling, { type: 'shipping', data: shipping_addresses, title: 'selectShippingAddress', selectedAddresses: selectedAddresses, setSelectedAddresses: setSelectedAddresses, handleClick: handleAddNewShippingAddressPopup }));
+    }, [shipping_addresses, selectedAddresses]);
+    const handleBillingChangePopup = useCallback(() => {
+        openPopup(React.createElement(SelectShippingBilling, { type: 'billing', data: billing_addresses, title: 'selectBillingAddress', selectedAddresses: selectedAddresses, setSelectedAddresses: setSelectedAddresses, handleClick: handleAddNewBillingAddressPopup }));
+    }, [billing_addresses, selectedAddresses]);
+    //! User data
+    const checkStep = {
+        isShipping: !(shipping_addresses.length > 0 && billing_addresses.length > 0),
+        isReview: true,
+    };
+    return (React.createElement(Page, { className: 'checkout use-account' },
+        React.createElement(Container, null, user && user.verified && (React.createElement(CheckoutTemplateStyle, null,
+            React.createElement(TotalCheckout, { total: total, products: items, subtotal: subtotal, currency: currency, shippingCost: shippingCost, isShipping: checkStep.isShipping, buttonProps: {
+                    url: false,
+                    type: checkStep.isShipping ? 'submit' : 'button',
+                    text: checkStep.isShipping ? 'proceedToCheckout' : 'proceedToPayment',
+                    handleClick: checkStep.isShipping ? handleCheckoutFirstStep : handleCheckoutSecondStep,
+                } },
+                React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
+                checkStep.isShipping ? (React.createElement("div", { className: `billing-shipping-form-wrap` },
+                    shipping_addresses.length > 0 ? (React.createElement("div", { className: `shipping-address-wrapper` },
+                        React.createElement(AddressItem, { title: 'shippingAddress', checkout_review: false, select_address: false, type: 'shipping', data: getDefaultShippingAddress, onClick: handleShippingChangePopup }))) : (React.createElement(ShippingBillingForm, { type: `shipping`, title: `shippingAddress`, className: `shipping-wrapper`, countryId: countryShippingId, regionId: regionShippingId, 
+                        // ref={formRef}
+                        onChange: handleFormChange, onSubmit: handleFormFinish, initialValues: { shipping: { country_id: 1, type: 'shipping', is_default: true }, billing: { country_id: 1, type: 'billing', is_default: true } } })),
+                    !(billing_addresses?.length > 0 || shipping_addresses?.length > 0) ? (React.createElement(CustomCheckbox, { hide: hide, setHide: setHide })) : null,
+                    !hide &&
+                        (billing_addresses?.length > 0 ? (React.createElement("div", { className: `billing-address-wrapper` },
+                            React.createElement(AddressItem, { type: 'billing', select_address: false, checkout_review: false, title: 'billingAddress', data: getDefaultBillingAddress, onClick: handleBillingChangePopup }))) : (React.createElement(ShippingBillingForm, { type: `billing`, title: `billingAddress`, regionId: regionBillingId, countryId: countryBillingId, className: `billing-wrapper`, 
+                            // ref={formRef}
+                            onChange: handleFormChange, onSubmit: handleFormFinish, initialValues: { shipping: { country_id: 1, type: 'shipping', is_default: true }, billing: { country_id: 1, type: 'billing', is_default: true } } }))))) : (React.createElement(React.Fragment, null,
+                    React.createElement("div", { 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 })),
+                    React.createElement("div", null, "Cart Items")))))))));
+};
+export default CheckoutTemplate;

package/dist/templates/CheckoutTemplate/style.d.ts

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

package/dist/templates/CheckoutTemplate/style.js

@@ -0,0 +1,173 @@
+import styled from 'styled-components';
+const CheckoutTemplateStyle = styled.section `
+	--account_billingWrapperMTop: var(--sp5x);
+	--account_itemDistance: var(--sp5x);
+
+	--account_confWrapMaxWidth: var(--sp92x);
+	--account_confWrapMTop: var(--sp22x);
+	--account_titleMTop: var(--sp10x);
+	--account_descMTop: var(--sp3x);
+	--account_orderNumberMTop: var(--sp2x);
+	--account_btnWrapperMTop: var(--sp7x);
+	--account_imageWidth: 41.4%;
+	--account_imageHeight: 26.7%;
+
+	.billing-wrapper {
+		margin-top: var(--account_billingWrapperMTop);
+	}
+
+	.shipping-billing-change-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-internal-wrap {
+			height: fit-content !important;
+		}
+	}
+
+	.confirmation-wrapper {
+		max-width: var(--account_confWrapMaxWidth);
+		margin-top: var(--account_confWrapMTop);
+
+		.image-cont {
+			width: 100%;
+			max-width: var(--account_imageWidth);
+			padding-top: var(--account_imageHeight) !important;
+		}
+
+		.title {
+			margin-top: var(--account_titleMTop);
+		}
+
+		.description {
+			margin-top: var(--account_descMTop);
+		}
+
+		.order-number {
+			margin-top: var(--account_orderNumberMTop);
+		}
+
+		.btn-wrap {
+			margin-top: var(--account_btnWrapperMTop);
+		}
+	}
+
+	.billing-address-wrapper {
+		margin-left: calc(-1 * calc(var(--account_itemDistance) / 2));
+		margin-top: var(--account_itemDistance);
+	}
+
+	.shipping-address-wrapper {
+		margin-left: calc(-1 * calc(var(--account_itemDistance) / 2));
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_billingWrapperMTop: var(--sp11x);
+		--account_itemDistance: var(--sp4x);
+
+		--account_confWrapMTop: var(--sp18x);
+		--account_confWrapMaxWidth: var(--sp70x);
+		--account_titleMTop: var(--sp8x);
+		--account_descMTop: var(--sp2x);
+		--account_orderNumberMTop: var(--sp1x);
+		--account_btnWrapperMTop: var(--sp6x);
+		--account_imageWidth: 41.8%;
+		--account_imageHeight: 26.8%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_billingWrapperMTop: var(--sp8x);
+		--account_itemDistance: var(--sp4x);
+
+		--account_confWrapMTop: var(--sp9x);
+		--account_confWrapMaxWidth: var(--sp70x);
+		--account_titleMTop: var(--sp6x);
+		--account_descMTop: var(--sp2x);
+		--account_orderNumberMTop: var(--sp1x);
+		--account_btnWrapperMTop: var(--sp4x);
+		--account_imageWidth: 30.8%;
+		--account_imageHeight: 19.8%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_billingWrapperMTop: var(--sp8x);
+		--account_itemDistance: var(--sp4x);
+
+		--account_confWrapMTop: var(--sp8x);
+		--account_confWrapMaxWidth: var(--sp53x);
+		--account_titleMTop: var(--sp5x);
+		--account_descMTop: var(--sp2x);
+		--account_orderNumberMTop: var(--sp1x);
+		--account_btnWrapperMTop: var(--sp4x);
+		--account_imageWidth: 34.8%;
+		--account_imageHeight: 22.2%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_billingWrapperMTop: var(--sp8x);
+		--account_itemDistance: var(--sp3x);
+
+		--account_confWrapMTop: var(--sp11x);
+		--account_confWrapMaxWidth: var(--sp47x);
+		--account_titleMTop: var(--sp6x);
+		--account_descMTop: var(--sp2x);
+		--account_orderNumberMTop: var(--sp0-5x);
+		--account_btnWrapperMTop: var(--sp3x);
+		--account_imageWidth: 32.5%;
+		--account_imageHeight: 21.1%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
+		--account_billingWrapperMTop: var(--sp7x);
+		--account_itemDistance: var(--sp3x);
+
+		--account_confWrapMTop: var(--sp9x);
+		--account_confWrapMaxWidth: var(--sp43x);
+		--account_titleMTop: var(--sp5x);
+		--account_descMTop: var(--sp2x);
+		--account_orderNumberMTop: var(--sp0-5x);
+		--account_btnWrapperMTop: var(--sp3x);
+		--account_imageWidth: 32.5%;
+		--account_imageHeight: 21.1%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
+		--account_billingWrapperMTop: var(--sp7x);
+		--account_itemDistance: var(--sp3x);
+
+		--account_confWrapMTop: var(--sp19x);
+		--account_confWrapMaxWidth: var(--sp56x);
+		--account_titleMTop: var(--sp5x);
+		--account_descMTop: var(--sp2x);
+		--account_orderNumberMTop: var(--sp0-5x);
+		--account_btnWrapperMTop: var(--sp4x);
+		--account_imageWidth: 24.8%;
+		--account_imageHeight: 16.1%;
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_billingWrapperMTop: var(--sp8x);
+		--account_itemDistance: var(--sp6x);
+
+		--account_confWrapMTop: var(--sp16x);
+		--account_confWrapMaxWidth: 100%;
+		--account_titleMTop: var(--sp5x);
+		--account_descMTop: var(--sp1x);
+		--account_orderNumberMTop: var(--sp0-5x);
+		--account_btnWrapperMTop: var(--sp3x);
+		--account_imageWidth: 29.1%;
+		--account_imageHeight: 19%;
+
+		.shipping-billing-change-wrapper {
+			margin-left: 0;
+			margin-right: 0;
+
+			.item-container {
+				padding: 0;
+			}
+		}
+	}
+`;
+export default CheckoutTemplateStyle;

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

@@ -1,3 +1,6 @@
+import React from 'react';
+interface ForgotPasswordProps {
+    onFormSubmit: (values: any) => Promise<any>;
+}
+declare const ForgotPasswordTemplate: ({ onFormSubmit }: ForgotPasswordProps) => React.JSX.Element;
 export default ForgotPasswordTemplate;
-declare function ForgotPasswordTemplate(): React.JSX.Element;
-import React from "react";

package/dist/templates/ForgotPasswordTemplate/index.js

@@ -1,5 +1,88 @@
-import React from 'react';
-const ForgotPasswordTemplate = () => {
-    return React.createElement("div", null, "Forgot Password");
+import React, { useRef, useState } from 'react';
+import { Text, Link, Page } from '@weareconceptstudio/core';
+import { Form, Input } from '@weareconceptstudio/form';
+import { AccountButton, WarningMessage } from '../../components';
+import ForgotPasswordTemplateStyle from './style';
+const ForgotPasswordTemplate = ({ onFormSubmit }) => {
+    //! Ref
+    const tryAgainTimeout = useRef();
+    //! State
+    const [forgotState, setForgotState] = useState({
+        isSuccess: false,
+        email: null,
+        error: null,
+        isSent: false,
+        isBtnDisabled: false,
+    });
+    const handleFormFinish = async (values) => {
+        return await onFormSubmit(values).then(() => {
+            setForgotState((prev) => ({
+                ...prev,
+                email: values.email,
+                isSuccess: true,
+            }));
+        });
+    };
+    const handleTryAgain = () => {
+        setForgotState((prev) => ({
+            ...prev,
+            error: '',
+            isBtnDisabled: true,
+        }));
+        // @ts-ignore
+        tryAgainTimeout.current = setTimeout(() => {
+            setForgotState((prev) => ({
+                ...prev,
+                isSent: false,
+                isBtnDisabled: false,
+            }));
+        }, 60000);
+        return (!forgotState.isBtnDisabled &&
+            onFormSubmit({ email: forgotState.email })
+                .then(() => {
+                setForgotState((prev) => ({
+                    ...prev,
+                    isSent: true,
+                }));
+            })
+                .catch((err) => {
+                setForgotState((prev) => ({
+                    ...prev,
+                    isBtnDisabled: true,
+                    error: err.data.errors.email[0],
+                }));
+                tryAgainTimeout.current && clearTimeout(tryAgainTimeout.current);
+            }));
+    };
+    return (React.createElement(Page, { className: 'forgot-password use-account' },
+        React.createElement(ForgotPasswordTemplateStyle, null,
+            React.createElement("div", { className: `forgot-password-wrapper` }, !forgotState.isSuccess ? (React.createElement(React.Fragment, null,
+                React.createElement(Text, { tag: 'h1', className: 'account-h2 account-font-bold account-primary-color1 title', text: 'forgotPassword' }),
+                React.createElement(Text, { className: 'account-p account-p2 account-font-regular account-primary-color1 description', text: 'forgotPasswordDescription' }),
+                React.createElement(Form, { onSubmit: handleFormFinish },
+                    React.createElement(Form.Item, { name: 'email', label: 'email' },
+                        React.createElement(Input, { placeholder: 'emailPlaceholder' })),
+                    React.createElement("div", { className: 'loginExternalBlock' },
+                        React.createElement(Link, { href: '/sign-in' },
+                            React.createElement(Text, { tag: 'span', className: 'account-p account-p3 account-font-medium account-primary-color1 underline login-external', text: 'login' }))),
+                    React.createElement(AccountButton
+                    // @ts-ignore
+                    , { 
+                        // @ts-ignore
+                        text: `submit`, type: `submit`, btnType: `full-width` })))) : (React.createElement(React.Fragment, null,
+                React.createElement(Text, { tag: 'h2', className: 'account-h2 account-font-bold account-primary-color1 title', text: 'thankYou' }),
+                React.createElement("div", { className: 'recovery-wrap' },
+                    React.createElement(Text, { className: 'account-p account-p2 account-font-medium account-primary-color1', text: 'recoveryText' }),
+                    "\u00A0",
+                    React.createElement(Text, { className: 'account-p account-p2 account-font-bold account-primary-color1', text: forgotState.email })),
+                React.createElement("div", { className: 'try-again-wrap' },
+                    React.createElement(Text, { className: `account-p account-p2 account-font-medium account-primary-color1`, text: `tryAgainText` }),
+                    "\u00A0",
+                    React.createElement(Text, { text: `tryAgain`, onClick: handleTryAgain, className: `account-p account-p2 account-font-bold account-primary-color1 underline try-again-text ${forgotState.isBtnDisabled ? 'disabled' : ''}` })),
+                React.createElement(WarningMessage
+                // @ts-ignore
+                , { 
+                    // @ts-ignore
+                    error: forgotState.error, isSent: forgotState.isSent, successTitle: 'recoverPassword', successSubtitle: 'recoverPasswordDesc' })))))));
 };
 export default ForgotPasswordTemplate;

package/dist/templates/ForgotPasswordTemplate/style.d.ts

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