@weareconceptstudio/account 0.0.0 → 0.0.2

package/dist/AccountConfig.d.ts

@@ -0,0 +1,5 @@
+export function AccountConfig({ fontFamily, children }: {
+    fontFamily?: string;
+    children: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/AccountConfig.js

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from '@weareconceptstudio/core';
+import { ThemeProvider } from 'styled-components';
+//* Translations
+import translations from './translations';
+//* Styles
+import theme from './styles/theme';
+import AccountHelperClass from './styles/helperClass';
+import AccountVariables from './styles/variables';
+import AccountTypography from './styles/typography';
+export const AccountConfig = ({ fontFamily = 'core_Font', children }) => {
+    const { addTranslation } = useTranslation();
+    useEffect(() => {
+        addTranslation(translations, 'prepend');
+    }, []);
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(AccountVariables, { fontFamily: fontFamily }),
+        React.createElement(AccountHelperClass, null),
+        React.createElement(AccountTypography, null),
+        children));
+};

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

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

package/dist/components/AccountButton/index.js

@@ -0,0 +1,22 @@
+import React, { memo, useMemo } from 'react';
+import classNames from 'classnames';
+import { Link, useTranslation } from '@weareconceptstudio/core';
+import { useTheme } from 'styled-components';
+import theme from '../../styles/theme';
+//* Style
+import AccountButtonStyle from './style';
+const AccountButton = memo(({ btnType, text, className, onClick, children, url, customLinkProps, target, type = 'button', disabled = false, svg_icon }) => {
+    const { translate } = useTranslation();
+    const globalTheme = useTheme();
+    const Component = useMemo(() => (url ? Link : 'button'), [url]);
+    const customProps = useMemo(() => (url ? { ...customLinkProps, url, target } : { type, disabled }), [url, type, disabled]);
+    const classString = classNames('btn-wrap', {
+        [btnType]: btnType,
+        [className]: className,
+    });
+    return (React.createElement(AccountButtonStyle, { onClick: onClick, className: classString, theme: theme(globalTheme) },
+        React.createElement(Component, { ...customProps },
+            svg_icon || children || translate(text),
+            " ")));
+});
+export default AccountButton;

package/dist/components/AccountButton/style.d.ts

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

package/dist/components/AccountButton/style.js

@@ -0,0 +1,249 @@
+import styled from 'styled-components';
+const AccountButtonStyle = styled.div `
+	--account_btnPadTB: var(--sp2-5x);
+	--account_btnPadLR: var(--sp8x);
+	--account_btnBorderRad: var(--sp1x);
+
+	//! Small icons wrap sizes
+	--account_wrapSize: var(--sp7x);
+
+	//! Small icons size
+	--account_smallIconsSize: var(--sp2-5x);
+
+	display: inline-flex;
+
+	button,
+	a {
+		width: 100%;
+		cursor: pointer;
+		font-size: var(--account_p2);
+		line-height: var(--account_lineHeight);
+		font-family: var(--account_Font);
+		font-weight: 700;
+		padding: var(--account_btnPadTB) var(--account_btnPadLR);
+		background-color: var(--account_primaryColor14);
+		border: 2px solid var(--account_primaryColor14);
+		color: var(--account_backgroundColor);
+		border-radius: var(--account_btnBorderRad);
+		transition: 0.1s;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		overflow: hidden;
+		isolation: isolate;
+		-webkit-appearance: none;
+
+		@media (hover: hover) {
+			&:hover {
+				background-color: var(--account_secondaryColor9);
+				border: 2px solid var(--account_secondaryColor9);
+			}
+		}
+	}
+
+	&.full-width {
+		button,
+		a {
+			width: 100%;
+		}
+	}
+
+	&.outline {
+		button,
+		a {
+			background-color: var(--account_backgroundColor);
+			border: 2px solid var(--account_primaryColor14);
+			color: var(--account_primaryColor14);
+
+			@media (hover: hover) {
+				&:hover {
+					border: 2px solid var(--account_secondaryColor9);
+					color: var(--account_secondaryColor9);
+				}
+			}
+		}
+	}
+
+	&.purple-text {
+		width: fit-content;
+
+		button,
+		a {
+			padding: 0;
+			background-color: unset;
+			color: var(--account_primaryColor14);
+			border-radius: 0;
+			border: unset;
+			text-decoration: underline;
+			transition: color var(--account_trTime);
+
+			@media (hover: hover) {
+				&:hover {
+					color: var(--account_secondaryColor9);
+				}
+			}
+		}
+	}
+
+	&.green-small-text {
+		width: fit-content;
+
+		button,
+		a {
+			font-size: var(--account_p3);
+			padding: 0;
+			background-color: unset;
+			color: var(--account_primaryColor3);
+			border-radius: 0;
+			border: unset;
+			text-decoration: underline;
+			transition: color var(--account_trTime);
+
+			@media (hover: hover) {
+				&:hover {
+					color: var(--account_primaryColor1);
+				}
+			}
+		}
+	}
+
+	&.green-large-text {
+		width: fit-content;
+
+		button,
+		a {
+			padding: 0;
+			background-color: unset;
+			color: var(--account_primaryColor1);
+			border-radius: 0;
+			border: unset;
+			text-decoration: underline;
+			transition: color var(--account_trTime);
+
+			@media (hover: hover) {
+				&:hover {
+					color: var(--account_primaryColor3);
+				}
+			}
+		}
+	}
+
+	&.icon {
+		button,
+		a {
+			width: var(--account_wrapSize);
+			height: var(--account_wrapSize);
+			padding: 0;
+			font-size: unset;
+			background-color: unset;
+			color: unset;
+			font-family: unset;
+			font-weight: unset;
+			border: 2px solid var(--account_primaryColor5);
+
+			svg {
+				width: var(--account_smallIconsSize);
+				height: var(--account_smallIconsSize);
+				fill: var(--account_primaryColor1);
+			}
+
+			@media (hover: hover) {
+				&:hover {
+					color: unset;
+					background-color: var(--account_primaryColor1);
+					border: 2px solid var(--account_primaryColor1);
+
+					svg {
+						fill: var(--account_backgroundColor);
+					}
+				}
+			}
+		}
+	}
+
+	&.disabled {
+		button,
+		a {
+			pointer-events: none;
+			opacity: 0.5;
+		}
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_btnPadTB: var(--sp2x);
+		--account_btnPadLR: var(--sp7x);
+
+		//! Small icons wrap sizes
+		--account_wrapSize: var(--sp6x);
+
+		//! Small icons size
+		--account_smallIconsSize: var(--sp2x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
+		--account_btnPadTB: var(--sp1-5x);
+		--account_btnPadLR: var(--sp6x);
+
+		//! Small icons wrap sizes
+		--account_wrapSize: var(--sp5x);
+
+		//! Small icons size
+		--account_smallIconsSize: var(--sp1-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
+		--account_btnPadTB: var(--sp1-5x);
+		--account_btnPadLR: var(--sp6x);
+
+		//! Small icons wrap sizes
+		--account_wrapSize: var(--sp5x);
+
+		//! Small icons size
+		--account_smallIconsSize: var(--sp1-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
+		--account_btnPadTB: var(--sp1-5x);
+		--account_btnPadLR: var(--sp6x);
+
+		//! Small icons wrap sizes
+		--account_wrapSize: var(--sp5x);
+
+		//! Small icons size
+		--account_smallIconsSize: var(--sp1-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_btnPadTB: var(--sp1x);
+		--account_btnPadLR: var(--sp5x);
+
+		//! Small icons wrap sizes
+		--account_wrapSize: var(--sp5x);
+
+		//! Small icons size
+		--account_smallIconsSize: var(--sp1-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_btnPadTB: var(--sp1-5x);
+		--account_btnPadLR: var(--sp5x);
+
+		//! Small icons wrap sizes
+		--account_wrapSize: var(--sp5x);
+
+		//! Small icons size
+		--account_smallIconsSize: var(--sp1-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_btnPadTB: var(--sp1-5x);
+		--account_btnPadLR: var(--sp3x);
+
+		//! Small icons wrap sizes
+		--account_wrapSize: var(--sp4x);
+
+		//! Small icons size
+		--account_smallIconsSize: var(--sp1-5x);
+	}
+`;
+export default AccountButtonStyle;

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

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

package/dist/components/AddressForm/index.js

@@ -0,0 +1,100 @@
+import React, { memo as Memo, useState, useCallback, useRef } from 'react';
+import { useUi, Text } from '@weareconceptstudio/core';
+import { Form, Input, PhoneNumber, Select } from '@weareconceptstudio/form';
+import { useTheme } from 'styled-components';
+import theme from '../../styles/theme';
+//* Icons
+import { CheckboxIcon, CheckboxCheckedIcon } from '../../utils/icons';
+//* Style
+import AddressFormStyle from './style';
+//* Components
+import AccountButton from '../AccountButton';
+//TODO: Form -> ref, onChange, Select, Form Item -> options,Global Data
+const globalData = {
+    countries: [],
+    cities: [],
+    regions: [
+        { value: 'yerevan', label: 'Yerevan' },
+        { value: 'shirak', label: 'Shirak' },
+        { value: 'aragatsotn', label: 'Aragatsotn' },
+        { value: 'lori', label: 'Lori' },
+        { value: 'kotayq', label: 'Kotayq' },
+        { value: 'tavush', label: 'Tavush' },
+        { value: 'vayots-dzor', label: 'Vayots Dzor' },
+        { value: 'syuniq', label: 'Syuniq' },
+        { value: 'ararat', label: 'Ararat' },
+        { value: 'armavir', label: 'Armavir' },
+        { value: 'gegharquniq', label: 'Gegharquniq' },
+    ],
+};
+const AddressForm = Memo(({ title, data, selected, createAddress, updateAddress }) => {
+    const globalTheme = useTheme();
+    const { closePopup } = useUi();
+    //! Ref
+    const form = useRef();
+    //! States
+    const [isChecked, setIsChecked] = useState(data?.is_default);
+    const [countryId, setCountryId] = useState(globalData.countries.length > 1 ? data?.country_id : 1);
+    const [regionId, setRegionId] = useState(data?.region_id);
+    const [isDisabled, setIsDisabled] = useState(false);
+    //! On Finish
+    const onFinish = useCallback((values) => {
+        // const newData = { ...values, is_default: isChecked };
+        // setIsDisabled(true);
+        // return (
+        // 	!isDisabled &&
+        // 	eval(data?.id ? `updateAddress(newData, data.id)` : `createAddress(newData)`).then(
+        // 		() => {
+        // 			closePopup();
+        // 		}
+        // 	)
+        // );
+    }, [data, isChecked, createAddress, updateAddress, isDisabled]);
+    const handleFormChange = useCallback((val) => {
+        const name = Object.keys(val)[0];
+        if (name === 'country_id') {
+            setCountryId(val[name]);
+            setRegionId('');
+            form.current.setFieldsValue({ region_id: '', city_id: '' });
+        }
+        else if (name === 'region_id') {
+            setRegionId(val[name]);
+            form.current.setFieldsValue({ city_id: '' });
+        }
+    }, []);
+    return (React.createElement(AddressFormStyle, { theme: theme(globalTheme) },
+        React.createElement(Text, { tag: `h6`, text: title, className: `account-h6 account-font-bold account-primary-color1` }),
+        React.createElement(Form, { ref: form, onSubmit: onFinish, onChange: handleFormChange, initialValues: data || { type: selected.type, country_id: 1 } },
+            React.createElement("div", { className: `form-wrapper` },
+                React.createElement(Form.Item, { name: 'country_id', label: 'country' },
+                    React.createElement(Select, { placeholder: 'Armenia', 
+                        // options={globalData.regions}
+                        disabled: true })),
+                React.createElement(Form.Item, { name: 'type' },
+                    React.createElement(Input, { type: 'hidden' })),
+                React.createElement(Form.Item, { name: 'first_name', label: 'firstName' },
+                    React.createElement(Input, { placeholder: 'firstNamePlaceholder' })),
+                React.createElement(Form.Item, { name: 'last_name', label: 'lastName' },
+                    React.createElement(Input, { placeholder: 'lastNamePlaceholder' })),
+                React.createElement(Form.Item, { name: 'region_id', label: 'region', className: !countryId ? 'disabled' : '' },
+                    React.createElement(Select, { placeholder: 'Select Region', options: globalData.regions })),
+                React.createElement(Form.Item, { name: 'city_id', label: 'city' },
+                    React.createElement(Select, { placeholder: 'cityPlaceholder', disabled: !regionId })),
+                React.createElement(Form.Item, { name: 'address_1', label: 'address_1' },
+                    React.createElement(Input, { placeholder: 'address_1Placeholder' })),
+                React.createElement(Form.Item, { name: 'address_2', label: 'address_2' },
+                    React.createElement(Input, { placeholder: 'address_2Placeholder' })),
+                React.createElement(Form.Item, { name: 'zip_code', label: 'zipCode' },
+                    React.createElement(Input.Number, { placeholder: 'zipCodePlaceholder' })),
+                React.createElement(Form.Item, { name: 'phone', label: 'phone' },
+                    React.createElement(PhoneNumber, null))),
+            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`, text: `${selected.type === 'shipping' ? 'makeYourDefaultShippingAddress' : 'makeYourDefaultBillingAddress'}` }))) : (React.createElement(Text, { className: `account-p account-p2 account-font-medium account-primary-color1`, text: `${selected.type === 'shipping' ? 'thisYourDefaultShippingAddress' : 'thisYourDefaultBillingAddress'}` }))),
+            React.createElement("div", { className: `cancel-and-save-wrap` },
+                React.createElement(AccountButton, { text: `cancel`, onClick: closePopup, btnType: `green-large-text` }),
+                React.createElement(AccountButton, { type: 'submit', text: `saveAndApply`, btnType: `full-width`, className: `${isDisabled ? 'disabled' : ''}` })))));
+});
+export default AddressForm;

package/dist/components/AddressForm/style.d.ts

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

package/dist/components/AddressForm/style.js

@@ -0,0 +1,180 @@
+import styled from 'styled-components';
+const AddressFormStyle = styled.div `
+	--account_antFormMTop: var(--sp5x);
+	--account_antFormItemWidth: 50%;
+	--account_antFormItemMTop: var(--sp4x);
+	--account_formItemDistance: var(--sp3x);
+	--account_defaultInfoWrapMTop: var(--sp5x);
+	--account_cancelAndSaveWrapMTop: var(--sp5x);
+	--account_checkboxWrapSize: var(--sp4x);
+	--account_checkboxWrapDistance: var(--sp2x);
+	--account_cancelDistance: var(--sp5x);
+
+	form {
+		margin-top: var(--account_antFormMTop);
+
+		.form-wrapper {
+			display: flex;
+			flex-wrap: wrap;
+			margin-left: calc(-1 * calc(var(--account_formItemDistance) / 2));
+			margin-right: calc(-1 * calc(var(--account_formItemDistance) / 2));
+
+			.form-item {
+				width: var(--account_antFormItemWidth);
+				padding: 0 calc(var(--account_formItemDistance) / 2);
+
+				&:not(:nth-child(1), :nth-child(2)) {
+					margin-top: var(--account_antFormItemMTop);
+				}
+			}
+		}
+
+		.default-info-wrap {
+			margin-top: var(--account_defaultInfoWrapMTop);
+
+			.banner-wrap {
+				display: inline-flex;
+				align-items: center;
+
+				.checkbox-wrap {
+					display: flex;
+					align-items: center;
+					margin-right: var(--account_checkboxWrapDistance);
+
+					svg {
+						cursor: pointer;
+						width: var(--account_checkboxWrapSize);
+						height: var(--account_checkboxWrapSize);
+					}
+				}
+			}
+		}
+
+		.cancel-and-save-wrap {
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			margin-top: var(--account_cancelAndSaveWrapMTop);
+
+			.btn-wrap {
+				&:first-child {
+					margin-right: var(--account_cancelDistance);
+				}
+			}
+		}
+	}
+
+	.r-1 {
+		fill: var(--account_backgroundColor);
+	}
+
+	.r-2 {
+		fill: var(--account_primaryColor1);
+	}
+
+	.r-3 {
+		fill: var(--account_primaryColor4);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
+		--account_antFormMTop: var(--sp4x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp4x);
+		--account_formItemDistance: var(--sp4x);
+		--account_defaultInfoWrapMTop: var(--sp4x);
+		--account_cancelAndSaveWrapMTop: var(--sp4x);
+		--account_checkboxWrapSize: var(--sp2-5x);
+		--account_checkboxWrapDistance: var(--sp2x);
+		--account_cancelDistance: 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_antFormMTop: var(--sp3x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp3x);
+		--account_formItemDistance: var(--sp3x);
+		--account_defaultInfoWrapMTop: var(--sp3x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_checkboxWrapSize: var(--sp3x);
+		--account_checkboxWrapDistance: var(--sp2x);
+		--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_antFormMTop: var(--sp3x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp2x);
+		--account_formItemDistance: var(--sp2x);
+		--account_defaultInfoWrapMTop: var(--sp3x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_checkboxWrapSize: var(--sp3x);
+		--account_checkboxWrapDistance: var(--sp1-5x);
+		--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_antFormMTop: var(--sp3x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp2x);
+		--account_formItemDistance: var(--sp2x);
+		--account_defaultInfoWrapMTop: var(--sp3x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_checkboxWrapSize: var(--sp2-5x);
+		--account_checkboxWrapDistance: var(--sp1x);
+		--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_antFormMTop: var(--sp3x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp2x);
+		--account_formItemDistance: var(--sp2x);
+		--account_defaultInfoWrapMTop: var(--sp3x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_checkboxWrapSize: var(--sp2-5x);
+		--account_checkboxWrapDistance: var(--sp1x);
+		--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_antFormMTop: var(--sp3x);
+		--account_antFormItemWidth: 50%;
+		--account_antFormItemMTop: var(--sp2x);
+		--account_formItemDistance: var(--sp2x);
+		--account_defaultInfoWrapMTop: var(--sp3x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_checkboxWrapSize: var(--sp2-5x);
+		--account_checkboxWrapDistance: var(--sp1x);
+		--account_cancelDistance: var(--sp2-5x);
+	}
+
+	@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
+		--account_antFormMTop: var(--sp3x);
+		--account_antFormItemWidth: 100%;
+		--account_antFormItemMTop: var(--sp2x);
+		--account_formItemDistance: var(--sp2x);
+		--account_defaultInfoWrapMTop: var(--sp3x);
+		--account_cancelAndSaveWrapMTop: var(--sp3x);
+		--account_checkboxWrapSize: var(--sp2-5x);
+		--account_checkboxWrapDistance: var(--sp1x);
+		--account_cancelDistance: var(--sp2x);
+
+		form {
+			.cancel-and-save-wrap {
+				flex-direction: column-reverse;
+
+				.btn-wrap {
+					&:first-child {
+						margin-right: 0;
+						margin-top: var(--account_cancelDistance);
+					}
+
+					&:last-child {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+`;
+export default AddressFormStyle;

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

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

package/dist/components/AddressItem/index.js

@@ -0,0 +1,41 @@
+import React, { memo as Memo, useCallback } from 'react';
+import { Text, useUi } from '@weareconceptstudio/core';
+//* Components
+import AddressForm from '../AddressForm';
+import AccountButton from '../AccountButton';
+import WarningMessageForPopup from '../WarningMessageForPopup';
+//* Style
+import AddressItemStyle from './style';
+//TODO:
+const deleteAddress = () => { };
+const AddressItem = Memo(({ title, data, checkout_review, select_address, type, onClick, checkedId, setCheckedId }) => {
+    const { openPopup } = useUi();
+    //! 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` }));
+    }, [data]);
+    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 }),
+            React.createElement(AccountButton, { text: `change`, btnType: `green-small-text`, onClick: onClick }))),
+        React.createElement("div", { className: `item-internal-wrap` },
+            React.createElement("div", { className: `relative-wrapper` },
+                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("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 }),
+                !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 })))))))));
+});
+export default AddressItem;

package/dist/components/AddressItem/style.d.ts

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