@weareconceptstudio/account 0.1.2 → 0.1.4

package/dist/AccountProvider.d.ts

@@ -1,5 +1,5 @@
 export function useAccountContext(): any;
-export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currency, addressType, addressFormFields, useUser }: {
+export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currency, addressType, addressFormFields, useUser, useCart }: {
     fontFamily?: string;
     shopUrl?: string;
     children: any;
@@ -8,5 +8,6 @@ export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currenc
     addressType: any;
     addressFormFields: any;
     useUser: any;
+    useCart: 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, useUser }) => {
+export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields, useUser, useCart }) => {
     const { addTranslation } = useTranslation();
     useEffect(() => {
         addTranslation(translations, 'prepend');
     }, []);
-    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser } },
-        React.createElement(AddressProvider, { addressType: addressType, addressFormFields: addressFormFields, useUser: useUser },
+    return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart } },
+        React.createElement(AddressProvider, { addressType: addressType, addressFormFields: addressFormFields, useUser: useUser, useCart: useCart },
             React.createElement(ThemeProvider, { theme: theme },
                 React.createElement(AccountVariables, { fontFamily: fontFamily }),
                 React.createElement(AccountHelperClass, null),

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

@@ -1,10 +1,3 @@
 export default OrdersList;
-declare function OrdersList({ data, total, pageSize, router, pathname, searchParams }: {
-    data: any;
-    total: any;
-    pageSize: any;
-    router: any;
-    pathname: any;
-    searchParams: any;
-}): React.JSX.Element;
+declare function OrdersList(): React.JSX.Element;
 import React from 'react';

package/dist/components/OrdersList/index.js

@@ -1,24 +1,34 @@
-import React, { useMemo, useCallback } from 'react';
-import { createQueryString, Text, useTranslation, useUi } from '@weareconceptstudio/core';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import { Text, useTranslation, useUi, api } from '@weareconceptstudio/core';
 //* Utils
 import { handlePriceCheckFunc } from '../../utils/_functions';
 //* Components
 import OrderItem from './OrderItem';
 import Pagination from '../ui/Pagination';
 import AccountButton from '../ui/AccountButton';
+import EmptyOrders from '../EmptyOrders';
 //* Style
 import OrdersListStyle from './style';
-// TODO: status change
-const OrdersList = ({ data, total, pageSize, router, pathname, searchParams }) => {
+const OrdersList = () => {
     const { translate } = useTranslation();
     const { winWidth } = useUi();
-    const onFilterChange = useCallback((type, typeId, multiple = false) => {
-        const params = createQueryString({ searchParams, type, typeId, multiple });
-        if (type === 'page') {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        }
-        router.push(pathname + '?' + params, { scroll: false });
-    }, [searchParams]);
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pagination, setPagination] = useState({
+        total: 0,
+        pageSize: 0,
+    });
+    const getOrders = useCallback((page) => {
+        api.get({ url: 'orders', params: { page } }).then((res) => {
+            setData(res.orders);
+            setPagination(res.pagination);
+            setLoading(false);
+        });
+    }, []);
+    useEffect(() => {
+        getOrders(currentPage);
+    }, [currentPage]);
     //! List Store
     const listStore = useMemo(() => {
         return winWidth >= 768 ? (React.createElement("div", { className: `order-table-wrap` },
@@ -59,11 +69,11 @@ const OrdersList = ({ data, total, pageSize, router, pathname, searchParams }) =
                         React.createElement(AccountButton, { text: 'viewOrder', btnType: `green-small-text`, url: `/account/order-history${item.id}` })))));
         })));
     }, [winWidth, data]);
-    return (React.createElement(OrdersListStyle, null,
+    return !loading && data.length > 0 ? (React.createElement(OrdersListStyle, null,
         React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: 'orderHistory' }),
         React.createElement("div", { className: `order-history-line` }),
         listStore,
         React.createElement("div", { className: `pagination-wrap` },
-            React.createElement(Pagination, { total: total, pageSize: pageSize, onChange: (page) => onFilterChange('page', page) }))));
+            React.createElement(Pagination, { activePageState: currentPage, ...pagination, onChange: (page) => setCurrentPage(page) })))) : !loading ? (React.createElement(EmptyOrders, null)) : null;
 };
 export default OrdersList;

package/dist/components/TotalCheckout/index.js

@@ -11,7 +11,7 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
     const { currency, useUser } = useAccountContext();
     const { user } = useUser();
     const savedCards = useMemo(() => {
-        if (isCheckout) {
+        if (user) {
             let cards = [
                 {
                     label: 'Remember New Card',

package/dist/components/ui/AccountButton/index.js

@@ -1,13 +1,9 @@
 import React, { memo, useCallback, 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', {
@@ -17,7 +13,7 @@ const AccountButton = memo(({ btnType, text, className, onClick, children, url,
     const handleClick = useCallback(() => {
         return !disabled && onClick?.();
     }, [onClick, disabled]);
-    return (React.createElement(AccountButtonStyle, { onClick: handleClick, className: classString, theme: theme(globalTheme) },
+    return (React.createElement(AccountButtonStyle, { onClick: handleClick, className: classString },
         React.createElement(Component, { ...customProps },
             svg_icon || children || translate(text),
             " ")));

package/dist/components/ui/WarningMessageForPopup/index.js

@@ -1,15 +1,12 @@
 import React from 'react';
 import { useUi, Text } from '@weareconceptstudio/core';
-import { useTheme } from 'styled-components';
-import theme from '../../../styles/theme';
 //* Style
 import WarningMessageForPopupStyle from './style';
 //* Components
 import AccountButton from '../AccountButton';
 const WarningMessageForPopup = React.memo(({ isDelete = false, isThankYou = false, onRemove, title, description, globalData }) => {
     const { closePopup } = useUi();
-    const globalTheme = useTheme();
-    return (React.createElement(WarningMessageForPopupStyle, { className: 'warning-message-block', theme: theme(globalTheme) },
+    return (React.createElement(WarningMessageForPopupStyle, { className: 'warning-message-block' },
         React.createElement(Text, { tag: `h6`, className: `account-h6 account-font-bold account-primary-color1 warning-message-title`, text: title }),
         React.createElement(Text, { className: `account-p account-p2 account-font-regular account-primary-color1 confirm-delete-address-text`, text: description }),
         React.createElement("div", { className: `cancel-remove-wrap ${!isDelete ? 'mobile-margin' : ''}` }, isDelete ? (React.createElement(React.Fragment, null,

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

@@ -1,15 +1,14 @@
 import React, { memo as Memo, useState, useCallback } from 'react';
 import { useUi, Text } from '@weareconceptstudio/core';
 import { FormBuilder } from '@weareconceptstudio/form';
+import { useAddressContext } from '../AddressProvider';
 import AccountButton from '../../../components/ui/AccountButton';
-import { useTheme } from 'styled-components';
-import theme from '../../../styles/theme';
 //* Icons
 import { CheckboxIcon, CheckboxCheckedIcon } from '../../../utils/icons';
 //* Style
 import AddressFormStyle from './style';
-const AddressForm = Memo(({ title, data, formFields, type, createAddress, updateAddress }) => {
-    const globalTheme = useTheme();
+const AddressForm = Memo(({ title, data, type }) => {
+    const { formFields, createAddress, updateAddress } = useAddressContext();
     const { closePopup } = useUi();
     //! States
     const [isChecked, setIsChecked] = useState(data?.is_default || false);
@@ -27,7 +26,7 @@ const AddressForm = Memo(({ title, data, formFields, type, createAddress, update
                 closePopup();
             }));
     }, [data, isChecked, createAddress, updateAddress, isDisabled]);
-    return (React.createElement(AddressFormStyle, { theme: theme(globalTheme), className: 'address-form-block' },
+    return (React.createElement(AddressFormStyle, { className: 'address-form-block' },
         React.createElement(Text, { tag: `h6`, text: title, className: `account-h6 account-font-bold account-primary-color1 address-form-block-title` }),
         React.createElement(FormBuilder, { formOptions: {
                 initialValues: data,

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

@@ -23,6 +23,10 @@ const AddressFormStyle = styled.div `
 			.form-item {
 				width: var(--account_antFormItemWidth);
 				padding: 0 calc(var(--account_formItemDistance) / 2);
+
+				&:last-child {
+					--account_antFormItemWidth: 100%;
+				}
 			}
 		}
 

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

@@ -9,13 +9,13 @@ import WarningMessageForPopup from '../../../components/ui/WarningMessageForPopu
 import AddressItemStyle from './style';
 const AddressItem = ({ type, title, data, checkout_review, select_address, onClick }) => {
     const { openPopup } = useUi();
-    const { formFields, createAddress, updateAddress, deleteAddress, selectedAddresses, setSelectedAddresses } = useAddressContext();
+    const { deleteAddress, selectedAddresses, setSelectedAddresses } = useAddressContext();
     //! Handle Popups
     const handleDeletePopup = useCallback(() => {
         openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteAddressMessage', description: 'confirmDeleteAddress', onRemove: () => deleteAddress(data.id, data.type) }), { className: 'messagePopup' });
     }, [data]);
     const handleEditAddressPopup = useCallback(() => {
-        openPopup(React.createElement(AddressForm, { title: type === 'billing' ? `updateYourBillingAddress` : type == 'shipping' ? `updateYourShippingAddress` : 'updateYourAddress', data: data, formFields: formFields, createAddress: createAddress, updateAddress: updateAddress }));
+        openPopup(React.createElement(AddressForm, { title: type === 'billing' ? `updateYourBillingAddress` : type == 'shipping' ? `updateYourShippingAddress` : 'updateYourAddress', data: data }));
     }, [data]);
     return (data && (React.createElement(AddressItemStyle, { className: `item-container` },
         checkout_review && (React.createElement("div", { className: `change-address-wrap` },

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

@@ -8,12 +8,12 @@ import AddressItem from '../AddressItem';
 import AddressForm from '../AddressForm';
 const AddressWrap = ({ title = 'addresses', addNewText = 'addNewAdd', type, className }) => {
     const { openPopup } = useUi();
-    const { formFields, createAddress, updateAddress, addresses } = useAddressContext();
+    const { addresses } = useAddressContext();
     const classString = classNames('address-wrap', {
         [className]: className,
     });
     const handleAddNewAddressPopup = () => {
-        openPopup(React.createElement(AddressForm, { type: type, title: 'addNewAddress', formFields: formFields, createAddress: createAddress, updateAddress: updateAddress }));
+        openPopup(React.createElement(AddressForm, { title: 'addNewAddress', type: type }));
     };
     return (React.createElement("div", { className: classString },
         React.createElement("div", { className: `address-title-container` },

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useAddressContext } from '../AddressProvider';
 import { Text, useUi } from '@weareconceptstudio/core';
 import AddressForm from '../AddressForm';
@@ -7,9 +7,9 @@ import AccountButton from '../../../components/ui/AccountButton';
 import SelectAddressStyle from './style';
 const SelectAddress = ({ type, title }) => {
     const { openPopup } = useUi();
-    const { addresses, formFields, hasAddressType, createAddress } = useAddressContext();
+    const { addresses, hasAddressType } = useAddressContext();
     const handleNewAddressPopup = () => {
-        openPopup(React.createElement(AddressForm, { title: `addNewShippingAddress`, formFields: formFields, createAddress: createAddress, selected: { value: false, type: 'shipping' } }));
+        openPopup(React.createElement(AddressForm, { title: `addNewShippingAddress`, selected: { value: false, type: 'shipping' } }));
     };
     return (React.createElement(SelectAddressStyle, null,
         React.createElement("div", { className: `select-address-wrap` },

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

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

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

@@ -19,6 +19,10 @@ const ShippingBillingFormStyle = styled.div `
 		.form-item {
 			width: var(--account_antFormItemWidth);
 			padding: 0 calc(var(--account_formItemDistance) / 2);
+
+			&:last-child {
+				--account_antFormItemWidth: 100%;
+			}
 		}
 	}
 

package/dist/templates/AccountTemplate/index.js

@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
 import { Text, Link, useUi, Page } from '@weareconceptstudio/core';
-//* Style
 import AccountStyle from './style';
 const AccountTemplate = ({ isFullWidth = false, menuOptions = [], children, onSignOut }) => {
     const { winWidth } = useUi();

package/dist/templates/OrderHistoryTemplate/index.js

@@ -1,20 +1,8 @@
-import React, { useEffect, useState } from 'react';
-//* Style
+import React from 'react';
+import { OrdersList } from '../../components';
 import OrderHistoryTemplateStyle from './style';
-//* Components
-import { EmptyOrders, OrdersList } from '../../components';
-import { api } from '@weareconceptstudio/core';
-// TODO:
-const total = 0, pageSize = 0;
 const OrderHistoryTemplate = () => {
-    const [data, setData] = useState();
-    const [loading, setLoading] = useState(true);
-    useEffect(() => {
-        api.get({ url: 'orders' }).then((res) => {
-            setData(res.orders);
-            setLoading(false);
-        });
-    }, []);
-    return !loading ? (React.createElement(OrderHistoryTemplateStyle, null, data?.length > 0 ? (React.createElement(OrdersList, { data: data, total: total, pageSize: pageSize })) : (React.createElement(EmptyOrders, null)))) : null;
+    return (React.createElement(OrderHistoryTemplateStyle, null,
+        React.createElement(OrdersList, null)));
 };
 export default OrderHistoryTemplate;

package/dist/templates/ThankYouTemplate/index.js

@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Page, Text, Container, useTranslation } from '@weareconceptstudio/core';
 import { Sequence } from '../../components';
 import Button from '../../components/ui/AccountButton';
@@ -7,8 +7,12 @@ import ThankYouMessageStyle from './style';
 import { useAccountContext } from '../../AccountProvider';
 import { confirmImage } from './icons';
 const ThankYouTemplate = ({ orderNumber }) => {
-    const { shopUrl } = useAccountContext();
+    const { shopUrl, useCart } = useAccountContext();
     const { translate } = useTranslation();
+    const cart = useCart();
+    useEffect(() => {
+        cart.clearCart();
+    }, []);
     return (React.createElement(Page, { className: 'use-account' },
         React.createElement(ThankYouMessageStyle, null,
             React.createElement(Container, null,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@weareconceptstudio/account",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"description": "Concept Studio Account",
 	"author": "Concept Studio",
 	"license": "ISC",