@weareconceptstudio/account 0.0.8 → 0.1.0

package/dist/AccountProvider.d.ts

@@ -1,5 +1,5 @@
 export function useAccountContext(): any;
-export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currency, addressType, addressFormFields }: {
+export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currency, addressType, addressFormFields, useUser }: {
     fontFamily?: string;
     shopUrl?: string;
     children: any;
@@ -7,5 +7,6 @@ export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currenc
     currency: any;
     addressType: any;
     addressFormFields: any;
+    useUser: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/AccountProvider.js

@@ -14,13 +14,13 @@ export const useAccountContext = () => {
     const context = useContext(AccountContext);
     return context;
 };
-export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields }) => {
+export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields, useUser }) => {
     const { addTranslation } = useTranslation();
     useEffect(() => {
         addTranslation(translations, 'prepend');
     }, []);
-    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl } },
-        React.createElement(AddressProvider, { addressType: addressType, addressFormFields: addressFormFields },
+    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser } },
+        React.createElement(AddressProvider, { addressType: addressType, addressFormFields: addressFormFields, useUser: useUser },
             React.createElement(ThemeProvider, { theme: theme },
                 React.createElement(AccountVariables, { fontFamily: fontFamily }),
                 React.createElement(AccountHelperClass, null),

package/dist/components/OrderDetails/index.js

@@ -4,8 +4,10 @@ import { Text, useTranslation } from '@weareconceptstudio/core';
 import { handlePriceCheckFunc, numToLocalString } from '../../utils/_functions';
 //* Style
 import OrderDetailsStyle from './style';
-const OrderDetails = memo(({ className, status, order_date, delivery_date, order_number, total_items, total_price, currency, shippingCost }) => {
+import { useAccountContext } from '../../AccountProvider';
+const OrderDetails = memo(({ className, status, date, delivery_date, orderNumber, itemsCount, total, shippingCost }) => {
     const { translate } = useTranslation();
+    const { currency } = useAccountContext();
     return (React.createElement(OrderDetailsStyle, { className: `${className || ''}` },
         React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: 'orderDetails' }),
         React.createElement("div", { className: `info-space-line` }),
@@ -18,7 +20,7 @@ const OrderDetails = memo(({ className, status, order_date, delivery_date, order
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
                 translate('orderDate'),
                 ":"),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: order_date })),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: date })),
         React.createElement("div", { className: `order-detail-item-wrap` },
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
                 translate('deliverDate'),
@@ -28,12 +30,12 @@ const OrderDetails = memo(({ className, status, order_date, delivery_date, order
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
                 translate('orderNumber'),
                 ":"),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: order_number })),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: orderNumber })),
         React.createElement("div", { className: `order-detail-item-wrap` },
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
                 translate('totalItems'),
                 ":"),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: total_items })),
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value`, text: itemsCount })),
         React.createElement("div", { className: `order-detail-item-wrap` },
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
                 translate('shippingCost'),
@@ -43,6 +45,6 @@ const OrderDetails = memo(({ className, status, order_date, delivery_date, order
             React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1` },
                 translate('totalPrice'),
                 ":"),
-            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value` }, handlePriceCheckFunc(total_price, currency)))));
+            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 value` }, handlePriceCheckFunc(total, currency)))));
 });
 export default OrderDetails;

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

@@ -1,7 +1,6 @@
 export default OrderedItems;
-declare function OrderedItems({ data: items, status, currency }: {
+declare function OrderedItems({ data: items, status }: {
     data: any;
     status: any;
-    currency: any;
 }): React.JSX.Element;
 import React from 'react';

package/dist/components/OrderedItems/index.js

@@ -2,60 +2,69 @@ import React, { useMemo } from 'react';
 import { Image, Text, useUi } from '@weareconceptstudio/core';
 //* Utils
 import { handlePriceCheckFunc } from '../../utils/_functions';
+import { useAccountContext } from '../../AccountProvider';
 //* Components
 import AccountButton from '../ui/AccountButton';
 //* Styles
 import OrderedItemsStyle from './style';
-const OrderedItems = ({ data: items, status, currency }) => {
+// TODO: product url
+const OrderedItems = ({ data: items, status }) => {
     const { winWidth } = useUi();
+    const { currency } = useAccountContext();
     //! Store order items
     const storeOrderedItems = useMemo(() => {
-        return items.map((item, index) => winWidth >= 768 ? (React.createElement("div", { key: index, className: `item-wrap` },
-            React.createElement("div", { className: `item-inner-wrapper` },
-                React.createElement("div", { className: `col-item tl-col-1 col-item-1 first-col` },
-                    React.createElement("div", { className: `image-wrapper` },
-                        React.createElement(Image, { src: item.product?.images[0]?.src, alt: item.product?.images[0]?.alt })),
-                    React.createElement("div", { className: `col-1-right-wrap` },
-                        React.createElement(AccountButton, { url: item.product.url, className: `capitalize`, text: item.product.name, btnType: `green-large-text` }),
-                        React.createElement("div", { className: `right-first-item-wrap` },
+        return items?.length > 0
+            ? items.map((item, index) => winWidth >= 768 ? (React.createElement("div", { key: index, className: `item-wrap` },
+                React.createElement("div", { className: `item-inner-wrapper` },
+                    React.createElement("div", { className: `col-item tl-col-1 col-item-1 first-col` },
+                        React.createElement("div", { className: `image-wrapper` },
+                            React.createElement(Image, { src: item.product.image.src, alt: item.product.image.alt })),
+                        React.createElement("div", { className: `col-1-right-wrap` },
+                            React.createElement(AccountButton, { text: item.product.name, btnType: `green-large-text`, className: `ordered-item-title`, url: `menu/${item.product.slug}` }),
+                            item.color ? (React.createElement("div", { className: `right-first-item-wrap` },
+                                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `color` }),
+                                "\u00A0",
+                                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 capitalize`, text: item.color }))) : (React.createElement("div", { className: `right-first-item-wrap` },
+                                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.product.short_info_1 }))),
+                            item.size ? (React.createElement("div", { className: `right-second-item-wrap` },
+                                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `size` }),
+                                "\u00A0",
+                                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.size }))) : (React.createElement("div", { className: `right-second-item-wrap` },
+                                React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.product.short_info_2 }))))),
+                    React.createElement("div", { className: `col-item tl-col-2` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.qty })),
+                    React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right`, text: handlePriceCheckFunc(item.price, currency) })),
+                    React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap price-block` },
+                        React.createElement("div", { className: `col-item-inner-wrap` },
+                            React.createElement("div", { className: `flex-end-wrap` },
+                                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right`, text: handlePriceCheckFunc(item.total, currency) }))))))) : (React.createElement("div", { key: index, 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: item.product.image.src, alt: item.product.image.alt })),
+                    React.createElement("div", { className: `mobile-info-wrap` },
+                        React.createElement(AccountButton, { text: item.product.name, btnType: `green-large-text`, url: `/menu/${item.product.slug}`, className: `ordered-item-mobile-title` }),
+                        item.color ? (React.createElement("div", { className: `mobile-info-item` },
                             React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `color` }),
                             "\u00A0",
-                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 capitalize`, text: item.color })),
-                        React.createElement("div", { className: `right-second-item-wrap` },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 capitalize`, text: item.color }))) : (React.createElement("div", { className: `mobile-info-item` },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.product.short_info_1 }))),
+                        item.size ? (React.createElement("div", { className: `mobile-info-item` },
                             React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `size` }),
                             "\u00A0",
-                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.size })))),
-                React.createElement("div", { className: `col-item tl-col-2` },
-                    React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.quantity })),
-                React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` },
-                    React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right`, text: handlePriceCheckFunc(item.price, currency) })),
-                React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap price-block` },
-                    React.createElement("div", { className: `col-item-inner-wrap` },
-                        React.createElement("div", { className: `flex-end-wrap` },
-                            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right`, text: handlePriceCheckFunc(item.total, currency) }))))))) : (React.createElement("div", { key: index, 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: item.product?.images[0]?.src, alt: item.product?.images[0]?.alt })),
-                React.createElement("div", { className: `mobile-info-wrap` },
-                    React.createElement(AccountButton, { className: `capitalize`, text: item.product.name, btnType: `green-large-text`, url: `/shop/product/${item.product.url}` }),
-                    React.createElement("div", { className: `mobile-info-item` },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `color` }),
-                        "\u00A0",
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 capitalize`, text: item.color })),
-                    React.createElement("div", { className: `mobile-info-item` },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `size` }),
-                        "\u00A0",
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.size })),
-                    React.createElement("div", { className: `mobile-info-item` },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `quantityWithSymbol` }),
-                        "\u00A0",
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.quantity })),
-                    React.createElement("div", { className: `mobile-price-wrap nowrap` },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt`, text: `price` }),
-                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: handlePriceCheckFunc(item.price, currency) })),
-                    React.createElement("div", { className: `mobile-total-price-wrap nowrap` },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt`, text: `total` }),
-                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: handlePriceCheckFunc(item.total, currency) })))))));
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.size }))) : (React.createElement("div", { className: `mobile-info-item` },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.product.short_info_2 }))),
+                        React.createElement("div", { className: `mobile-info-item` },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `quantityWithSymbol` }),
+                            "\u00A0",
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: item.qty })),
+                        React.createElement("div", { className: `mobile-price-wrap nowrap` },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt`, text: `price` }),
+                            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: handlePriceCheckFunc(item.price, currency) })),
+                        React.createElement("div", { className: `mobile-total-price-wrap nowrap` },
+                            React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt`, text: `total` }),
+                            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: handlePriceCheckFunc(item.total, currency) })))))))
+            : null;
     }, [items, currency, winWidth, status]);
     return (React.createElement(OrderedItemsStyle, { className: `ordered-items-wrapper` },
         React.createElement(Text, { className: 'account-p account-p1 account-font-bold account-primary-color1 ', text: 'orderItems' }),

package/dist/components/OrderedItems/style.js

@@ -126,6 +126,7 @@ const OrderedItemsStyle = styled.div `
 
 		.col-1-right-wrap {
 			flex: 1;
+			overflow-wrap: anywhere;
 			margin-left: var(--account_col1RightWrapML);
 
 			.btn-wrap {

package/dist/components/OrdersList/OrderItem/index.js

@@ -4,17 +4,19 @@ import { Text } from '@weareconceptstudio/core';
 import { handlePriceCheckFunc } from '../../../utils/_functions';
 //* Components
 import AccountButton from '../../ui/AccountButton';
+import { useAccountContext } from '../../../AccountProvider';
 const OrderItem = Memo(({ data }) => {
+    const { currency } = useAccountContext();
     return (React.createElement("div", { className: `order-table-item-wrap` },
         React.createElement("div", { className: `col-item od-col-1 nowrap` },
-            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: data.order_date })),
+            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: data.date })),
         React.createElement("div", { className: `col-item od-col-2` },
-            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: data.total_items })),
+            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: data.itemsCount })),
         React.createElement("div", { className: `col-item od-col-3 nowrap` },
-            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: `ID ${data.order_number}` })),
+            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: `ID ${data.orderNumber}` })),
         React.createElement("div", { className: `col-item od-col-4 nowrap` }, data.status === 'delivered' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item delivered`, text: 'delivered' })) : data.status === 'canceled' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item canceled`, text: 'canceled' })) : (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item in-progress`, text: 'inProgress' }))),
         React.createElement("div", { className: `col-item od-col-5 nowrap` },
-            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: handlePriceCheckFunc(data.total_price, data.currency) })),
+            React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: handlePriceCheckFunc(data.total, currency) })),
         React.createElement("div", { className: `col-item od-col-6 nowrap` },
             React.createElement(AccountButton, { text: 'viewOrder', btnType: `green-small-text`, url: `/account/order-history/${data.id}` }))));
 });

package/dist/components/OrdersList/index.js

@@ -8,6 +8,7 @@ import Pagination from '../ui/Pagination';
 import AccountButton from '../ui/AccountButton';
 //* Style
 import OrdersListStyle from './style';
+// TODO: status change
 const OrdersList = ({ data, total, pageSize, router, pathname, searchParams }) => {
     const { translate } = useTranslation();
     const { winWidth } = useUi();
@@ -41,19 +42,19 @@ const OrdersList = ({ data, total, pageSize, router, pathname, searchParams }) =
                     React.createElement("div", { className: `left-wrap` },
                         React.createElement("div", { className: `left-item-wrap` },
                             React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1`, text: `${translate('orderDate')}:` }),
-                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: item.order_date })),
+                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: item.date })),
                         React.createElement("div", { className: `left-item-wrap last` },
                             React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1`, text: `${translate('orderNumber')}:` }),
-                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: `ID ${item.order_number}` }))),
+                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: `ID ${item.orderNumber}` }))),
                     React.createElement("div", { className: `right-wrap` }, item.status === 'delivered' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1 account-primary-color5-bg status-item delivered`, text: 'delivered' })) : item.status === 'canceled' ? (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-error-color account-secondary-color7-bg status-item canceled`, text: 'canceled' })) : (React.createElement(Text, { className: `account-p account-p4 account-font-bold account-secondary-color1 account-secondary-color8-bg status-item in-progress`, text: 'inProgress' })))),
                 React.createElement("div", { className: `last-col-wrap` },
                     React.createElement("div", { className: `left-wrap` },
                         React.createElement("div", { className: `left-item-wrap` },
                             React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1`, text: `${translate('totalItems')}:` }),
-                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: item.total_items })),
+                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: item.itemsCount })),
                         React.createElement("div", { className: `left-item-wrap last` },
                             React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1`, text: `${translate('totalPrice')}:` }),
-                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: handlePriceCheckFunc(item.total_price, item.currency) }))),
+                            React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: handlePriceCheckFunc(item.total, item.currency) }))),
                     React.createElement("div", { className: `right-wrap` },
                         React.createElement(AccountButton, { text: 'viewOrder', btnType: `green-small-text`, url: `/account/order-history${item.id}` })))));
         })));

package/dist/components/TotalCheckout/index.js

@@ -1,48 +1,32 @@
-import React, { memo, useState, useEffect } from 'react';
-import { Text, useUi } from '@weareconceptstudio/core';
+import React, { memo, useState } from 'react';
+import { Text } from '@weareconceptstudio/core';
 import { useAccountContext } from '../../AccountProvider';
 import AccountButton from '../ui/AccountButton';
 //* Utils
 import { handlePriceCheckFunc, numToLocalString } from '../../utils/_functions';
 //* Style
 import TotalCheckoutStyle from './style';
-const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, loading, shippingCost }) => {
-    const { winWidth } = useUi();
+import { Input } from '@weareconceptstudio/form';
+const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, shippingCost }) => {
     const { currency } = useAccountContext();
     //! States
-    const [headerHeight, setHeaderHeight] = useState();
     const [note, setNote] = useState();
-    //! useEffect
-    useEffect(() => {
-        setHeaderHeight(document.getElementsByTagName('header')[0]?.clientHeight);
-    }, [winWidth]);
-    return (React.createElement(TotalCheckoutStyle, { "$headerHeight": headerHeight },
+    return (React.createElement(TotalCheckoutStyle, null,
         React.createElement("div", { className: `cart-main-wrap` },
             React.createElement("div", { className: `left-panel-wrap panel` }, children),
             React.createElement("div", { className: `right-panel-wrap panel ${confirmation ? 'display-none-wrap' : ''}` }, !confirmation && (React.createElement("div", { className: `max-width-wrapper sticky-wrap` },
-                React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: `orderSummary` }),
+                React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-title`, text: `orderSummary` }),
                 React.createElement("div", { className: `od-line` }),
                 React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `subtotal` }),
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: itemsCount ? handlePriceCheckFunc(subtotal, currency) : `0 ${currency}` })),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-subtotal`, text: `subtotal` }),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-currency`, text: itemsCount ? handlePriceCheckFunc(subtotal, currency) : `0 ${currency}` })),
                 React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `shipping` }),
-                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1`, text: `${String(shippingCost).toLowerCase() === 'free' || shippingCost === '-' ? shippingCost : `${numToLocalString(shippingCost)} ${currency}`}` })),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping`, text: `shipping` }),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 sticky-wrap-shipping-cost`, text: `${String(shippingCost).toLowerCase() === 'free' || shippingCost === '-' ? shippingCost : `${numToLocalString(shippingCost)} ${currency}`}` })),
                 React.createElement("div", { className: `od-item-wrap` },
-                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: `total` }),
-                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
-                typeof isShipping === 'boolean' && !isShipping ? (
-                // <Input.TextArea
-                // 	value={note}
-                // 	autoSize={{ minRows: 5, maxRows: 10 }}
-                // 	onChange={(e) => setNote(e.target.value)}
-                // 	placeholder={translate('checkoutCommentPlaceholder')}
-                // 	className={`comment-field account-p account-p3 account-font-regular account-primary-color1`}
-                // />
-                React.createElement("div", { style: {
-                        textAlign: 'center',
-                        margin: '16px 0',
-                    }, className: 'account-p account-p3 account-font-regular account-primary-color1' }, "Input Filed Textarea")) : null,
-                React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, onClick: () => buttonProps.handleClick && buttonProps.handleClick(note), className: `${!itemsCount || loading || buttonProps.disabled ? 'disabled' : ''}` })))))));
+                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-total`, text: `total` }),
+                    React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currnecy2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
+                typeof isShipping === 'boolean' && !isShipping ? (React.createElement(Input.TextArea, { onChange: (e) => setNote(e.target.value), placeholder: 'checkoutCommentPlaceholder', containerClassName: `comment-field`, className: `account-p account-p3 account-font-regular account-primary-color1` })) : null,
+                React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, disabled: buttonProps.disabled, onClick: () => buttonProps.handleClick && buttonProps.handleClick(note), className: `sticky-wrap-btn ${buttonProps.disabled ? 'disabled' : ''}` })))))));
 });
 export default TotalCheckout;

package/dist/components/TotalCheckout/style.js

@@ -49,32 +49,7 @@ const TotalCheckoutStyle = styled.section `
 
 				.comment-field {
 					width: 100%;
-					height: var(--sp10x);
-					padding: var(--account_commentPadding);
 					margin-top: var(--account_commentMarginTop);
-					vertical-align: top;
-					border: 2px solid var(--account_primaryColor5);
-					border-radius: var(--sp1x);
-					background: transparent;
-					-ms-overflow-style: none; /* IE and Edge */
-					scrollbar-width: none;
-
-					::-webkit-scrollbar {
-						display: none;
-					}
-
-					::placeholder {
-						color: var(--account_primaryColor3);
-						opacity: 1;
-					}
-
-					:-ms-input-placeholder {
-						color: var(--account_primaryColor3);
-					}
-
-					::-ms-input-placeholder {
-						color: var(--account_primaryColor3);
-					}
 				}
 
 				.btn-wrap {
@@ -82,13 +57,6 @@ const TotalCheckoutStyle = styled.section `
 					margin-top: var(--account_btnMTop);
 				}
 			}
-
-			//! Sticky Wrapper
-			.sticky-wrap {
-				position: sticky;
-				height: fit-content;
-				top: calc(${(props) => props.$headerHeight}px + var(--account_cartMainWrapPadTop));
-			}
 		}
 	}
 

package/dist/components/cart/EmptyCart/index.js

@@ -6,8 +6,8 @@ import EmptyCartStyle from './style';
 const EmptyCart = ({ shoppingUrl }) => {
     return (React.createElement(EmptyCartStyle, null,
         React.createElement("div", { className: `empty-cart-wrap` },
-            React.createElement(Text, { tag: `h4`, className: `account-h4 account-font-bold account-primary-color1`, text: `cartEmpty` }),
-            React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 description`, text: `cartEmptyDesc` }),
-            shoppingUrl ? (React.createElement(AccountButton, { btnType: 'purple-text', text: `shopNow`, url: shoppingUrl })) : null)));
+            React.createElement(Text, { tag: `h4`, className: `account-h4 account-font-bold account-primary-color1 empty-cart-title`, text: `cartEmpty` }),
+            React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 empty-cart-description`, text: `cartEmptyDesc` }),
+            shoppingUrl ? (React.createElement(AccountButton, { text: `shopNow`, url: shoppingUrl, btnType: 'purple-text', className: 'empty-cart-btn' })) : null)));
 };
 export default EmptyCart;

package/dist/components/cart/EmptyCart/style.js

@@ -8,7 +8,7 @@ const EmptyCartStyle = styled.section `
 		max-width: var(--account_emptyCartWrapMaxWidth);
 		width: 100%;
 
-		.description {
+		.empty-cart-description {
 			margin-top: var(--account_descriptionMTop);
 		}
 

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

@@ -1,12 +1,11 @@
 import React, { memo, useMemo } from 'react';
 import { Image, Text } from '@weareconceptstudio/core';
 import { Select } from '@weareconceptstudio/form';
-import { useAccountContext } from '../../../../../AccountProvider';
 import { handlePriceCheckFunc } from '../../../../../utils/_functions';
 import Button from '../../../../ui/AccountButton';
+//TODO: Fake
 const pathname = '/cart/';
-const Item = memo(({ data, remove, select, isLast, actions }) => {
-    const { currency, maxQty } = useAccountContext();
+const Item = memo(({ data, remove, select, isLast, actions, maxQty, currency }) => {
     const selectionList = useMemo(() => {
         if (select) {
             const selectList = [];
@@ -21,27 +20,27 @@ const Item = memo(({ data, remove, select, isLast, actions }) => {
         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(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' }),
+                    React.createElement(Button, { text: data.product.name, btnType: `green-large-text`, url: `/menu/${data.product.slug}`, className: `capitalize title-btn`, target: pathname === '/cart/' || pathname === '/checkout' ? '_blank' : '_self' }),
                     React.createElement("div", { className: `right-first-item-wrap` },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 capitalize`, text: data.product.short_info_1 })),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.product.short_info_1 })),
                     React.createElement("div", { className: `right-second-item-wrap` },
                         React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: data.product.short_info_2 })))),
-            React.createElement("div", { className: `col-item tl-col-2` }, select ? (React.createElement("div", { className: `select-and-out-of-stock-wrap` }, !data.product?.out_of_stock ? (React.createElement(Select, { allowSearch: false, options: selectionList, value: data.qty, onChange: (val) => actions.add({
-                    productId: data.product.id,
+            React.createElement("div", { className: `col-item tl-col-2` }, select ? (React.createElement("div", { className: `select-and-out-of-stock-wrap` }, !data.product?.out_of_stock ? (React.createElement(Select, { value: data.qty, allowSearch: false, options: selectionList, onChange: (val) => actions.add({
                     qty: val,
+                    productId: data.product.id,
                 }) })) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty }))),
-            React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, data?.product?.sale_price ? (React.createElement("div", null,
-                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 alignRight`, text: handlePriceCheckFunc(data?.product?.sale_price, currency) }),
-                React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right`, text: handlePriceCheckFunc(data.product?.price, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 alignRight`, text: handlePriceCheckFunc(data.product?.price, currency) }))),
+            React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, data.product?.sale_price ? (React.createElement("div", null,
+                React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-price`, text: handlePriceCheckFunc(data.product.sale_price, currency) }),
+                React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-price1`, text: handlePriceCheckFunc(data.product.price, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-price2`, 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?.product.sale_price ? (React.createElement("div", null,
-                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right`, text: `${data.sale_total} ${currency}` }),
-                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right`, text: handlePriceCheckFunc(data.product?.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right`, text: `${data.total} ${currency}` }))),
+                    React.createElement("div", { className: `flex-end-wrap` }, data.product?.sale_price ? (React.createElement("div", null,
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-total`, text: `${data.sale_total} ${currency}` }),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-total1`, text: handlePriceCheckFunc(data.product.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-total2`, text: `${data.total} ${currency}` }))),
                     React.createElement("div", { className: `favorite-and-remove-wrap` }, remove && (React.createElement("div", { className: `remove-btn-wrap` },
-                        React.createElement(Button, { text: 'remove', btnType: `green-small-text`, onClick: () => actions.delete({ productId: data.product?.id }) }))))))),
+                        React.createElement(Button, { text: 'remove', btnType: `green-small-text`, className: 'cart-remove-btn', onClick: () => actions.delete({ productId: data.product?.id }) }))))))),
         isLast ? React.createElement("div", { className: 'line' }) : null));
 });
 export default Item;

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

@@ -1,60 +1,54 @@
 import React, { memo, useMemo } from 'react';
-import { Image, Text, useUi } from '@weareconceptstudio/core';
+import { Image, Text } from '@weareconceptstudio/core';
 import { Select } from '@weareconceptstudio/form';
 import Button from '../../../../ui/AccountButton';
-import { useAccountContext } from '../../../../../AccountProvider';
 import { handlePriceCheckFunc } from '../../../../../utils/_functions';
-// import ProductIndividual from '@/components/common/ProductIndividual';
 //TODO: Fake
 const pathname = '/cart/';
-const addToCart = () => { };
-const removeCart = () => { };
-const ItemMobile = memo(({ data, additionalParameters, isLast }) => {
-    const { openPopup } = useUi();
-    const { currency } = useAccountContext();
+const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) => {
     const selectionList = useMemo(() => {
-        if (additionalParameters.select) {
+        if (select) {
             const selectList = [];
-            for (let index = 1; index <= data.qty; index++) {
+            for (let index = 1; index <= maxQty; index++) {
                 selectList.push({ id: index, name: index });
             }
             return selectList;
         }
-    }, [data]);
+    }, [data, select, maxQty]);
     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(Image, { src: data.product.image.src, alt: data.product.image.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: () => { } })) : (React.createElement("div", { className: `mobile-info-item` },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1`, text: `quantityWithSymbol` }),
+                    React.createElement(Button, { text: data.product.name, btnType: `green-large-text`, url: `/menu/${data.product.slug}`, className: `capitalize mobile-info-wrap-title`, target: pathname === '/cart/' || pathname === '/checkout/' ? '_blank' : '_self' }),
+                    React.createElement("div", { className: 'mobile-info-item' },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 mobile-short-info1`, text: data.product.short_info_1 })),
+                    React.createElement("div", { className: 'mobile-info-item' },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 mobile-short-info2`, text: data.product.short_info_2 })),
+                    select ? (React.createElement("div", { className: `select-and-out-of-stock-mobile-wrap` }, !data.product?.out_of_stock ? (React.createElement(Select, { value: data.qty, allowSearch: false, options: selectionList, onChange: (val) => actions.add({
+                            qty: val,
+                            productId: data.product.id,
+                        }) })) : (React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity-with-symbol`, text: `quantityWithSymbol` }),
                         "\u00A0",
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1`, text: data.qty }))))) : (React.createElement("div", { className: `mobile-info-item` },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1`, text: `quantityWithSymbol` }),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity`, text: data.qty }))))) : (React.createElement("div", { className: `mobile-info-item` },
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity-with-symbol2`, text: `quantityWithSymbol` }),
                         "\u00A0",
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1`, text: data.qty || data.quantity }))),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity2`, text: data.qty }))),
                     React.createElement("div", { className: `mobile-price-wrap nowrap` },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1 mb-mt`, text: `price` }),
-                        data?.discountedPrice ? (React.createElement("div", null,
-                            React.createElement(Text, { className: `account-p account-p3 account-font-bold secondaryColor2`, text: handlePriceCheckFunc(data?.product.discountedPrice, currency) }),
-                            React.createElement(Text, { className: `account-p account-p3 account-font-regular primaryColor2 lineThrough value`, text: handlePriceCheckFunc(data.product?.price, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold primaryColor1`, text: handlePriceCheckFunc(data.product?.price, currency) }))),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt mobile-price-title`, text: `price` }),
+                        data.product?.sale_price ? (React.createElement("div", null,
+                            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 mobile-discounted-price`, text: handlePriceCheckFunc(data.product.sale_price, currency) }),
+                            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value mobile-price`, text: handlePriceCheckFunc(data.product.price, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 mobile-price2`, text: handlePriceCheckFunc(data.product.price, currency) }))),
                     React.createElement("div", { className: `mobile-total-price-wrap nowrap` },
-                        React.createElement(Text, { className: `account-p account-p3 account-font-medium primaryColor1 mb-mt`, text: `total` }),
-                        data.selectedOption?.discountedPrice ? (React.createElement("div", null,
-                            React.createElement(Text, { className: `account-p account-p3 account-font-bold secondaryColor2`, text: handlePriceCheckFunc(data.product?.discountedPrice * data.qty, currency) }),
-                            React.createElement(Text, { className: `account-p account-p3 account-font-regular primaryColor2 lineThrough`, text: handlePriceCheckFunc(data.product?.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold primaryColor1`, text: handlePriceCheckFunc(data.product?.price * data.qty || data.total, currency || currency) }))))),
+                        React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt mobile-total`, text: `total` }),
+                        data.product?.sale_price ? (React.createElement("div", null,
+                            React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 mobile-total-discounted-price`, text: `${data.sale_total} ${currency}` }),
+                            React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through mobile-total-price`, text: handlePriceCheckFunc(data.product.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 mobile-total-price2`, text: `${data.total} ${currency}` }))))),
             pathname === '/cart/' && (React.createElement("div", { className: `edit-remove-favorite-mobile-wrap` },
-                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: 'empty' }),
+                React.createElement("div", { className: `favorite-remove-mobile-wrap` }, remove && (React.createElement(Button, { text: 'remove', btnType: `green-small-text`, onClick: () => actions.delete({ productId: data.product.id }) })))))),
         React.createElement("div", { className: 'line' })));
 });
 export default ItemMobile;