@weareconceptstudio/account 0.1.6 → 0.1.8

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,12 +1,6 @@
1
1
  export default CartTemplate;
2
- declare function CartTemplate({ items, itemsCount, shippingCost, loading, children, subtotal, total, actions, btnDisabled, checkoutUrl }: {
3
- items: any;
4
- itemsCount: any;
5
- shippingCost: any;
6
- loading: any;
2
+ declare function CartTemplate({ children, actions, btnDisabled, checkoutUrl }: {
7
3
  children: any;
8
- subtotal: any;
9
- total: any;
10
4
  actions: any;
11
5
  btnDisabled: any;
12
6
  checkoutUrl?: string;
@@ -1,13 +1,19 @@
1
1
  import React from 'react';
2
- import { Page } from '@weareconceptstudio/core';
2
+ import { Page, useTranslation } from '@weareconceptstudio/core';
3
3
  import { SimpleCartItems, EmptyCart } from '..';
4
4
  import { TotalCheckout, AccountButton } from '../../../components';
5
5
  import { useAccountContext } from '../../../AccountProvider';
6
6
  import AccountContainer from '../../../components/AccountContainer';
7
+ //* SVG
8
+ const leftArrow = (React.createElement("svg", { fill: 'none', viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg' },
9
+ React.createElement("path", { d: 'M6.11061 7.98292L11.0193 12.8916L9.91087 14L5.00219 9.09133L6.11061 7.98292Z', fill: 'var(--account_primaryColor1)' }),
10
+ React.createElement("path", { d: 'M4.99977 6.90868L9.90845 2L11.0169 3.10841L6.10818 8.01709L4.99977 6.90868Z', fill: 'var(--account_primaryColor1)' })));
7
11
  //* Styles
8
12
  import CartTemplateStyle from './style';
9
- const CartTemplate = ({ items, itemsCount, shippingCost, loading, children, subtotal, total, actions, btnDisabled, checkoutUrl = '/checkout/' }) => {
10
- const { shopUrl } = useAccountContext();
13
+ const CartTemplate = ({ children, actions, btnDisabled, checkoutUrl = '/checkout/' }) => {
14
+ const { shopUrl, useCart } = useAccountContext();
15
+ const { translate } = useTranslation();
16
+ const { items, itemsCount, shippingCost, loading, subtotal, total } = useCart();
11
17
  return (React.createElement(Page, { className: 'cart use-account' },
12
18
  React.createElement(AccountContainer, null,
13
19
  React.createElement(CartTemplateStyle, null,
@@ -15,14 +21,17 @@ const CartTemplate = ({ items, itemsCount, shippingCost, loading, children, subt
15
21
  url: checkoutUrl,
16
22
  disabled: btnDisabled,
17
23
  text: 'proceedToCheckout',
18
- } }, itemsCount > 0 ? (React.createElement(React.Fragment, null,
24
+ } }, !loading ? (itemsCount > 0 ? (React.createElement(React.Fragment, null,
25
+ shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, className: `back-to-shop` },
26
+ leftArrow,
27
+ translate('backToShop'))) : null,
19
28
  React.createElement(SimpleCartItems, { data: items, smallFontSize: true, title: 'myCart', actions: actions, className: `cart-st-wrap`, additionalParameters: {
20
29
  remove: true,
21
30
  select: true,
22
31
  horizontalLine: true,
23
32
  edit: { list: false },
24
33
  } }),
25
- shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, text: `continueShopping`, className: `continue-shop-text` })) : null)) : (!loading && (React.createElement(EmptyCart, { data: items, shoppingUrl: shopUrl })))),
34
+ shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, text: `continueShopping`, className: `continue-shop-text` })) : null)) : (React.createElement(EmptyCart, { data: items, shoppingUrl: shopUrl }))) : null),
26
35
  children))));
27
36
  };
28
37
  export default CartTemplate;
@@ -6,6 +6,38 @@ const CartTemplateStyle = styled.section `
6
6
  margin-top: var(--account_continueShopTextMT);
7
7
  }
8
8
 
9
+ .back-to-shop {
10
+ margin-bottom: calc(var(--account_continueShopTextMT) + var(--sp2x));
11
+
12
+ a,
13
+ button {
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ gap: var(--sp1x);
18
+ text-decoration: unset !important;
19
+
20
+ @media (hover: hover) {
21
+ &:hover {
22
+ svg {
23
+ path {
24
+ fill: var(--account_secondColor9);
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+
31
+ svg {
32
+ width: var(--sp2x);
33
+ height: var(--sp2x);
34
+
35
+ path {
36
+ transition: path var(--account_trTime);
37
+ }
38
+ }
39
+ }
40
+
9
41
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
10
42
  --account_continueShopTextMT: var(--sp5x);
11
43
  }
@@ -1,9 +1,3 @@
1
1
  export default CheckoutTemplate;
2
- declare function CheckoutTemplate({ itemsCount, items, total, subtotal, shippingCost }: {
3
- itemsCount: any;
4
- items: any;
5
- total: any;
6
- subtotal: any;
7
- shippingCost: any;
8
- }): React.JSX.Element;
2
+ declare function CheckoutTemplate(): React.JSX.Element;
9
3
  import React from 'react';
@@ -1,14 +1,17 @@
1
- import React, { useCallback, useRef, useState } from 'react';
1
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
2
2
  import { api, Page } from '@weareconceptstudio/core';
3
3
  import { Sequence, TotalCheckout } from '../../../components';
4
4
  import { useAddressContext } from '../../address';
5
+ import { useAccountContext } from '../../../AccountProvider';
5
6
  import StepReview from './StepReview';
6
7
  import StepShipping from './StepShipping';
7
8
  import AccountContainer from '../../../components/AccountContainer';
8
9
  //* Styles
9
10
  import CheckoutTemplateStyle from './style';
10
- const CheckoutTemplate = ({ itemsCount, items, total, subtotal, shippingCost }) => {
11
+ const CheckoutTemplate = () => {
11
12
  const { checkoutAddressId } = useAddressContext();
13
+ const { useCart } = useAccountContext();
14
+ const { items, itemsCount, subtotal, total, shippingCost } = useCart();
12
15
  const [checkoutData, setCheckoutData] = useState({
13
16
  note: '',
14
17
  paymentType: 'cash_on_delivery',
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  export const confirmImage = (React.createElement("svg", { version: '1.0', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 302.000000 194.000000', preserveAspectRatio: 'xMidYMid meet' },
3
- React.createElement("g", { transform: 'translate(0.000000,194.000000) scale(0.100000,-0.100000)', fill: '#000000', stroke: 'none' },
3
+ React.createElement("g", { transform: 'translate(0.000000,194.000000) scale(0.100000,-0.100000)', stroke: 'none' },
4
4
  React.createElement("path", { d: 'M426 1881 c-85 -116 -104 -227 -53 -313 29 -50 101 -104 152 -114 28\n-5 36 -16 89 -121 l57 -115 -33 20 c-80 48 -202 59 -280 24 -48 -21 -98 -73\n-98 -101 0 -27 127 -70 206 -71 48 0 130 28 164 57 24 20 34 23 40 14 9 -15\n42 -162 37 -167 -2 -2 -39 -8 -83 -14 -136 -19 -124 -9 -124 -98 0 -48 6 -95\n17 -125 l17 -48 -62 -124 -62 -125 0 -108 0 -107 -174 3 -173 4 -22 -82 c-13\n-46 -25 -98 -28 -116 l-6 -34 134 -1 c74 0 534 -4 1024 -8 669 -6 962 -5 1180\n5 160 7 290 13 291 13 6 4 376 1322 372 1326 -3 3 -34 14 -70 24 -64 18 -76\n18 -918 -15 -470 -19 -857 -37 -861 -41 -4 -5 -48 -168 -99 -363 -51 -195 -95\n-358 -99 -363 -4 -4 -18 15 -31 43 -23 49 -23 51 -7 104 12 36 17 88 17 166\nl0 113 -47 -7 c-149 -21 -160 -20 -166 5 -4 13 -7 36 -7 50 0 25 3 26 68 31\n74 5 118 24 156 65 28 30 50 110 44 158 -3 29 -4 30 -55 28 -100 -4 -180 -70\n-210 -173 l-16 -55 -23 87 c-13 48 -40 123 -60 167 l-36 79 35 50 c61 89 72\n195 28 280 -31 61 -131 142 -175 142 -8 0 -30 -22 -50 -49z m2304 -1072 c-67\n-299 -123 -551 -125 -559 -4 -13 -106 -15 -852 -12 -466 2 -849 5 -851 7 -2 2\n58 242 134 534 l139 531 35 1 c19 0 395 15 835 32 581 23 801 29 803 21 2 -6\n-52 -256 -118 -555z m210 547 c35 -10 44 -18 42 -33 -1 -10 -83 -300 -181\n-643 l-178 -625 -74 -6 c-41 -3 -162 -9 -271 -13 -226 -9 -202 -20 -213 106\nl-7 78 280 -7 280 -6 9 44 c108 500 250 1119 258 1119 6 0 30 -6 55 -14z\nm-908 -1144 c3 -4 10 -47 15 -96 l9 -89 -1010 8 c-556 4 -1012 8 -1013 9 -2 2\n24 105 42 166 4 13 120 15 977 12 535 -2 976 -7 980 -10z' }))));
@@ -18,6 +18,7 @@ const ThankYouMessageStyle = styled.div `
18
18
 
19
19
  svg {
20
20
  width: var(--account_imageWidth);
21
+ fill: var(--backgroundColor);
21
22
  }
22
23
 
23
24
  .title {
@@ -65,7 +65,7 @@ const OrdersList = () => {
65
65
  React.createElement(Text, { className: `account-p account-p4 account-font-bold account-primary-color1`, text: `${translate('totalPrice')}:` }),
66
66
  React.createElement(Text, { className: `account-p account-p4 account-font-regular account-primary-color1 value`, text: handlePriceCheckFunc(item.total, item.currency) }))),
67
67
  React.createElement("div", { className: `right-wrap` },
68
- React.createElement(AccountButton, { text: 'viewOrder', btnType: `green-small-text`, url: `/account/order-history${item.id}` })))));
68
+ React.createElement(AccountButton, { text: 'viewOrder', btnType: `green-small-text`, url: `/account/order-history/${item.id}` })))));
69
69
  })));
70
70
  }, [winWidth, data]);
71
71
  return !loading && data.length > 0 ? (React.createElement(OrdersListStyle, null,
@@ -167,5 +167,6 @@ declare const _default: {
167
167
  confirmMessageDesc: string;
168
168
  review: string;
169
169
  reorder: string;
170
+ backToShop: string;
170
171
  };
171
172
  export default _default;
@@ -179,4 +179,5 @@ export default {
179
179
  confirmMessageDesc: 'You will receive a confirmation email with details of your order.',
180
180
  review: 'Review',
181
181
  reorder: 'Reorder',
182
+ backToShop: 'Back to shop',
182
183
  };
@@ -167,5 +167,6 @@ declare const _default: {
167
167
  confirmMessageDesc: string;
168
168
  review: string;
169
169
  reorder: string;
170
+ backToShop: string;
170
171
  };
171
172
  export default _default;
@@ -179,4 +179,5 @@ export default {
179
179
  confirmMessageDesc: 'You will receive a confirmation email with details of your order.',
180
180
  review: 'Review',
181
181
  reorder: 'Reorder',
182
+ backToShop: 'Back to shop',
182
183
  };
@@ -168,6 +168,7 @@ declare const _default: {
168
168
  confirmMessageDesc: string;
169
169
  review: string;
170
170
  reorder: string;
171
+ backToShop: string;
171
172
  };
172
173
  hy: {
173
174
  editCart: string;
@@ -338,6 +339,7 @@ declare const _default: {
338
339
  confirmMessageDesc: string;
339
340
  review: string;
340
341
  reorder: string;
342
+ backToShop: string;
341
343
  };
342
344
  ru: {
343
345
  editCart: string;
@@ -508,6 +510,7 @@ declare const _default: {
508
510
  confirmMessageDesc: string;
509
511
  review: string;
510
512
  reorder: string;
513
+ backToShop: string;
511
514
  };
512
515
  };
513
516
  export default _default;
@@ -167,5 +167,6 @@ declare const _default: {
167
167
  confirmMessageDesc: string;
168
168
  review: string;
169
169
  reorder: string;
170
+ backToShop: string;
170
171
  };
171
172
  export default _default;
@@ -179,4 +179,5 @@ export default {
179
179
  confirmMessageDesc: 'You will receive a confirmation email with details of your order.',
180
180
  review: 'Review',
181
181
  reorder: 'Reorder',
182
+ backToShop: 'Back to shop',
182
183
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weareconceptstudio/account",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "description": "Concept Studio Account",
5
5
  "author": "Concept Studio",
6
6
  "license": "ISC",