@weareconceptstudio/account 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  export function useAccountContext(): any;
2
- export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currency, addressType, addressFormFields, useUser, useCart }: {
2
+ export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currency, addressType, addressFormFields, useUser, useCart, productPopup, productUrlPrefix }: {
3
3
  fontFamily?: string;
4
4
  shopUrl?: string;
5
5
  children: any;
@@ -9,5 +9,7 @@ export function AccountProvider({ fontFamily, shopUrl, children, maxQty, currenc
9
9
  addressFormFields: any;
10
10
  useUser: any;
11
11
  useCart: any;
12
+ productPopup: any;
13
+ productUrlPrefix: any;
12
14
  }): React.JSX.Element;
13
15
  import React from 'react';
@@ -1,5 +1,5 @@
1
- import React, { createContext, useContext, useEffect } from 'react';
2
- import { useTranslation } from '@weareconceptstudio/core';
1
+ import React, { createContext, useCallback, useContext, useEffect } from 'react';
2
+ import { useTranslation, useUi } from '@weareconceptstudio/core';
3
3
  import { ThemeProvider } from 'styled-components';
4
4
  import { AddressProvider } from './modules/address/AddressProvider';
5
5
  //* Translations
@@ -14,13 +14,22 @@ export const useAccountContext = () => {
14
14
  const context = useContext(AccountContext);
15
15
  return context;
16
16
  };
17
- export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields, useUser, useCart }) => {
17
+ export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', children, maxQty = 99, currency, addressType, addressFormFields, useUser, useCart, productPopup, productUrlPrefix }) => {
18
18
  const { addTranslation } = useTranslation();
19
+ const { openPopup } = useUi();
19
20
  useEffect(() => {
20
21
  addTranslation(translations, 'prepend');
21
22
  }, []);
22
- return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart } },
23
- React.createElement(AddressProvider, { addressType: addressType, addressFormFields: addressFormFields, useUser: useUser, useCart: useCart },
23
+ const handleProductClick = useCallback((product) => {
24
+ if (productUrlPrefix) {
25
+ console.log('Redirect for other project');
26
+ }
27
+ else {
28
+ openPopup(productPopup, { ...product, className: 'popup-product-block' });
29
+ }
30
+ }, [productUrlPrefix, productPopup]);
31
+ return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart, handleProductClick } },
32
+ React.createElement(AddressProvider, { useUser: useUser, useCart: useCart, addressType: addressType, addressFormFields: addressFormFields },
24
33
  React.createElement(ThemeProvider, { theme: theme },
25
34
  React.createElement(AccountVariables, { fontFamily: fontFamily }),
26
35
  React.createElement(AccountHelperClass, null),
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  export const skeletonTotal = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '528', height: '290', viewBox: '0 0 528 290', fill: 'none' },
3
- React.createElement("line", { y1: '45', x2: '528', y2: '45', stroke: '#EFF1F2', "stroke-width": '2' }),
3
+ React.createElement("line", { y1: '45', x2: '528', y2: '45', stroke: '#EFF1F2', strokeWidth: '2' }),
4
4
  React.createElement("rect", { width: '160', height: '30', rx: '12', fill: '#EFF1F2' }),
5
5
  React.createElement("rect", { y: '82', width: '90', height: '21', rx: '10.5', fill: '#EFF1F2' }),
6
6
  React.createElement("rect", { x: '391', y: '82', width: '137', height: '21', rx: '10.5', fill: '#EFF1F2' }),
@@ -3,7 +3,7 @@ import { Text } from '@weareconceptstudio/core';
3
3
  //* Style
4
4
  import ShippingBillingInfoStyle from './style';
5
5
  import { useAddressContext } from '../AddressProvider';
6
- // TODO: address info to component
6
+ // TODO: Address info to component
7
7
  const ShippingBillingInfo = memo(({ className, shipping_address, billing_address }) => {
8
8
  const { addressType } = useAddressContext();
9
9
  return (React.createElement(ShippingBillingInfoStyle, { className: `${className || ''}` },
@@ -3,9 +3,9 @@ import { Image, Text } from '@weareconceptstudio/core';
3
3
  import { Select } from '@weareconceptstudio/form';
4
4
  import { handlePriceCheckFunc } from '../../../../utils/_functions';
5
5
  import { AccountButton } from '../../../../components';
6
- //TODO: Fake
7
- const pathname = '/cart/';
6
+ import { useAccountContext } from '../../../../AccountProvider';
8
7
  const Item = memo(({ data, remove, select, isLast, actions, maxQty, currency }) => {
8
+ const { handleProductClick } = useAccountContext();
9
9
  const selectionList = useMemo(() => {
10
10
  if (select) {
11
11
  const selectList = [];
@@ -22,7 +22,7 @@ const Item = memo(({ data, remove, select, isLast, actions, maxQty, currency })
22
22
  React.createElement("div", { className: `image-wrapper` },
23
23
  React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
24
24
  React.createElement("div", { className: `col-1-right-wrap` },
25
- React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, url: `/menu/${data.product.slug}`, className: `capitalize title-btn`, target: pathname === '/cart/' || pathname === '/checkout' ? '_blank' : '_self' }),
25
+ React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize title-btn`, onClick: () => handleProductClick(data.product) }),
26
26
  React.createElement("div", { className: `right-first-item-wrap` },
27
27
  React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.product.short_info_1 })),
28
28
  React.createElement("div", { className: `right-second-item-wrap` },
@@ -3,9 +3,9 @@ import { Image, Text } from '@weareconceptstudio/core';
3
3
  import { Select } from '@weareconceptstudio/form';
4
4
  import { AccountButton } from '../../../../components';
5
5
  import { handlePriceCheckFunc } from '../../../../utils/_functions';
6
- //TODO: Fake
7
- const pathname = '/cart/';
6
+ import { useAccountContext } from '../../../../AccountProvider';
8
7
  const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) => {
8
+ const { handleProductClick } = useAccountContext();
9
9
  const selectionList = useMemo(() => {
10
10
  if (select) {
11
11
  const selectList = [];
@@ -21,7 +21,7 @@ const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) =>
21
21
  React.createElement("div", { className: `mobile-image-wrap` },
22
22
  React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
23
23
  React.createElement("div", { className: `mobile-info-wrap` },
24
- React.createElement(AccountButton, { 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' }),
24
+ React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize mobile-info-wrap-title`, onClick: () => handleProductClick(data.product) }),
25
25
  React.createElement("div", { className: 'mobile-info-item' },
26
26
  React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 mobile-short-info1`, text: data.product.short_info_1 })),
27
27
  React.createElement("div", { className: 'mobile-info-item' },
@@ -46,9 +46,9 @@ const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) =>
46
46
  data.product?.sale_price ? (React.createElement("div", null,
47
47
  React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 mobile-total-discounted-price`, text: `${data.sale_total} ${currency}` }),
48
48
  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}` }))))),
49
- pathname === '/cart/' && (React.createElement("div", { className: `edit-remove-favorite-mobile-wrap` },
49
+ React.createElement("div", { className: `edit-remove-favorite-mobile-wrap` },
50
50
  React.createElement("div", { className: 'empty' }),
51
- React.createElement("div", { className: `favorite-remove-mobile-wrap` }, remove && (React.createElement(AccountButton, { text: 'remove', btnType: `green-small-text`, onClick: () => actions.delete({ productId: data.product.id }) })))))),
51
+ React.createElement("div", { className: `favorite-remove-mobile-wrap` }, remove && (React.createElement(AccountButton, { text: 'remove', btnType: `green-small-text`, onClick: () => actions.delete({ productId: data.product.id }) }))))),
52
52
  React.createElement("div", { className: 'line' })));
53
53
  });
54
54
  export default ItemMobile;
@@ -4,10 +4,9 @@ import { handlePriceCheckFunc } from '../../../utils/_functions';
4
4
  import { useAccountContext } from '../../../AccountProvider';
5
5
  import { AccountButton } from '../../../components';
6
6
  import OrderedItemsStyle from './style';
7
- // TODO: product url
8
7
  const OrderedItems = ({ data: items, status }) => {
9
8
  const { winWidth } = useUi();
10
- const { currency } = useAccountContext();
9
+ const { currency, handleProductClick } = useAccountContext();
11
10
  //! Store order items
12
11
  const storeOrderedItems = useMemo(() => {
13
12
  return items?.length > 0
@@ -17,7 +16,7 @@ const OrderedItems = ({ data: items, status }) => {
17
16
  React.createElement("div", { className: `image-wrapper` },
18
17
  React.createElement(Image, { src: item.product.image.src, alt: item.product.image.alt })),
19
18
  React.createElement("div", { className: `col-1-right-wrap` },
20
- React.createElement(AccountButton, { text: item.product.name, btnType: `green-large-text`, className: `ordered-item-title`, url: `/menu/${item.product.slug}` }),
19
+ React.createElement(AccountButton, { text: item.product.name, btnType: `green-large-text`, className: `ordered-item-title`, onClick: () => handleProductClick(item.product) }),
21
20
  item.color ? (React.createElement("div", { className: `right-first-item-wrap` },
22
21
  React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `color` }),
23
22
  "\u00A0",
@@ -40,7 +39,7 @@ const OrderedItems = ({ data: items, status }) => {
40
39
  React.createElement("div", { className: `mobile-image-wrap` },
41
40
  React.createElement(Image, { src: item.product.image.src, alt: item.product.image.alt })),
42
41
  React.createElement("div", { className: `mobile-info-wrap` },
43
- React.createElement(AccountButton, { text: item.product.name, btnType: `green-large-text`, url: `/menu/${item.product.slug}`, className: `ordered-item-mobile-title` }),
42
+ React.createElement(AccountButton, { text: item.product.name, btnType: `green-large-text`, className: `ordered-item-mobile-title`, onClick: () => handleProductClick(item.product) }),
44
43
  item.color ? (React.createElement("div", { className: `mobile-info-item` },
45
44
  React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `color` }),
46
45
  "\u00A0",
@@ -62,7 +61,7 @@ const OrderedItems = ({ data: items, status }) => {
62
61
  React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt`, text: `total` }),
63
62
  React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: handlePriceCheckFunc(item.total, currency) })))))))
64
63
  : null;
65
- }, [items, currency, winWidth, status]);
64
+ }, [items, currency, winWidth, status, handleProductClick]);
66
65
  return (React.createElement(OrderedItemsStyle, { className: `ordered-items-wrapper` },
67
66
  React.createElement(Text, { className: 'account-p account-p1 account-font-bold account-primary-color1 ', text: 'orderItems' }),
68
67
  React.createElement("div", { className: 'line' }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weareconceptstudio/account",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "description": "Concept Studio Account",
5
5
  "author": "Concept Studio",
6
6
  "license": "ISC",