@weareconceptstudio/account 0.0.2 → 0.0.4

package/dist/AccountProvider.d.ts

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

package/dist/AccountProvider.js

@@ -0,0 +1,27 @@
+import React, { createContext, useContext, 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';
+const AccountContext = createContext(null);
+export const useAccountContext = () => {
+    const context = useContext(AccountContext);
+    return context;
+};
+export const AccountProvider = ({ fontFamily = 'core_Font', children, currency }) => {
+    const { addTranslation } = useTranslation();
+    useEffect(() => {
+        addTranslation(translations, 'prepend');
+    }, []);
+    return (React.createElement(AccountContext.Provider, { value: { currency } },
+        React.createElement(ThemeProvider, { theme: theme },
+            React.createElement(AccountVariables, { fontFamily: fontFamily }),
+            React.createElement(AccountHelperClass, null),
+            React.createElement(AccountTypography, null),
+            children)));
+};

package/dist/components/AddressForm/index.js

@@ -64,13 +64,13 @@ const AddressForm = Memo(({ title, data, selected, createAddress, updateAddress
     }, []);
     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(Form, { ref: form, onSubmit: onFinish, onChange: handleFormChange, initialValues: data },
             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(Form.Item, { name: 'type', required: false },
                     React.createElement(Input, { type: 'hidden' })),
                 React.createElement(Form.Item, { name: 'first_name', label: 'firstName' },
                     React.createElement(Input, { placeholder: 'firstNamePlaceholder' })),
@@ -88,11 +88,14 @@ const AddressForm = Memo(({ title, data, selected, createAddress, updateAddress
                     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: `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("div", null, "Test")
+            // <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' : ''}` })))));

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

@@ -1,3 +1,12 @@
 export default AddressItem;
-declare const AddressItem: React.NamedExoticComponent<object>;
+declare function AddressItem({ title, data, checkout_review, select_address, type, onClick, checkedId, setCheckedId }: {
+    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/AddressItem/index.js

@@ -1,14 +1,12 @@
-import React, { memo as Memo, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { Text, useUi } from '@weareconceptstudio/core';
 //* Components
 import AddressForm from '../AddressForm';
 import AccountButton from '../AccountButton';
-import WarningMessageForPopup from '../WarningMessageForPopup';
+import WarningMessageForPopup from '../ui/WarningMessageForPopup';
 //* Style
 import AddressItemStyle from './style';
-//TODO:
-const deleteAddress = () => { };
-const AddressItem = Memo(({ title, data, checkout_review, select_address, type, onClick, checkedId, setCheckedId }) => {
+const AddressItem = ({ title, data, checkout_review, select_address, type, onClick, checkedId, setCheckedId }) => {
     const { openPopup } = useUi();
     //! Handle Popups
     const handleDeletePopup = useCallback(() => {
@@ -17,6 +15,8 @@ const AddressItem = Memo(({ title, data, checkout_review, select_address, type,
     const handleEditAddressPopup = useCallback(() => {
         openPopup(React.createElement(AddressForm, { data: data, selected: { value: true, type: data.type }, title: type === 'billing' ? `updateYourBillingAddress` : `updateYourShippingAddress` }));
     }, [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 }),
@@ -37,5 +37,5 @@ const AddressItem = Memo(({ title, data, checkout_review, select_address, type,
                 !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/AddressWrap/index.d.ts

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

package/dist/components/AddressWrap/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Text, useUi } from '@weareconceptstudio/core';
+import AccountButton from '../AccountButton';
+import EmptyAddress from '../EmptyAddress';
+import AddressItem from '../AddressItem';
+import AddressForm from '../AddressForm';
+const AddressWrap = ({ title = 'addresses', addresses = [], className }) => {
+    const { openPopup } = useUi();
+    const classString = classNames('address-wrap', {
+        [className]: className,
+    });
+    const handleAddNewAddressPopup = () => {
+        openPopup(React.createElement(AddressForm, null));
+    };
+    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))));
+};
+export default AddressWrap;

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

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

package/dist/components/EmptyAddress/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Text } from '@weareconceptstudio/core';
+const EmptyAddress = () => {
+    return (React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 empty-address-text`, text: `emptyAddress` }));
+};
+export default EmptyAddress;

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

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

package/dist/components/FavoriteButton/index.js

@@ -0,0 +1,42 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import Button from '../ui/AccountButton';
+const addToFavorite = () => { };
+const removeFavorite = () => { };
+//* Icons
+const favoriteIcon = (React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { id: 'path-1', fill: '#ecefec', d: 'M14.622 0l-12.889 7.911-1.733 13.867 7.822 8.8 13.911 1.422 10.267-11.689-3.6-16.711-13.778-3.6z' }),
+    React.createElement("path", { id: 'path-2', fill: '#8c9b8b', d: 'M17.066 24.8c-0.178 0-0.267-0.044-0.356-0.178l-10.667-9.911c-0.222-0.222-0.222-0.533-0.044-0.756l4.622-5.511c0.178-0.222 0.444-0.267 0.622-0.089l5.689 3.111 3.733-4.089c0.089-0.089 0.267-0.178 0.444-0.178s0.311 0.044 0.356 0.222l4.489 5.467c0.178 0.222 0.178 0.489 0 0.622l-8.533 11.067c-0.044 0.133-0.133 0.222-0.356 0.222z' }),
+    React.createElement("path", { id: 'path-3', fill: '#b2bdb1', d: 'M17.067 24.978c-0.178 0-0.311-0.044-0.444-0.178l-10.667-9.956c-0.267-0.222-0.267-0.622-0.044-0.933l4.578-5.511c0.222-0.267 0.533-0.311 0.844-0.178l5.556 3.067 3.689-4.044c0.133-0.133 0.311-0.222 0.533-0.222 0.178 0 0.356 0.089 0.489 0.267l4.489 5.511c0.178 0.222 0.178 0.578 0 0.844l-8.533 11.067c-0.133 0.133-0.267 0.222-0.489 0.267zM7.289 14.267l9.689 9.022 7.778-10.044-3.689-4.533-3.511 3.867c-0.222 0.222-0.533 0.267-0.8 0.133l-5.6-3.067-3.867 4.622z' })));
+const FavoriteButton = memo(({ type, favorites, productId, optionId, variantId, qty }) => {
+    //! Check Active Favorite
+    const isFavorite = useMemo(() => {
+        return favorites.some((favorite) => favorite.product.id === productId && favorite.selectedOption.id === optionId && favorite.selectedVariant.id === variantId);
+    }, [favorites, productId, variantId, optionId]);
+    //! Add to favorite
+    const addFavoriteHandleClick = useCallback(() => {
+        isFavorite
+            ? removeFavorite({
+                productId,
+                variantId,
+                optionId,
+            })
+            : addToFavorite({
+                productId,
+                variantId,
+                optionId,
+                qty,
+                update: true,
+            });
+    }, [productId, variantId, optionId, qty, isFavorite]);
+    return type === 'withIcon' ? (
+    // <Icon
+    // 	name={`favorite`}
+    // 	className={`pi-favorite ${isFavorite ? 'pi-active' : ''}`}
+    // 	onClick={addFavoriteHandleClick}>
+    // 	<span className='path1' />
+    // 	<span className='path2' />
+    // 	<span className='path3' />
+    // </Icon>
+    React.createElement("div", { onClick: addFavoriteHandleClick, className: `pi-favorite ${isFavorite ? 'pi-active' : ''}` }, favoriteIcon)) : (React.createElement(Button, { text: 'addToWishlist', btnType: `green-small-text`, onClick: addFavoriteHandleClick, className: `wishlist-btn ${isFavorite ? 'active' : ''}` }));
+});
+export default FavoriteButton;

package/dist/components/TotalCheckout/index.js

@@ -1,15 +1,14 @@
 import React, { memo, useState, useEffect } from 'react';
 import { Text, useUi } from '@weareconceptstudio/core';
-import { Input } from '@weareconceptstudio/form';
+import { useAccountContext } from '../../AccountProvider';
 import AccountButton from '../AccountButton';
 //* Utils
 import { handlePriceCheckFunc, numToLocalString } from '../../utils/_functions';
 //* Style
 import TotalCheckoutStyle from './style';
-//TODO: Input filed textarea
-// TODO: itemsCount, subtotal, total, loading, currency, shippingCost
-const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, loading, currency, shippingCost }) => {
+const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, loading, shippingCost }) => {
     const { winWidth } = useUi();
+    const { currency } = useAccountContext();
     //! States
     const [headerHeight, setHeaderHeight] = useState();
     const [note, setNote] = useState();
@@ -17,6 +16,7 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
     useEffect(() => {
         setHeaderHeight(document.getElementsByTagName('header')[0]?.clientHeight);
     }, [winWidth]);
+    console.log(shippingCost);
     return (React.createElement(TotalCheckoutStyle, { "$headerHeight": headerHeight },
         React.createElement("div", { className: `cart-main-wrap` },
             React.createElement("div", { className: `left-panel-wrap panel` }, children),

package/dist/components/{EmptyCart → cart/EmptyCart}/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Text } from '@weareconceptstudio/core';
+import AccountButton from '../../ui/AccountButton';
 //* Style
 import EmptyCartStyle from './style';
-//* Components
-import AccountButton from '../AccountButton';
 const EmptyCart = ({ shoppingUrl }) => {
     return (React.createElement(EmptyCartStyle, null,
         React.createElement("div", { className: `empty-cart-wrap` },

package/dist/components/cart/Items/Simple/Item/index.d.ts

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

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

@@ -0,0 +1,67 @@
+import React, { memo, useMemo } from 'react';
+import { Image, Text, useUi } from '@weareconceptstudio/core';
+import { Select } from '@weareconceptstudio/form';
+import { useAccountContext } from '../../../../../AccountProvider';
+import { handlePriceCheckFunc } from '../../../../../utils/_functions';
+import Button from '../../../../ui/AccountButton';
+import FavoriteButton from '../../../../FavoriteButton';
+// import ProductIndividual from '@/components/common/ProductIndividual';
+//TODO: Fake
+const pathname = '/cart/';
+const addToCart = () => { };
+const removeCart = () => { };
+const Item = memo(({ data, edit, favorite, remove, select, isLast, favorites, deleteCartItem }) => {
+    const { openPopup } = useUi();
+    const { currency } = useAccountContext();
+    const selectionList = useMemo(() => {
+        if (select) {
+            const selectList = [];
+            for (let index = 1; index <= data?.qty; index++) {
+                selectList.push({ value: index, label: index });
+            }
+            return selectList;
+        }
+    }, [data, select]);
+    return (React.createElement("div", { className: `item-wrap` },
+        React.createElement("div", { className: 'line' }),
+        React.createElement("div", { className: `item-inner-wrapper` },
+            React.createElement("div", { className: `col-item tl-col-1 col-item-1` },
+                React.createElement("div", { className: `image-wrapper` },
+                    React.createElement(Image, { src: data?.product?.image?.src, alt: data?.product?.image?.alt })),
+                React.createElement("div", { className: `col-1-right-wrap` },
+                    React.createElement(Button, { url: data.product?.url, className: `capitalize`, text: data.product?.name, btnType: `green-large-text`, target: pathname === '/cart/' || pathname === '/checkout' ? '_blank' : '_self' }),
+                    edit && !data.product?.out_of_stock ? (React.createElement("div", { className: `edit-btn-wrap empty` },
+                        React.createElement(Button, { text: 'edit', btnType: `green-small-text`, onClick: () => openPopup(
+                            // <ProductIndividual
+                            // 	isPopup
+                            // 	qty={data.qty}
+                            // 	itemId={data.id}
+                            // 	selectedOption={data.selectedOption}
+                            // 	selectedVariant={data.selectedVariant}
+                            // 	{...data.product}
+                            // />
+                            React.createElement("div", null, "Product Individual")) }))) : pathname === '/cart/' ? (React.createElement(Text, { className: `p p3 apercuPro_Bold account-primary-color3 underline opacityZero empty`, text: 'empty' })) : (''))),
+            React.createElement("div", { className: `col-item tl-col-2` }, select ? (React.createElement("div", { className: `select-and-out-of-stock-wrap` }, !data.product?.out_of_stock ? (
+            // <FormSelect
+            // 	list={selectionList}
+            // 	getPopupContainer={false}
+            // 	selectedValue={data.qty}
+            // 	onChange={(val) => addToCart({ productId: data.product?.id, variantId: data.selectedVariant?.id, optionId: data.selectedOption?.id, qty: val, update: true })}
+            // />
+            React.createElement(Select, { allowSearch: false, options: selectionList, value: 1, onChange: (val) => console.log(`Select ${val}`) })) : (React.createElement(Text, { className: `p p3 account-font-medium account-primary-color1`, text: data.qty })))) : (React.createElement(Text, { className: `p p3 account-font-medium account-primary-color1`, text: data.qty }))),
+            React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, data?.discountedPrice ? (React.createElement("div", null,
+                React.createElement(Text, { className: `p p3 apercuPro_Bold account-secondary-color2 alignRight`, text: handlePriceCheckFunc(data?.discountedPrice, currency) }),
+                React.createElement(Text, { className: `p p3 account-font-regular account-primary-color2 lineThrough value alignRight`, text: handlePriceCheckFunc(data.product?.price, currency) }))) : (React.createElement(Text, { className: `p p3 account-font-bold account-primary-color1 alignRight`, text: handlePriceCheckFunc(data.product?.price, currency) }))),
+            React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap` },
+                React.createElement("div", { className: `col-item-inner-wrap` },
+                    React.createElement("div", { className: `flex-end-wrap` }, data?.discountedPrice ? (React.createElement("div", null,
+                        React.createElement(Text, { className: `p p3 account-font-bold account-secondary-color2 alignRight`, text: handlePriceCheckFunc(data?.discountedPrice * data.qty, currency) }),
+                        React.createElement(Text, { className: `p p3 account-font-regular account-primary-color2 lineThrough value alignRight`, text: handlePriceCheckFunc(data.product?.price * data.qty, currency) }))) : (React.createElement(Text, { className: `p p3 account-font-bold account-primary-color1 alignRight`, text: handlePriceCheckFunc(data.product?.price * data.qty, currency) }))),
+                    React.createElement("div", { className: `favorite-and-remove-wrap` },
+                        favorite && !data.product?.out_of_stock && (React.createElement("div", { className: `favorite-btn-wrap` },
+                            React.createElement(FavoriteButton, { qty: data.qty, type: `withText`, favorites: favorites, productId: data.product?.id, optionId: data.selectedOption?.id, variantId: data.selectedVariant?.id }))),
+                        remove && (React.createElement("div", { className: `remove-btn-wrap` },
+                            React.createElement(Button, { text: 'remove', btnType: `green-small-text`, onClick: () => deleteCartItem({ productId: data.product?.id }) }))))))),
+        isLast ? React.createElement("div", { className: 'line' }) : null));
+});
+export default Item;

package/dist/components/cart/Items/Simple/ItemMobile/index.d.ts

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

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

@@ -0,0 +1,73 @@
+import React, { memo, useMemo } from 'react';
+import { Image, Text, useUi } from '@weareconceptstudio/core';
+import { Select } from '@weareconceptstudio/form';
+import Button from '../../../../ui/AccountButton';
+import { useAccountContext } from '../../../../../AccountProvider';
+//* Utils
+import { handlePriceCheckFunc } from '../../../../../utils/_functions';
+//* Components
+import FavoriteButton from '../../../../FavoriteButton';
+// import ProductIndividual from '@/components/common/ProductIndividual';
+//TODO: Fake
+const pathname = '/cart/';
+const addToCart = () => { };
+const removeCart = () => { };
+const ItemMobile = memo(({ data, additionalParameters, isLast, favorites }) => {
+    const { openPopup } = useUi();
+    const { currency } = useAccountContext();
+    const selectionList = useMemo(() => {
+        if (additionalParameters.select) {
+            const selectList = [];
+            for (let index = 1; index <= data.qty; index++) {
+                selectList.push({ value: index, label: index });
+            }
+            return selectList;
+        }
+    }, [data]);
+    return (React.createElement(React.Fragment, null,
+        isLast ? React.createElement("div", { className: 'line' }) : null,
+        React.createElement("div", { className: `mobile-order-item-wrap` },
+            React.createElement("div", { className: `mobile-order-item-inner-wrap` },
+                React.createElement("div", { className: `mobile-image-wrap` },
+                    React.createElement(Image, { src: data?.images?.[0].src, alt: data?.images?.[0].alt })),
+                React.createElement("div", { className: `mobile-info-wrap` },
+                    React.createElement(Button, { className: `capitalize`, url: data.product?.url, btnType: `green-large-text`, text: data.product?.name || data.name, target: pathname === '/cart/' || pathname === '/checkout/' ? '_blank' : '_self' }),
+                    additionalParameters.select ? (React.createElement("div", { className: `select-and-out-of-stock-mobile-wrap` }, !data.product?.out_of_stock ? (
+                    // <FormSelect
+                    // 	list={selectionList}
+                    // 	selectedValue={data.qty}
+                    // 	className={`quantity-select-mobile-wrap`}
+                    // 	onChange={(val) => addToCart({ productId: data.product.id, variantId: data.selectedVariant.id, optionId: data.selectedOption.id, qty: val, update: true })}
+                    // />
+                    React.createElement(Select, { allowSearch: false, options: selectionList, value: 1, onChange: (val) => console.log(val) })) : (React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `p p3 apercuPro_Medium primaryColor1`, text: `quantityWithSymbol` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `p p3 apercuPro_Medium primaryColor1`, text: data.qty }))))) : (React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `p p3 apercuPro_Medium primaryColor1`, text: `quantityWithSymbol` }),
+                        "\u00A0",
+                        React.createElement(Text, { className: `p p3 apercuPro_Medium primaryColor1`, text: data.qty || data.quantity }))),
+                    React.createElement("div", { className: `mobile-price-wrap nowrap` },
+                        React.createElement(Text, { className: `p p3 apercuPro_Medium primaryColor1 mb-mt`, text: `price` }),
+                        data?.discountedPrice ? (React.createElement("div", null,
+                            React.createElement(Text, { className: `p p3 apercuPro_Bold secondaryColor2`, text: handlePriceCheckFunc(data?.product.discountedPrice, currency) }),
+                            React.createElement(Text, { className: `p p3 apercuPro_Regular primaryColor2 lineThrough value`, text: handlePriceCheckFunc(data.product?.price, currency) }))) : (React.createElement(Text, { className: `p p3 apercuPro_Bold primaryColor1`, text: handlePriceCheckFunc(data.product?.price, currency) }))),
+                    React.createElement("div", { className: `mobile-total-price-wrap nowrap` },
+                        React.createElement(Text, { className: `p p3 apercuPro_Medium primaryColor1 mb-mt`, text: `total` }),
+                        data.selectedOption?.discountedPrice ? (React.createElement("div", null,
+                            React.createElement(Text, { className: `p p3 apercuPro_Bold secondaryColor2`, text: handlePriceCheckFunc(data.product?.discountedPrice * data.qty, currency) }),
+                            React.createElement(Text, { className: `p p3 apercuPro_Regular primaryColor2 lineThrough`, text: handlePriceCheckFunc(data.product?.price * data.qty, currency) }))) : (React.createElement(Text, { className: `p p3 apercuPro_Bold primaryColor1`, text: handlePriceCheckFunc(data.product?.price * data.qty || data.total, currency || currency) }))))),
+            pathname === '/cart/' && (React.createElement("div", { className: `edit-remove-favorite-mobile-wrap` },
+                additionalParameters.edit.item && !data.product?.out_of_stock ? (React.createElement(Button, { text: 'edit', btnType: `green-small-text`, onClick: () => openPopup(
+                    // <ProductIndividual
+                    // 	isPopup
+                    // 	qty={data.qty}
+                    // 	itemId={data.id}
+                    // 	selectedOption={data.selectedOption}
+                    // 	selectedVariant={data.selectedVariant}
+                    // 	{...data.product}
+                    // />
+                    React.createElement("div", null, "Product Individual")) })) : (React.createElement(Text, { className: `p p3 apercuPro_Bold primaryColor3 underline opacityZero empty`, text: 'empty' })),
+                React.createElement("div", { className: `favorite-remove-mobile-wrap` }, additionalParameters.remove && (React.createElement(Button, { text: 'remove', btnType: `green-small-text`, onClick: () => removeCart({ productId: data.product.id, variantId: data.selectedVariant.id, optionId: data.selectedOption.id }) })))))),
+        React.createElement("div", { className: 'line' })));
+});
+export default ItemMobile;

package/dist/components/cart/Items/Simple/index.d.ts

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

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

@@ -0,0 +1,35 @@
+import React, { memo, useMemo } from 'react';
+import { Text, useUi } from '@weareconceptstudio/core';
+//* Components
+import Item from './Item';
+import ItemMobile from './ItemMobile';
+//* Style
+import CartItemsStyle from './style';
+const CartItems = memo(({ data, className, title, smallFontSize, additionalParameters, currency, isLast, favorites, deleteCartItem }) => {
+    const { winWidth } = useUi();
+    //! Store
+    const orderStore = useMemo(() => {
+        return winWidth >= 768 ? (React.createElement("div", { className: `order-items-table-wrap` },
+            React.createElement("div", { className: `titles-wrap` },
+                React.createElement("div", { className: `title-wrap tl-col-1` },
+                    React.createElement(Text, { className: `p p3 account-font-bold account-primary-color1 nowrap`, text: `item` })),
+                React.createElement("div", { className: `title-wrap tl-col-2` },
+                    React.createElement(Text, { className: `p p3 account-font-bold account-primary-color1 nowrap`, text: `quantity` })),
+                React.createElement("div", { className: `title-wrap tl-col-3 title-item` },
+                    React.createElement(Text, { className: `p p3 account-font-bold account-primary-color1 nowrap alignRight`, text: `price` })),
+                React.createElement("div", { className: `title-wrap tl-col-4 title-item` },
+                    React.createElement(Text, { className: `p p3 account-font-bold account-primary-color1 nowrap alignRight`, text: `total` }))),
+            React.createElement("div", { className: `items-wrap` }, data?.map((item, index) => {
+                return (React.createElement(Item, { key: index, data: item, currency: currency, favorites: favorites, isLast: data.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item, favorite: additionalParameters.favorite, deleteCartItem: deleteCartItem }));
+            })))) : (React.createElement("div", { className: `mobile-order-items-table-wrap` }, data?.map((item, index) => {
+            return (React.createElement(ItemMobile, { key: index, data: item, isLast: isLast, currency: currency, favorites: favorites, additionalParameters: additionalParameters }));
+        })));
+    }, [winWidth, data, additionalParameters, currency]);
+    return (React.createElement(CartItemsStyle, { className: className || '' },
+        additionalParameters.edit.list ? (React.createElement("div", { className: `title-edit-wrapper` },
+            React.createElement(Text, { className: `p ${smallFontSize ? 'p2' : 'p1'} account-font-bold account-primary-color1`, text: title }),
+            React.createElement(Button, { url: '/cart/', text: `editCart`, btnType: `green-small-text` }))) : (React.createElement(Text, { className: `p ${smallFontSize ? 'p2' : 'p1'} account-font-bold account-primary-color1`, text: title })),
+        additionalParameters.horizontalLine && React.createElement("div", { className: `order-items-line` }),
+        orderStore));
+});
+export default CartItems;

package/dist/components/cart/Items/Simple/style.d.ts

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