@weareconceptstudio/account 0.1.0 → 0.1.2

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.
Files changed (13) hide show
  1. package/dist/components/TotalCheckout/index.js +40 -8
  2. package/dist/modules/address/AddressProvider.js +9 -0
  3. package/dist/modules/address/SelectAddress/style.js +0 -6
  4. package/dist/templates/CheckoutTemplate/index.js +16 -10
  5. package/dist/templates/SignInTemplate/index.d.ts +1 -1
  6. package/dist/templates/SignInTemplate/index.js +2 -2
  7. package/dist/templates/SignUpTemplate/index.d.ts +1 -1
  8. package/dist/templates/SignUpTemplate/index.js +2 -2
  9. package/dist/templates/ThankYouTemplate/icons.d.ts +2 -0
  10. package/dist/templates/ThankYouTemplate/icons.js +4 -0
  11. package/dist/templates/ThankYouTemplate/index.d.ts +3 -1
  12. package/dist/templates/ThankYouTemplate/index.js +3 -5
  13. package/package.json +1 -1
package/dist/components/TotalCheckout/index.js CHANGED
@@ -1,16 +1,38 @@
1
- import React, { memo, useState } from 'react';
1
+ import React, { memo, useMemo } from 'react';
2
2
  import { Text } from '@weareconceptstudio/core';
3
3
  import { useAccountContext } from '../../AccountProvider';
4
4
  import AccountButton from '../ui/AccountButton';
5
+ import { Input, Radio } from '@weareconceptstudio/form';
5
6
  //* Utils
6
7
  import { handlePriceCheckFunc, numToLocalString } from '../../utils/_functions';
7
8
  //* Style
8
9
  import TotalCheckoutStyle from './style';
9
- import { Input } from '@weareconceptstudio/form';
10
- const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, shippingCost }) => {
11
- const { currency } = useAccountContext();
12
- //! States
13
- const [note, setNote] = useState();
10
+ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, itemsCount, subtotal, total, shippingCost, fillCheckoutData, checkoutData, isCheckout = false }) => {
11
+ const { currency, useUser } = useAccountContext();
12
+ const { user } = useUser();
13
+ const savedCards = useMemo(() => {
14
+ if (isCheckout) {
15
+ let cards = [
16
+ {
17
+ label: 'Remember New Card',
18
+ value: '0',
19
+ },
20
+ ];
21
+ user.savedCards.forEach((savedCard) => {
22
+ cards.push({
23
+ label: `${savedCard.name} - ${savedCard.number}}`,
24
+ value: savedCard.id,
25
+ });
26
+ });
27
+ return checkoutData?.paymentType == 'credit_card' ? (React.createElement(Radio.Group, { value: checkoutData.paymentType, onChange: (val) => {
28
+ if (val == 0) {
29
+ fillCheckoutData('remember_card', true);
30
+ }
31
+ fillCheckoutData('card_id', val);
32
+ }, options: cards })) : null;
33
+ }
34
+ return null;
35
+ }, [user, checkoutData]);
14
36
  return (React.createElement(TotalCheckoutStyle, null,
15
37
  React.createElement("div", { className: `cart-main-wrap` },
16
38
  React.createElement("div", { className: `left-panel-wrap panel` }, children),
@@ -26,7 +48,17 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps, i
26
48
  React.createElement("div", { className: `od-item-wrap` },
27
49
  React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-total`, text: `total` }),
28
50
  React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1 sticky-wrap-currnecy2`, text: itemsCount ? handlePriceCheckFunc(total, currency) : `0 ${currency}` })),
29
- 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,
30
- 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' : ''}` })))))));
51
+ isCheckout ? (React.createElement(React.Fragment, null,
52
+ typeof isShipping === 'boolean' && !isShipping ? (React.createElement(Input.TextArea, { onChange: (e) => fillCheckoutData('note', e.target.value), placeholder: 'checkoutCommentPlaceholder', containerClassName: `comment-field`, className: `account-p account-p3 account-font-regular account-primary-color1` })) : null,
53
+ React.createElement(Radio.Group, { value: checkoutData.paymentType, onChange: (val) => fillCheckoutData('paymentType', val), options: [
54
+ { label: 'Visa Arca', value: 'credit_card' },
55
+ { label: 'Idram', value: 'idram' },
56
+ { label: 'POS TERMINAL', value: 'pos_terminal' },
57
+ { label: 'Telcell', value: 'telcell' },
58
+ { label: 'Inecopay', value: 'inecopay' },
59
+ { label: 'Cash', value: 'cash_on_delivery' },
60
+ ] }),
61
+ React.createElement("div", { style: { marginTop: 20 } }, savedCards))) : null,
62
+ React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, disabled: buttonProps.disabled, onClick: () => buttonProps.handleClick && buttonProps.handleClick(), className: `sticky-wrap-btn ${buttonProps.disabled ? 'disabled' : ''}` })))))));
31
63
  });
32
64
  export default TotalCheckout;
package/dist/modules/address/AddressProvider.js CHANGED
@@ -7,6 +7,7 @@ export const useAddressContext = () => {
7
7
  };
8
8
  export const AddressProvider = ({ addressType, addressFormFields = [], useUser, children }) => {
9
9
  const userContext = useUser();
10
+ const [addressLoading, setAddressLoading] = useState(true);
10
11
  const [addresses, setAddresses] = useState(addressType ? { billing: [], shipping: [] } : []);
11
12
  const [selectedAddresses, setSelectedAddresses] = useState(addressType ? { billing: {}, shipping: {} } : {});
12
13
  const hasAddressType = useMemo(() => {
@@ -28,12 +29,19 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
28
29
  billing: res.data[0],
29
30
  }
30
31
  : res.data[0]);
32
+ setAddressLoading(false);
31
33
  });
32
34
  }
33
35
  }, [userContext.isLoggedIn]);
34
36
  const createAddress = async (data) => {
35
37
  return await api.post('addresses', data).then((res) => {
36
38
  setAddresses(res.data);
39
+ setSelectedAddresses(addressType
40
+ ? {
41
+ shipping: res.data[0],
42
+ billing: res.data[0],
43
+ }
44
+ : res.data[0]);
37
45
  });
38
46
  };
39
47
  const updateAddress = async (data, addressId) => {
@@ -47,6 +55,7 @@ export const AddressProvider = ({ addressType, addressFormFields = [], useUser,
47
55
  });
48
56
  };
49
57
  return (React.createElement(AddressContext.Provider, { value: {
58
+ addressLoading,
50
59
  hasAddressType,
51
60
  formFields: addressFormFields,
52
61
  createAddress,
package/dist/modules/address/SelectAddress/style.js CHANGED
@@ -57,12 +57,6 @@ const SelectAddressStyle = styled.div `
57
57
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
58
58
  --account_selectAddressWrapMBot: var(--sp3x);
59
59
  --account_itemDistance: var(--sp2x);
60
-
61
- .select-address-wrap {
62
- .btn-wrap {
63
- margin-top: var(--sp1x);
64
- }
65
- }
66
60
  }
67
61
  `;
68
62
  export default SelectAddressStyle;
package/dist/templates/CheckoutTemplate/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useCallback, useRef } from 'react';
1
+ import React, { useCallback, useRef, useState } from 'react';
2
2
  import { api, Container, Page } from '@weareconceptstudio/core';
3
3
  import { Sequence, TotalCheckout } from '../../components';
4
4
  import { useAddressContext } from '../../modules';
@@ -7,8 +7,18 @@ import StepShipping from './StepShipping';
7
7
  //* Styles
8
8
  import CheckoutTemplateStyle from './style';
9
9
  const CheckoutTemplate = ({ itemsCount, items, total, subtotal, shippingCost }) => {
10
+ const [checkoutData, setCheckoutData] = useState({
11
+ note: '',
12
+ paymentType: 'cash_on_delivery',
13
+ });
14
+ const fillCheckoutData = (key, value) => {
15
+ setCheckoutData((prev) => ({
16
+ ...prev,
17
+ [key]: value,
18
+ }));
19
+ };
20
+ const { hasCheckoutAddress, addressLoading } = useAddressContext();
10
21
  const firstStepFormRef = useRef();
11
- const { hasCheckoutAddress, addressesLoading } = useAddressContext();
12
22
  const checkStep = {
13
23
  isShipping: hasCheckoutAddress,
14
24
  isReview: !hasCheckoutAddress,
@@ -17,11 +27,7 @@ const CheckoutTemplate = ({ itemsCount, items, total, subtotal, shippingCost })
17
27
  firstStepFormRef.current.submit();
18
28
  };
19
29
  const handleCheckoutSecondStep = async () => {
20
- return await api
21
- .post('checkout', {
22
- paymentType: 'cash',
23
- })
24
- .then((res) => {
30
+ return await api.post('checkout', checkoutData).then((res) => {
25
31
  if (res.redirect_url) {
26
32
  window.location.href = res.redirect_url;
27
33
  }
@@ -33,14 +39,14 @@ const CheckoutTemplate = ({ itemsCount, items, total, subtotal, shippingCost })
33
39
  return (React.createElement(Page, { className: 'checkout use-account' },
34
40
  React.createElement(Container, null,
35
41
  React.createElement(CheckoutTemplateStyle, null,
36
- React.createElement(TotalCheckout, { total: total, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, isShipping: checkStep.isShipping, buttonProps: {
42
+ React.createElement(TotalCheckout, { isCheckout: true, total: total, subtotal: subtotal, itemsCount: itemsCount, shippingCost: shippingCost, isShipping: checkStep.isShipping, checkoutData: checkoutData, fillCheckoutData: fillCheckoutData, buttonProps: {
37
43
  url: false,
38
44
  disabled: false,
39
45
  handleClick: handleCheckoutBtn,
40
46
  type: checkStep.isShipping ? 'submit' : 'button',
41
47
  text: checkStep.isShipping ? 'proceedToCheckout' : 'proceedToPayment',
42
- } },
48
+ } }, !addressLoading ? (React.createElement(React.Fragment, null,
43
49
  React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
44
- checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))))));
50
+ checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))) : null)))));
45
51
  };
46
52
  export default CheckoutTemplate;
package/dist/templates/SignInTemplate/index.d.ts CHANGED
@@ -3,5 +3,5 @@ interface SignInProps {
3
3
  formFields: [];
4
4
  onFormSubmit: () => Promise<any>;
5
5
  }
6
- declare const SignInTemplate: ({ formFields, onFormSubmit }: SignInProps) => React.JSX.Element;
6
+ declare const SignInTemplate: ({ formFields, onFormSubmit, signUpUrl }: SignInProps) => React.JSX.Element;
7
7
  export default SignInTemplate;
package/dist/templates/SignInTemplate/index.js CHANGED
@@ -5,7 +5,7 @@ import { AccountButton } from '../../components';
5
5
  import SignInTemplateStyle from './style';
6
6
  import { defaultFormFields } from './utils';
7
7
  // @ts-ignore
8
- const SignInTemplate = ({ formFields = defaultFormFields, onFormSubmit }) => {
8
+ const SignInTemplate = ({ formFields = defaultFormFields, onFormSubmit, signUpUrl = '/sign-up' }) => {
9
9
  return (React.createElement(Page, { className: 'sign-in use-account' },
10
10
  React.createElement(SignInTemplateStyle, null,
11
11
  React.createElement("div", { className: 'sign-in-wrapper' },
@@ -22,7 +22,7 @@ const SignInTemplate = ({ formFields = defaultFormFields, onFormSubmit }) => {
22
22
  React.createElement("div", { className: 'joinNowWrap' },
23
23
  React.createElement(Text, { className: `account-p account-p3 account-primary-color1 account-font-medium`, text: 'accountText' }),
24
24
  React.createElement("div", { className: 'joinNowLinkWrap' },
25
- React.createElement(Link, { href: '/sign-up' },
25
+ React.createElement(Link, { href: signUpUrl },
26
26
  React.createElement(Text, { className: `account-p account-p3 account-primary-color1 account-font-bold underline joinNowLink`, text: 'joinNow' })))))))));
27
27
  };
28
28
  export default SignInTemplate;
package/dist/templates/SignUpTemplate/index.d.ts CHANGED
@@ -3,5 +3,5 @@ interface SignUpProps {
3
3
  formFields: [];
4
4
  onFormSubmit: () => Promise<any>;
5
5
  }
6
- declare const SignUpTemplate: ({ formFields, onFormSubmit }: SignUpProps) => React.JSX.Element;
6
+ declare const SignUpTemplate: ({ formFields, onFormSubmit, signInUrl }: SignUpProps) => React.JSX.Element;
7
7
  export default SignUpTemplate;
package/dist/templates/SignUpTemplate/index.js CHANGED
@@ -5,7 +5,7 @@ import { AccountButton, CustomCheckbox } from '../../components';
5
5
  import SignUpTemplateStyle from './style';
6
6
  import { defaultFormFields } from './utils';
7
7
  // @ts-ignore
8
- const SignUpTemplate = ({ formFields = defaultFormFields, onFormSubmit }) => {
8
+ const SignUpTemplate = ({ formFields = defaultFormFields, onFormSubmit, signInUrl = '/sign-in' }) => {
9
9
  const { translate } = useTranslation();
10
10
  const [isChecked, setIsChecked] = useState(false);
11
11
  return (React.createElement(Page, { className: 'sign-up use-account' },
@@ -29,7 +29,7 @@ const SignUpTemplate = ({ formFields = defaultFormFields, onFormSubmit }) => {
29
29
  React.createElement("div", { className: 'already-wrap' },
30
30
  React.createElement(Text, { className: `account-p account-p3 account-primary-color1 account-font-medium`, text: 'alreadyHaveAnAccount' }),
31
31
  React.createElement("div", { className: 'login-wrap' },
32
- React.createElement(Link, { href: '/sign-in' },
32
+ React.createElement(Link, { href: signInUrl },
33
33
  React.createElement(Text, { className: `account-p account-p3 account-primary-color1 account-font-bold underline joinNowLink`, text: 'login' })))))))));
34
34
  };
35
35
  export default SignUpTemplate;
package/dist/templates/ThankYouTemplate/icons.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export const confirmImage: React.JSX.Element;
2
+ import React from 'react';
package/dist/templates/ThankYouTemplate/icons.js ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
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' },
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' }))));
package/dist/templates/ThankYouTemplate/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  export default ThankYouTemplate;
2
- declare function ThankYouTemplate(): React.JSX.Element;
2
+ declare function ThankYouTemplate({ orderNumber }: {
3
+ orderNumber: any;
4
+ }): React.JSX.Element;
3
5
  import React from 'react';
package/dist/templates/ThankYouTemplate/index.js CHANGED
@@ -5,10 +5,8 @@ import { Sequence } from '../../components';
5
5
  import Button from '../../components/ui/AccountButton';
6
6
  import ThankYouMessageStyle from './style';
7
7
  import { useAccountContext } from '../../AccountProvider';
8
- 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' },
9
- React.createElement("g", { transform: 'translate(0.000000,194.000000) scale(0.100000,-0.100000)', fill: '#000000', stroke: 'none' },
10
- 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' }))));
11
- const ThankYouTemplate = () => {
8
+ import { confirmImage } from './icons';
9
+ const ThankYouTemplate = ({ orderNumber }) => {
12
10
  const { shopUrl } = useAccountContext();
13
11
  const { translate } = useTranslation();
14
12
  return (React.createElement(Page, { className: 'use-account' },
@@ -19,7 +17,7 @@ const ThankYouTemplate = () => {
19
17
  React.createElement("div", { className: 'confirmation-image' }, confirmImage),
20
18
  React.createElement(Text, { tag: `h6`, className: `account-h6 account-font-bold account-primary-color1 title`, text: `confirmMessageTitle` }),
21
19
  React.createElement(Text, { tag: `p`, className: `account-p account-p2 account-font-regular account-primary-color1 description`, text: `confirmMessageDesc` }),
22
- React.createElement(Text, { tag: `p`, className: `account-p account-p2 account-font-regular account-primary-color1 order-number` }, translate('orderNumber') + ':' + ' ' + '#1235'),
20
+ React.createElement(Text, { tag: `p`, className: `account-p account-p2 account-font-regular account-primary-color1 order-number` }, translate('orderNumber') + ':' + ' ' + orderNumber),
23
21
  React.createElement(Button, { text: `continueShopping`, btnType: `purple-text`, url: shopUrl }))))));
24
22
  };
25
23
  export default ThankYouTemplate;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weareconceptstudio/account",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "Concept Studio Account",
5
5
  "author": "Concept Studio",
6
6
  "license": "ISC",