@weareconceptstudio/account 0.3.1 → 0.3.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 (42) hide show
  1. package/dist/AccountProvider.js +8 -6
  2. package/dist/components/TotalCheckout/AddNewCard/index.js +11 -3
  3. package/dist/components/TotalCheckout/AddNewCard/style.js +13 -6
  4. package/dist/components/TotalCheckout/CardComp/index.d.ts +1 -2
  5. package/dist/components/TotalCheckout/CardComp/index.js +18 -14
  6. package/dist/components/TotalCheckout/CardComp/style.js +8 -8
  7. package/dist/components/TotalCheckout/CommentComp/index.js +1 -1
  8. package/dist/components/TotalCheckout/MuramoneyComp/index.js +5 -2
  9. package/dist/components/TotalCheckout/PaymentComp/index.d.ts +1 -3
  10. package/dist/components/TotalCheckout/PaymentComp/index.js +4 -2
  11. package/dist/components/TotalCheckout/PaymentMethodsComp/icons.d.ts +10 -0
  12. package/dist/components/TotalCheckout/PaymentMethodsComp/icons.js +56 -0
  13. package/dist/components/TotalCheckout/PaymentMethodsComp/index.d.ts +3 -3
  14. package/dist/components/TotalCheckout/PaymentMethodsComp/index.js +25 -19
  15. package/dist/components/TotalCheckout/PaymentMethodsComp/style.js +7 -7
  16. package/dist/components/TotalCheckout/PromoCodeComp/index.js +2 -1
  17. package/dist/components/TotalCheckout/SelectPaymentMethodPopup/index.d.ts +1 -1
  18. package/dist/components/TotalCheckout/SelectPaymentMethodPopup/index.js +10 -40
  19. package/dist/components/TotalCheckout/SelectPaymentMethodPopup/style.js +18 -24
  20. package/dist/components/TotalCheckout/index.js +10 -13
  21. package/dist/components/TotalCheckout/style.js +40 -0
  22. package/dist/modules/address/AddressItem/index.js +4 -8
  23. package/dist/modules/address/AddressItem/style.js +10 -0
  24. package/dist/modules/address/AddressProvider.d.ts +1 -2
  25. package/dist/modules/address/AddressProvider.js +7 -7
  26. package/dist/modules/address/SelectAddress/index.js +2 -3
  27. package/dist/modules/address/SelectAddressPopup/index.js +3 -19
  28. package/dist/modules/cart/CartTemplate/index.d.ts +2 -1
  29. package/dist/modules/cart/CartTemplate/index.js +3 -2
  30. package/dist/modules/cart/EmptyCart/icons.js +1 -1
  31. package/dist/modules/checkout/CheckoutProvider.d.ts +5 -0
  32. package/dist/modules/checkout/CheckoutProvider.js +65 -0
  33. package/dist/modules/checkout/CheckoutTemplate/StepReview/index.js +3 -16
  34. package/dist/modules/checkout/CheckoutTemplate/index.js +6 -26
  35. package/dist/modules/checkout/ThankYouTemplate/icons.js +1 -1
  36. package/dist/modules/checkout/index.d.ts +1 -0
  37. package/dist/modules/checkout/index.js +1 -0
  38. package/dist/modules/order/OrderDetails/index.js +1 -1
  39. package/dist/modules/payment/PaymentMethodsTemplate/index.d.ts +1 -1
  40. package/dist/modules/payment/PaymentMethodsTemplate/index.js +21 -30
  41. package/dist/modules/payment/PaymentMethodsTemplate/style.js +42 -6
  42. package/package.json +1 -1
package/dist/AccountProvider.js CHANGED
@@ -2,6 +2,7 @@ import React, { createContext, useCallback, useContext, useEffect } from 'react'
2
2
  import { useTranslation, useUi } from '@weareconceptstudio/core';
3
3
  import { ThemeProvider } from 'styled-components';
4
4
  import { AddressProvider } from './modules/address/AddressProvider';
5
+ import { CheckoutProvider } from './modules/checkout/CheckoutProvider';
5
6
  //* Translations
6
7
  import translations from './translations';
7
8
  //* Styles
@@ -29,10 +30,11 @@ export const AccountProvider = ({ fontFamily = 'core_Font', shopUrl = '/', child
29
30
  }
30
31
  }, [productUrlPrefix, productPopup]);
31
32
  return (React.createElement(AccountContext.Provider, { value: { currency, maxQty, shopUrl, useUser, useCart, handleProductClick } },
32
- React.createElement(AddressProvider, { useUser: useUser, useCart: useCart, addressType: addressType, addressFormFields: addressFormFields },
33
- React.createElement(ThemeProvider, { theme: theme },
34
- React.createElement(AccountVariables, { fontFamily: fontFamily }),
35
- React.createElement(AccountHelperClass, null),
36
- React.createElement(AccountTypography, null),
37
- children))));
33
+ React.createElement(CheckoutProvider, null,
34
+ React.createElement(AddressProvider, { useUser: useUser, useCart: useCart, addressType: addressType, addressFormFields: addressFormFields },
35
+ React.createElement(ThemeProvider, { theme: theme },
36
+ React.createElement(AccountVariables, { fontFamily: fontFamily }),
37
+ React.createElement(AccountHelperClass, null),
38
+ React.createElement(AccountTypography, null),
39
+ children)))));
38
40
  };
package/dist/components/TotalCheckout/AddNewCard/index.js CHANGED
@@ -1,11 +1,19 @@
1
1
  import React from 'react';
2
- import { Text, Image } from '@weareconceptstudio/core';
2
+ import { Text, api } from '@weareconceptstudio/core';
3
+ import { popupCardSVG } from '../PaymentMethodsComp/icons';
3
4
  //* Style
4
5
  import AddNewCardStyle from './style';
5
6
  const AddNewCard = ({ title, className }) => {
6
- return (React.createElement(AddNewCardStyle, { className: `new-card-container ${className || ''}` },
7
+ const addNew = async () => {
8
+ return await api.post('add-card').then((res) => {
9
+ if (res.redirect_url) {
10
+ window.location.href = res.redirect_url;
11
+ }
12
+ });
13
+ };
14
+ return (React.createElement(AddNewCardStyle, { className: `new-card-container ${className || ''}`, onClick: addNew },
7
15
  React.createElement("div", { className: `new-card-wrap` },
8
- React.createElement(Image, { src: '/images/card.svg', alt: 'card', className: 'ard-svg' }),
16
+ React.createElement("div", { className: 'account-card-add-icon' }, popupCardSVG),
9
17
  React.createElement(Text, { className: `account-add-card-text account-p account-p3 account-font-medium account-primary-color1`, text: title }))));
10
18
  };
11
19
  export default AddNewCard;
package/dist/components/TotalCheckout/AddNewCard/style.js CHANGED
@@ -2,7 +2,7 @@ import styled from 'styled-components';
2
2
  const AddNewCardStyle = styled.div `
3
3
  --account_addCardTextMTop: var(--sp2x);
4
4
  --account_itemBorderRadius: var(--sp1-5x);
5
- --account_itemDistance: var(--sp3x);
5
+ --account_itemDistance: var(--sp5x);
6
6
  --account_addCardHeight: var(--sp46x);
7
7
 
8
8
  background-color: var(--neutral15);
@@ -39,21 +39,27 @@ const AddNewCardStyle = styled.div `
39
39
  padding-top: unset !important;
40
40
  }
41
41
 
42
+ .account-card-add-icon {
43
+ svg {
44
+ fill: var(--account_primaryColor1);
45
+ }
46
+ }
47
+
42
48
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
43
49
  --account_addCardTextMTop: var(--sp1-5x);
44
- --account_itemDistance: var(--sp3x);
50
+ --account_itemDistance: var(--sp5x);
45
51
  --account_addCardHeight: var(--sp35x);
46
52
  }
47
53
 
48
54
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
49
55
  --account_addCardTextMTop: var(--sp1-5x);
50
- --account_itemDistance: var(--sp2x);
56
+ --account_itemDistance: var(--sp4x);
51
57
  --account_addCardHeight: var(--sp27x);
52
58
  }
53
59
 
54
60
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
55
61
  --account_addCardTextMTop: var(--sp1-5x);
56
- --account_itemDistance: var(--sp2x);
62
+ --account_itemDistance: var(--sp3x);
57
63
  --account_addCardHeight: var(--sp27x);
58
64
  }
59
65
 
@@ -65,7 +71,7 @@ const AddNewCardStyle = styled.div `
65
71
 
66
72
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
67
73
  --account_addCardTextMTop: var(--sp1x);
68
- --account_itemDistance: var(--sp2x);
74
+ --account_itemDistance: var(--sp3x);
69
75
  --account_addCardHeight: var(--sp24x);
70
76
  }
71
77
 
@@ -73,11 +79,12 @@ const AddNewCardStyle = styled.div `
73
79
  --account_itemBorderRadius: var(--sp1x);
74
80
  --account_addCardTextMTop: var(--sp1x);
75
81
  --account_addCardHeight: var(--sp19x);
82
+ --account_itemDistance: var(--sp2x);
76
83
  }
77
84
 
78
85
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
79
86
  --account_addCardTextMTop: var(--sp1x);
80
- --account_itemDistance: var(--sp2x);
87
+ --account_itemDistance: var(--sp1x);
81
88
  --account_addCardHeight: var(--sp21x);
82
89
  width: 100%;
83
90
 
package/dist/components/TotalCheckout/CardComp/index.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  export default CardComp;
2
- declare function CardComp({ cardOption, className, selectedPayment, onSelect, onDelete }: {
2
+ declare function CardComp({ cardOption, className, selectedPayment, onSelect }: {
3
3
  cardOption: any;
4
4
  className: any;
5
5
  selectedPayment: any;
6
6
  onSelect: any;
7
- onDelete: any;
8
7
  }): React.JSX.Element;
9
8
  import React from 'react';
package/dist/components/TotalCheckout/CardComp/index.js CHANGED
@@ -2,35 +2,39 @@ import React, { useCallback } from 'react';
2
2
  import { Text, Image, useUi } from '@weareconceptstudio/core';
3
3
  import WarningMessageForPopup from '../../WarningMessageForPopup';
4
4
  import AccountButton from '../../AccountButton';
5
+ import { mastercardSVG, visaSVG } from '../PaymentMethodsComp/icons';
5
6
  //* Style
6
7
  import CardCompStyle from './style';
7
- const isExpired = (expDate) => {
8
- const [month, year] = expDate.split('/').map(Number);
9
- const expDateObject = new Date(`20${year}`, month, 0);
10
- return expDateObject < new Date();
11
- };
12
- const CardComp = ({ cardOption, className, selectedPayment, onSelect, onDelete }) => {
13
- const expired = isExpired(cardOption.expDate);
8
+ const CardComp = ({ cardOption, className, selectedPayment, onSelect }) => {
9
+ const expired = cardOption.expired;
14
10
  const { openPopup } = useUi();
11
+ const formatCardNumber = (number) => {
12
+ if (!number)
13
+ return '';
14
+ return number.replace(/(.{4})/g, '$1 ').trim();
15
+ };
16
+ const handleDelete = () => {
17
+ console.log('test', cardOption.id);
18
+ };
15
19
  //! Handle Popups
16
20
  const handleDeletePopup = useCallback(() => {
17
- openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteCardMessage', description: 'confirmDeleteCard', onRemove: () => onDelete(cardOption.id) }), {
21
+ openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteCardMessage', description: 'confirmDeleteCard', onRemove: handleDelete }), {
18
22
  className: 'messagePopup',
19
23
  accountIcon: true,
20
24
  });
21
- }, [onDelete, cardOption.id]);
22
- return (React.createElement(CardCompStyle, { className: `card-container ${expired ? 'expired' : ''} ${className || ''}` },
25
+ }, [cardOption.id]);
26
+ return (React.createElement(CardCompStyle, { className: `card-container ${cardOption.expired ? 'expired' : ''} ${className || ''}` },
23
27
  React.createElement("div", { className: `card-wrap-top` },
24
- React.createElement("div", { className: 'card-svg' }, cardOption && cardOption.type === 'MasterCard' ? (React.createElement(Image, { src: '/images/payment/mastercard.svg', alt: 'mastercard', className: 'mastercard-svg' })) : (React.createElement(Image, { src: '/images/payment/visa.svg', alt: 'visa', className: 'visa-svg' }))),
28
+ React.createElement("div", { className: 'card-svg' }, cardOption && cardOption.card_type === 'MasterCard' ? React.createElement("div", null, mastercardSVG) : React.createElement("div", null, visaSVG)),
25
29
  !expired ? (React.createElement("div", { key: cardOption.number, className: `circle-selected-wrap cursor-pointer ${selectedPayment === cardOption.number ? 'active' : ''}`, onClick: () => onSelect(cardOption.number) },
26
30
  React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedPayment === cardOption.number ? 'selected' : 'note-selected'}` },
27
31
  React.createElement("path", { d: 'M13.345 30.462c-1.062 0-1.859-0.531-2.39-1.328l-9.56-16.996c-0.797-1.328-0.266-2.921 1.062-3.718 1.328-0.531 2.921 0 3.718 1.328l7.436 13.012 12.481-20.183c0.797-1.328 2.39-1.593 3.718-0.797s1.593 2.39 0.797 3.718l-14.871 23.635c-0.531 0.797-1.328 1.328-2.39 1.328z' })))) : null),
28
32
  React.createElement("div", { className: `card-wrap-center` },
29
- React.createElement(Text, { className: `card-full-name account-p account-p3 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: cardOption.fullName }),
33
+ React.createElement(Text, { className: `card-full-name account-p account-p3 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: cardOption.name }),
30
34
  React.createElement(Text, { className: `card-number
31
- account-p account-p1 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: cardOption.number })),
35
+ account-p account-p1 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: formatCardNumber(cardOption.number) })),
32
36
  React.createElement("div", { className: `card-wrap-bottom` },
33
- React.createElement(Text, { className: `account-p account-p3 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: expired ? 'cardExpired' : `Exp. Date ${cardOption.expDate}` }),
37
+ React.createElement(Text, { className: `account-p account-p3 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}`, text: expired ? 'cardExpired' : `Exp. Date ${cardOption.exp_date}` }),
34
38
  React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: `account-card-remove-btn account-p account-p3 account-font-regular ${expired ? 'account-primary-color3' : 'account_backgroundColor'}` }))));
35
39
  };
36
40
  export default CardComp;
package/dist/components/TotalCheckout/CardComp/style.js CHANGED
@@ -3,7 +3,7 @@ const CardCompStyle = styled.div `
3
3
  --account_addCardTextMTop: var(--sp2x);
4
4
  --account_itemBorderRadius: var(--sp1-5x);
5
5
  --account_itemInternalWrapPad: var(--sp4x);
6
- --account_itemDistance: var(--sp3x);
6
+ --account_itemDistance: var(--sp5x);
7
7
  --account_addCardHeight: var(--sp46x);
8
8
  --account_circleSize: var(--sp4x);
9
9
  --account_checkSize: var(--sp2x);
@@ -112,7 +112,7 @@ const CardCompStyle = styled.div `
112
112
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
113
113
  --account_addCardTextMTop: var(--sp2x);
114
114
  --account_itemInternalWrapPad: var(--sp3x);
115
- --account_ItemDistance: var(--sp3x);
115
+ --account_itemDistance: var(--sp5x);
116
116
  --account_circleSize: var(--sp3x);
117
117
  --account_checkSize: var(--sp1-5x);
118
118
  --account_addCardHeight: var(--sp35x);
@@ -121,7 +121,7 @@ const CardCompStyle = styled.div `
121
121
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
122
122
  --account_addCardTextMTop: var(--sp2x);
123
123
  --account_itemInternalWrapPad: var(--sp3x);
124
- --account_ItemDistance: var(--sp2x);
124
+ --account_itemDistance: var(--sp4x);
125
125
  --account_circleSize: var(--sp3x);
126
126
  --account_checkSize: var(--sp1-5x);
127
127
  --account_addCardHeight: var(--sp27x);
@@ -130,7 +130,7 @@ const CardCompStyle = styled.div `
130
130
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
131
131
  --account_addCardTextMTop: var(--sp1-5x);
132
132
  --account_itemInternalWrapPad: var(--sp3x);
133
- --account_ItemDistance: var(--sp2x);
133
+ --account_itemDistance: var(--sp3x);
134
134
  --account_circleSize: var(--sp3x);
135
135
  --account_checkSize: var(--sp1-5x);
136
136
  --account_addCardHeight: var(--sp27x);
@@ -140,7 +140,7 @@ const CardCompStyle = styled.div `
140
140
  --account_addCardTextMTop: var(--sp1x);
141
141
  --account_itemInternalWrapPad: var(--sp2x);
142
142
  --account_circleSize: var(--sp2-5x);
143
- --account_ItemDistance: var(--sp2x);
143
+ --account_itemDistance: var(--sp2x);
144
144
  --account_checkSize: var(--sp1x);
145
145
  --account_addCardHeight: var(--sp25x);
146
146
  }
@@ -148,7 +148,7 @@ const CardCompStyle = styled.div `
148
148
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
149
149
  --account_addCardTextMTop: var(--sp1x);
150
150
  --account_itemInternalWrapPad: var(--sp2x);
151
- --account_ItemDistance: var(--sp2x);
151
+ --account_itemDistance: var(--sp3x);
152
152
  --account_circleSize: var(--sp2-5x);
153
153
  --account_checkSize: var(--sp1x);
154
154
  --account_addCardHeight: var(--sp24x);
@@ -158,7 +158,7 @@ const CardCompStyle = styled.div `
158
158
  --account_addCardHeight: 167px;
159
159
  --account_itemBorderRadius: var(--sp1x);
160
160
  --account_itemInternalWrapPad: var(--sp2x);
161
- --account_ItemDistance: var(--sp2x);
161
+ --account_itemDistance: var(--sp2x);
162
162
  --account_circleSize: var(--sp2-5x);
163
163
  --account_checkSize: var(--sp1x);
164
164
  --account_addCardHeight: var(--sp19x);
@@ -180,7 +180,7 @@ const CardCompStyle = styled.div `
180
180
  --account_addCardHeight: 139px;
181
181
  --account_addCardTextMTop: var(--sp0-5x);
182
182
  --account_itemInternalWrapPad: var(--sp1-5x);
183
- --account_ItemDistance: var(--sp2x);
183
+ --account_itemDistance: var(--sp1x);
184
184
  --account_circleSize: var(--sp2-5x);
185
185
  --account_checkSize: var(--sp1x);
186
186
  --account_addCardHeight: var(--sp21x);
package/dist/components/TotalCheckout/CommentComp/index.js CHANGED
@@ -6,7 +6,7 @@ const CommentComp = () => {
6
6
  return (React.createElement(CommentCompStyle, { className: 'collapse-distance' },
7
7
  React.createElement(CollapseContainer, null,
8
8
  React.createElement(CollapseItem, { status: 'open', title: React.createElement(React.Fragment, null,
9
- React.createElement("div", null,
9
+ React.createElement("div", { className: 'inner-wrapper-icon' },
10
10
  React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
11
11
  React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
12
12
  React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
package/dist/components/TotalCheckout/MuramoneyComp/index.js CHANGED
@@ -15,8 +15,10 @@ const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, bala
15
15
  balanceHandler(values.balance);
16
16
  };
17
17
  return isMuramoney ? (React.createElement(MuramoneyCompStyle, { className: 'collapse-distance' },
18
- React.createElement(CollapseItem, { disable: disable, title: React.createElement(React.Fragment, null,
19
- React.createElement("div", null,
18
+ React.createElement(CollapseItem, { disable: disable,
19
+ // status={'open'}
20
+ title: React.createElement(React.Fragment, null,
21
+ React.createElement("div", { className: 'inner-wrapper-icon' },
20
22
  React.createElement("svg", { width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
21
23
  React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
22
24
  React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
@@ -24,6 +26,7 @@ const MuramoneyComp = ({ isMuramoney = true, currency, balance, useBalance, bala
24
26
  React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium muramoney-success-text' }, handlePriceCheckFunc(useBalance, currency)),
25
27
  React.createElement(Text, { text: 'remove', className: 'account-p account-p4 account-primary-color2 account-font-medium muramoney-remove-text', onClick: () => {
26
28
  balanceHandler(null);
29
+ setDisable(false);
27
30
  } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: balanceFields, className: `muramoney-block`, formOptions: {
28
31
  className: 'muramoney-container',
29
32
  } },
package/dist/components/TotalCheckout/PaymentComp/index.d.ts CHANGED
@@ -1,9 +1,7 @@
1
1
  export default PaymentComp;
2
- declare function PaymentComp({ title, onClick, className, fillCheckoutData, checkoutData }: {
2
+ declare function PaymentComp({ title, onClick, className }: {
3
3
  title: any;
4
4
  onClick: any;
5
5
  className: any;
6
- fillCheckoutData: any;
7
- checkoutData: any;
8
6
  }): React.JSX.Element;
9
7
  import React from 'react';
package/dist/components/TotalCheckout/PaymentComp/index.js CHANGED
@@ -4,11 +4,13 @@ import AccountButton from '../../AccountButton';
4
4
  import PaymentMethodsComp from '../PaymentMethodsComp';
5
5
  //* Style
6
6
  import PaymentCompStyle from './style';
7
- const PaymentComp = ({ title, onClick, className, fillCheckoutData, checkoutData }) => {
7
+ import { useCheckoutContext } from '../../../modules';
8
+ const PaymentComp = ({ title, onClick, className }) => {
9
+ const { checkoutData, fillCheckoutData } = useCheckoutContext();
8
10
  return (React.createElement(PaymentCompStyle, { className: `item-container ${className || ''}` },
9
11
  React.createElement("div", { className: `change-payment-wrap` },
10
12
  React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: title }),
11
13
  checkoutData.paymentType && (React.createElement(AccountButton, { text: `change`, btnType: `green-small-text`, onClick: onClick }))),
12
- React.createElement(PaymentMethodsComp, { checkoutData: checkoutData, fillCheckoutData: fillCheckoutData, showAll: false })));
14
+ React.createElement(PaymentMethodsComp, { showAll: false, selectedPayment: checkoutData.paymentType, selectPayment: (value) => fillCheckoutData('paymentType', value) })));
13
15
  };
14
16
  export default PaymentComp;
package/dist/components/TotalCheckout/PaymentMethodsComp/icons.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ export const cashSVG: React.JSX.Element;
2
+ export const cardSVG: React.JSX.Element;
3
+ export const idramSVG: React.JSX.Element;
4
+ export const inecopaySVG: React.JSX.Element;
5
+ export const mastercardSVG: React.JSX.Element;
6
+ export const posTerminalSVG: React.JSX.Element;
7
+ export const telcellSVG: React.JSX.Element;
8
+ export const visaSVG: React.JSX.Element;
9
+ export const popupCardSVG: React.JSX.Element;
10
+ import React from 'react';
package/dist/components/TotalCheckout/PaymentMethodsComp/icons.js ADDED
@@ -0,0 +1,56 @@
1
+ import React from 'react';
2
+ export const cashSVG = (React.createElement("svg", { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
3
+ React.createElement("g", { clipPath: 'url(#clip0_2753_21973)' },
4
+ React.createElement("path", { d: 'M26.0635 8H5.93651L4 9.85819V22.1418C4.75626 22.8675 5.18025 23.2743 5.93651 24H26.0635L28 22.1418V9.85819C27.2437 9.13252 26.8197 8.72567 26.0635 8ZM25.9132 17.3286C23.9231 19.2381 22.8071 20.309 20.8171 22.2186H11.1829L6.08685 17.3286V14.6709C8.07687 12.7614 9.19291 11.6905 11.1829 9.78093H20.8171C22.8071 11.6905 23.9231 12.7614 25.9132 14.6709V17.3286Z', fill: 'black' }),
5
+ React.createElement("path", { d: 'M16 19C17.6569 19 19 17.6569 19 16C19 14.3431 17.6569 13 16 13C14.3431 13 13 14.3431 13 16C13 17.6569 14.3431 19 16 19Z', fill: 'black' })),
6
+ React.createElement("defs", null,
7
+ React.createElement("clipPath", { id: 'clip0_2753_21973' },
8
+ React.createElement("rect", { width: '24', height: '16', fill: 'white', transform: 'translate(4 8)' })))));
9
+ export const cardSVG = (React.createElement("svg", { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
10
+ React.createElement("g", { clipPath: 'url(#clip0_2753_15120)' },
11
+ React.createElement("path", { d: 'M28 11.7188V9.92578C27.2747 9.19531 26.8791 8.79688 26.0879 8H5.84615C5.12088 8.73047 4.72527 9.12891 4 9.92578C4 10.457 4 11.0547 4 11.7852H28V11.7188Z', fill: 'black' }),
12
+ React.createElement("path", { d: 'M4 14.3086C4 16.3672 4 20.5508 4 20.5508V21.2031V23.0742L5.91222 25H26.022C26.7473 24.2695 27.1429 23.8711 27.9341 23.0742V14.3086H4Z', fill: 'black' })),
13
+ React.createElement("defs", null,
14
+ React.createElement("clipPath", { id: 'clip0_2753_15120' },
15
+ React.createElement("rect", { width: '32', height: '32', fill: 'white' })))));
16
+ export const idramSVG = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none' },
17
+ React.createElement("path", { d: 'M8.53008 5.2137C5.93283 6.60292 4.30201 9.20017 4.0604 12.0994V14.4551C4.1812 14.8175 4.54361 15.1195 4.96642 15.1195C5.44963 15.1195 5.87243 14.6967 5.87243 14.2135V13.0054C5.87243 10.4082 7.20126 8.05255 9.4965 6.78413C11.7313 5.4553 14.5098 5.4553 16.6842 6.78413L17.7714 7.38814C18.1942 7.62974 18.7379 7.50894 18.9795 7.08613C19.2211 6.66332 19.1003 6.11971 18.6775 5.87811L17.5902 5.2741C16.201 4.42848 14.6306 4.00568 13.0602 4.00568C11.4897 3.94528 9.9193 4.36808 8.53008 5.2137ZM20.3687 7.99215C20.1271 8.41495 20.3083 8.95856 20.7311 9.20017L21.7579 9.80418C23.9928 11.0726 25.382 13.4282 25.382 16.0255C25.4424 18.6227 24.0532 20.9784 21.7579 22.2468L16.5634 25.2668C14.3286 26.5957 11.5501 26.5957 9.31529 25.2668C7.08045 23.9984 5.69123 21.6428 5.75163 19.0455V17.8375C5.75163 17.3543 5.32882 16.9315 4.84561 16.9315C4.42281 16.9315 4.0604 17.2335 4 17.5959V19.8912C4.2416 22.7904 5.87243 25.3877 8.46968 26.7769C11.2481 28.4077 14.691 28.4077 17.4694 26.7769L22.7243 23.7568C25.5632 22.1864 27.3148 19.2267 27.2544 15.9651C27.3148 12.7638 25.5632 9.74378 22.7243 8.17335L21.6975 7.56934L21.6371 7.50894C21.4559 7.50894 21.3351 7.50894 21.1539 7.50894C20.8519 7.50894 20.5499 7.69014 20.3687 7.99215ZM10.3421 8.35455C8.65088 9.32097 7.62406 11.0726 7.62406 13.0054V19.0455C7.56366 20.9784 8.65088 22.7904 10.3421 23.6964C11.9729 24.6628 14.087 24.6628 15.7178 23.6964L16.805 23.0924C17.2278 22.8508 17.3486 22.3072 17.107 21.8844C16.8654 21.4616 16.3218 21.2804 15.899 21.522L14.8722 22.126C13.7246 22.7904 12.3957 22.7904 11.2481 22.126C10.1005 21.522 9.4361 20.314 9.4361 18.9851V12.945C9.4361 11.6766 10.1005 10.4686 11.2481 9.80418C12.3353 9.13977 13.7246 9.13977 14.8722 9.80418L20.0667 12.8242C21.2143 13.4282 21.8787 14.6363 21.8787 15.9651C21.8787 17.2335 21.2143 18.4415 20.0667 19.1059L18.9795 19.71C18.5567 19.9516 18.4359 20.5556 18.7379 20.918C18.9795 21.2804 19.4627 21.4616 19.8855 21.22L20.9123 20.616C22.6035 19.6496 23.6303 17.8979 23.6303 15.9651C23.6907 14.0323 22.6035 12.2202 20.9123 11.3142L15.7178 8.29415C14.8722 7.81094 13.9662 7.56934 12.9998 7.56934C12.0937 7.62974 11.1877 7.87135 10.3421 8.35455ZM11.4293 12.1598C11.2481 12.4014 11.1877 12.7034 11.1877 13.0054V14.2135C11.2481 14.6967 11.6709 15.0591 12.1541 14.9987C12.577 14.9383 12.9394 14.6363 12.9394 14.2135V13.3678C12.9394 13.3074 12.9998 13.247 13.0602 13.1866C13.1206 13.1866 13.181 13.1866 13.3018 13.1866L15.597 14.5155L17.8922 15.8443C17.9526 15.8443 18.013 15.9651 18.013 16.0255C18.013 16.0859 17.9526 16.2067 17.8922 16.2067L15.597 17.5355L13.3018 18.8643C13.2414 18.9247 13.1206 18.9247 13.0602 18.8643C12.9998 18.8643 12.9394 18.7435 12.9394 18.6831V17.8375C12.879 17.3543 12.4561 16.9919 11.9729 17.0523C11.5501 17.1127 11.1877 17.4147 11.1877 17.8375V19.0455C11.1877 19.71 11.5501 20.2536 12.0937 20.5556C12.6374 20.8576 13.3018 20.8576 13.9058 20.5556L19.1003 17.5355C19.6439 17.2335 20.0063 16.6295 20.0063 16.0255C20.0063 15.3611 19.6439 14.8175 19.1003 14.5155L13.9058 11.4954C13.6038 11.3142 13.3018 11.2538 12.9998 11.2538C12.3957 11.2538 11.7917 11.5558 11.4293 12.1598Z', fill: 'black' })));
18
+ export const inecopaySVG = (React.createElement("svg", { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
19
+ React.createElement("g", { clipPath: 'url(#clip0_2753_22009)' },
20
+ React.createElement("path", { d: 'M4 14.8073H5.3275V9.11902H4V14.8073Z', fill: 'black' }),
21
+ React.createElement("path", { d: 'M10.2203 12.6344C10.1608 12.5406 10.1256 12.4883 10.0933 12.4347C9.45109 11.3795 8.07812 9.119 8.07812 9.119C8.07812 9.119 6.52516 9.11766 6.49609 9.119C6.49609 11.0194 6.49609 12.9149 6.49609 14.8055H7.73406V11.0695C7.79078 11.1079 9.17031 13.3585 9.81953 14.4477L10.0337 14.8073H11.4611V9.13821H10.2203V12.6344Z', fill: 'black' }),
22
+ React.createElement("path", { d: 'M23.3438 9.56759C22.5038 10.1845 22.1695 11.0311 22.1784 12.0161C22.1784 12.1207 22.1719 12.2261 22.1794 12.3302C22.2792 13.7173 23.3123 14.9253 25.0181 14.9132C26.3311 14.9038 27.3586 14.2601 27.7678 13.1491C27.9966 12.5286 28.028 11.8902 27.9089 11.2442C27.54 9.24058 25.043 8.31986 23.3438 9.56759ZM26.2561 13.1835C25.7067 14.1118 24.4463 14.1426 23.8997 13.2134C23.4173 12.3932 23.4248 11.527 23.9175 10.7126C24.4538 9.8258 25.6533 9.84188 26.2177 10.713C26.468 11.0999 26.5463 11.5283 26.5495 11.9867C26.543 12.3977 26.4783 12.8078 26.2561 13.1835Z', fill: 'black' }),
23
+ React.createElement("path", { d: 'M13.9769 12.4191H16.1866V11.3608H13.9764V10.1863H16.3267V9.13159H12.6367V14.8074H16.4448V13.749H13.9764V12.4191H13.9769Z', fill: 'black' }),
24
+ React.createElement("path", { d: 'M19.8259 10.1787C20.0945 10.1166 20.3846 10.0974 20.6603 10.1171C20.9786 10.1399 21.2921 10.227 21.6193 10.2886C21.7037 9.97414 21.7932 9.64132 21.8865 9.29242C21.7782 9.2531 21.6793 9.20888 21.5753 9.18029C20.95 9.00919 20.3125 8.98551 19.6754 9.09049C18.6432 9.26025 17.8618 9.77176 17.3982 10.6777C17.1282 11.2049 17.0818 11.7718 17.1146 12.3485C17.1803 13.506 17.9532 14.45 19.1064 14.7681C19.7589 14.9481 20.4245 14.9499 21.0896 14.8489C21.3353 14.8118 21.5743 14.7337 21.8218 14.6725C21.7454 14.3052 21.677 13.9755 21.6071 13.6374C21.1778 13.7893 20.754 13.8433 20.3204 13.829C19.435 13.7995 18.7717 13.3318 18.5931 12.5594C18.5214 12.2489 18.5167 11.9139 18.5467 11.5953C18.6123 10.8931 19.1125 10.3431 19.8259 10.1783V10.1787Z', fill: 'black' }),
25
+ React.createElement("path", { d: 'M11.287 17.5423L11.0573 17H10.3059L10.0519 17.5834C9.26297 19.2775 8.46984 20.9701 7.67859 22.6628C7.62984 22.7669 7.59047 22.875 7.54688 22.9813H9.10312C9.20484 22.7615 9.46875 22.1964 9.46875 22.1964H11.9161C11.9161 22.1964 12.158 22.7204 12.2817 22.9813H13.838C13.8202 22.9326 13.8066 22.8822 13.7841 22.8353C12.952 21.0707 12.1195 19.306 11.2866 17.5419L11.287 17.5423ZM9.81984 21.0304C10.1044 20.4224 10.3777 19.8386 10.6505 19.2551C10.6669 19.2198 10.7198 19.2198 10.7362 19.2551C11.0053 19.8386 11.2748 20.422 11.5561 21.0304H9.81984Z', fill: 'black' }),
26
+ React.createElement("path", { d: 'M8.3261 19.4361C8.4775 18.1289 7.41344 17.0107 6.09953 17.0107C5.45406 17.0107 4.05813 17.0107 4.00891 17.0107V18.7606C4.55359 18.6605 5.07156 18.7074 5.57828 18.9527C5.57828 18.8106 5.57313 18.539 5.57453 18.3786C5.57453 18.3233 5.64016 18.2906 5.68844 18.3224C5.95844 18.4997 6.65547 18.984 6.99344 19.2301C7.11016 19.315 7.10922 19.3869 6.99719 19.4687C6.65641 19.7162 5.9725 20.1933 5.69688 20.3742C5.64859 20.4059 5.58297 20.3729 5.58297 20.317V19.6098C5.52391 19.6134 5.48453 19.6143 5.44891 19.6183C4.79078 19.6894 4.36656 20.116 4.02109 20.6159C4.00188 20.6436 4 20.6851 4 20.7204C4.00047 21.4741 4.00281 22.2282 4.00469 22.9818H5.59422V21.4013C5.75031 21.4013 5.88156 21.4062 6.01281 21.3999C6.18297 21.3919 6.35641 21.3914 6.52281 21.3597C7.50438 21.1725 8.21078 20.4359 8.32703 19.4365L8.3261 19.4361Z', fill: 'black' }),
27
+ React.createElement("path", { d: 'M16.4536 17.0103C16.4536 17.0103 15.7917 18.1365 15.5344 18.5703C15.4538 18.7065 15.3731 18.8423 15.2845 18.992C15.2475 18.9326 15.2189 18.8897 15.1931 18.8454C14.947 18.4282 14.1169 17.0103 14.1169 17.0103H12.2695C12.3094 17.0826 12.3352 17.1331 12.3638 17.1818C13.0481 18.3406 13.7339 19.4986 14.4141 20.6596C14.4619 20.7414 14.4891 20.8455 14.4905 20.9393C14.4984 21.6197 14.4975 22.3005 14.4994 22.9809H16.0889C16.087 22.3054 16.0814 21.6299 16.0875 20.9549C16.0884 20.8464 16.1194 20.7262 16.1752 20.6315C16.8464 19.4838 18.2606 17.0858 18.2981 17.0174C18.2386 17.0143 16.4541 17.0103 16.4541 17.0103H16.4536Z', fill: 'black' })),
28
+ React.createElement("defs", null,
29
+ React.createElement("clipPath", { id: 'clip0_2753_22009' },
30
+ React.createElement("rect", { width: '24', height: '14', fill: 'white', transform: 'translate(4 9)' })))));
31
+ export const mastercardSVG = (React.createElement("svg", { width: '32', height: '20', viewBox: '0 0 32 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
32
+ React.createElement("path", { d: 'M20.316 2.13867H11.6562V17.8604H20.316V2.13867Z', fill: '#FF5E00' }),
33
+ React.createElement("path", { d: 'M12.2338 10C12.2338 6.80583 13.7198 3.97087 16 2.13916C14.3219 0.805825 12.205 0 9.89592 0C4.42594 0 0 4.47249 0 10C0 15.5275 4.42594 20 9.89592 20C12.205 20 14.3219 19.1942 16 17.8608C13.7166 16.055 12.2338 13.1942 12.2338 10Z', fill: '#ED0006' }),
34
+ React.createElement("path", { d: 'M32 10C32 15.5275 27.5741 20 22.1041 20C19.795 20 17.6781 19.1942 16 17.8608C18.309 16.0259 19.7662 13.1942 19.7662 10C19.7662 6.80583 18.2802 3.97087 16 2.13916C17.6749 0.805825 19.7918 0 22.1009 0C27.5741 0 32 4.50162 32 10Z', fill: '#F99F00' })));
35
+ export const posTerminalSVG = (React.createElement("svg", { width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
36
+ React.createElement("g", { clipPath: 'url(#clip0_2753_21987)' },
37
+ React.createElement("path", { d: 'M18.4557 7.38635H9.89844V11.3196H18.4557V7.38635Z', fill: 'black' }),
38
+ React.createElement("path", { d: 'M19.841 4H8.51026C7.92033 4.58993 7.58993 4.92033 7 5.51026V20.6488C7.58993 21.2387 7.92033 21.5691 8.51026 22.1591H19.841C20.4309 21.5691 20.7613 21.2387 21.3513 20.6488V5.51026C20.7613 4.92033 20.4309 4.58993 19.841 4ZM11.7892 19.3703L11.3699 19.7895H9.37007L8.95079 19.3703V17.3704L9.37007 16.9511H11.3699C11.5335 17.1147 11.6256 17.2068 11.7892 17.3704V19.3703ZM11.7892 15.5717C11.6256 15.7353 11.5335 15.8274 11.3699 15.991H9.37007L8.95079 15.5717V13.5719L9.37007 13.1526H11.3699C11.5335 13.3162 11.6256 13.4083 11.7892 13.5719V15.5717ZM15.5948 19.3703L15.1756 19.7895H13.1757C13.0121 19.626 12.92 19.5338 12.7564 19.3703V17.3704L13.1757 16.9511H15.1756C15.3391 17.1147 15.4313 17.2068 15.5948 17.3704V19.3703ZM15.5948 15.5717C15.4313 15.7353 15.3391 15.8274 15.1756 15.991H13.1757L12.7564 15.5717V13.5719L13.1757 13.1526H15.1756C15.3391 13.3162 15.4313 13.4083 15.5948 13.5719V15.5717ZM19.4005 19.3703C19.2369 19.5338 19.1448 19.626 18.9812 19.7895H16.9813C16.8178 19.626 16.7256 19.5338 16.5621 19.3703V17.3704L16.9813 16.9511H18.9812L19.4005 17.3704V19.3703ZM19.4005 15.5717L18.9812 15.991H16.9813L16.5621 15.5717V13.5719L16.9813 13.1526H18.9812L19.4005 13.5719V15.5717ZM19.4468 11.8299C19.2832 11.9935 19.1911 12.0856 19.0275 12.2492H9.32372C9.16016 12.0856 9.06802 11.9935 8.90445 11.8299V6.87658C9.06802 6.71301 9.16016 6.62087 9.32372 6.4573H19.0281C19.1916 6.62087 19.2838 6.71301 19.4474 6.87658V11.8299H19.4468Z', fill: 'black' }),
39
+ React.createElement("path", { d: 'M9.43359 22.9955V28.0001L11.3942 26.7957L12.8412 27.9352L14.2675 26.7957L15.7271 28.0001L17.1403 26.7957L18.9193 28.0001V22.9955H9.43359Z', fill: 'black' }),
40
+ React.createElement("path", { d: 'M24.1403 15.6503H22.1562V7.11597H24.1403L24.8436 7.8193V14.9469L24.1403 15.6503Z', fill: 'black' }),
41
+ React.createElement("path", { d: 'M10.9544 14.0173H9.79688V15.1748H10.9544V14.0173Z', fill: 'black' }),
42
+ React.createElement("path", { d: 'M10.9544 17.7919H9.79688V18.9494H10.9544V17.7919Z', fill: 'black' }),
43
+ React.createElement("path", { d: 'M14.7552 17.7919H13.5977V18.9494H14.7552V17.7919Z', fill: 'black' }),
44
+ React.createElement("path", { d: 'M18.5598 17.7919H17.4023V18.9494H18.5598V17.7919Z', fill: 'black' }),
45
+ React.createElement("path", { d: 'M18.5598 14.0173H17.4023V15.1748H18.5598V14.0173Z', fill: 'black' }),
46
+ React.createElement("path", { d: 'M14.7591 14.0173H13.6016V15.1748H14.7591V14.0173Z', fill: 'black' })),
47
+ React.createElement("defs", null,
48
+ React.createElement("clipPath", { id: 'clip0_2753_21987' },
49
+ React.createElement("rect", { width: '17.8439', height: '24', fill: 'white', transform: 'translate(7 4)' })))));
50
+ export const telcellSVG = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '32', height: '32', viewBox: '0 0 32 32', fill: 'none' },
51
+ React.createElement("path", { d: 'M17.5186 8V25H13.1485V12.3375H8V8H17.5186ZM18.8835 12.3412H23.2536V8.00372H18.8835V12.3412Z', fill: 'black' })));
52
+ export const visaSVG = (React.createElement("svg", { width: '33', height: '10', viewBox: '0 0 33 10', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
53
+ React.createElement("path", { d: 'M23.4262 0.778989C22.6825 0.524905 21.8964 0.397404 21.1049 0.40249C18.5453 0.40249 16.7376 1.61149 16.7248 3.34699C16.7088 4.62199 18.0094 5.34049 18.9932 5.76649C20.0027 6.20449 20.3402 6.48049 20.337 6.87199C20.3306 7.46749 19.5308 7.73749 18.7869 7.73749C17.7646 7.73749 17.2063 7.60399 16.3472 7.26949L16.0289 7.12999L15.6657 9.12799C16.288 9.37099 17.4095 9.57949 18.5677 9.59749C21.2889 9.59749 23.0678 8.39599 23.0886 6.54949C23.111 5.53099 22.4071 4.76149 20.9257 4.12549C20.0251 3.71299 19.4668 3.43699 19.4668 3.01849C19.4668 2.64799 19.9451 2.25199 20.9449 2.25199C21.6104 2.23689 22.2717 2.35396 22.8855 2.59549L23.1254 2.69599L23.4886 0.76549L23.4262 0.778989ZM30.0684 0.56449H28.0687C27.4464 0.56449 26.9776 0.72499 26.7057 1.30399L22.8599 9.47299H25.5811L26.125 8.13349L29.4461 8.13649C29.5245 8.44999 29.7644 9.47299 29.7644 9.47299H32.1641L30.0684 0.56449ZM13.0437 0.48949H15.6369L14.0148 9.40249H11.4248L13.0437 0.48649V0.48949ZM6.46072 5.40199L6.72948 6.63949L9.2635 0.56449H12.0103L7.9293 9.46099H5.18891L2.94924 1.92799C2.91297 1.80378 2.82778 1.6971 2.71088 1.62949C1.90364 1.2385 1.04832 0.941781 0.164062 0.745989L0.199257 0.558489H4.37303C4.93935 0.579489 5.39528 0.745989 5.54726 1.31299L6.45912 5.40649L6.46072 5.40199ZM26.8689 6.31099L27.9023 3.81799C27.8895 3.84499 28.1151 3.30349 28.2463 2.96899L28.4238 3.73849L29.0237 6.30949H26.8673L26.8689 6.31099Z', fill: '#1A1F71' })));
54
+ export const popupCardSVG = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 40 40', fill: 'none' },
55
+ React.createElement("path", { d: 'M38.2008 12.6V9.9C37.1008 8.8 36.5008 8.2 35.3008 7H4.60078C3.50078 8.1 2.90078 8.7 1.80078 9.9C1.80078 10.7 1.80078 11.6 1.80078 12.7H38.2008V12.6Z' }),
56
+ React.createElement("path", { d: 'M1.80078 16.5C1.80078 19.6 1.80078 25.9 1.80078 25.9V26.8823V29.7L4.70098 32.6H35.2008C36.3008 31.5 36.9008 30.9 38.1008 29.7V16.5H1.80078Z' })));
package/dist/components/TotalCheckout/PaymentMethodsComp/index.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  export default PaymentMethodsComp;
2
- declare function PaymentMethodsComp({ className, fillCheckoutData, checkoutData, showAll }: {
2
+ declare function PaymentMethodsComp({ className, showAll, selectedPayment, selectPayment }: {
3
3
  className: any;
4
- fillCheckoutData: any;
5
- checkoutData: any;
6
4
  showAll: any;
5
+ selectedPayment: any;
6
+ selectPayment: any;
7
7
  }): React.JSX.Element;
8
8
  import React from 'react';
package/dist/components/TotalCheckout/PaymentMethodsComp/index.js CHANGED
@@ -1,44 +1,51 @@
1
1
  import React, { useState } from 'react';
2
2
  import { Text } from '@weareconceptstudio/core';
3
+ import { cardSVG, idramSVG, telcellSVG, cashSVG, posTerminalSVG, inecopaySVG } from '../PaymentMethodsComp/icons';
4
+ import { useCheckoutContext } from '../../../modules';
3
5
  //* Style
4
6
  import PaymentMethodsCompStyle from './style';
5
- const PaymentMethodsComp = ({ className, fillCheckoutData, checkoutData, showAll }) => {
6
- const paymentOptions = [
7
+ const PaymentMethodsComp = ({ className, showAll, selectedPayment, selectPayment }) => {
8
+ let paymentOptions = [
7
9
  {
8
10
  label: 'Cash',
9
11
  value: 'cash_on_delivery',
10
- svg: '/images/payment/cash.svg',
11
- },
12
- {
13
- label: 'Card',
14
- value: 'credit_card',
15
- svg: '/images/payment/card.svg',
12
+ svg: cashSVG,
16
13
  },
17
14
  {
18
15
  label: 'Idram',
19
16
  value: 'idram',
20
- svg: '/images/payment/idram.svg',
17
+ svg: idramSVG,
21
18
  },
22
19
  {
23
20
  label: 'POS TERMINAL',
24
21
  value: 'pos_terminal',
25
- svg: '/images/payment/pos-terminal.svg',
22
+ svg: posTerminalSVG,
26
23
  },
27
24
  {
28
25
  label: 'Telcell',
29
26
  value: 'telcell',
30
- svg: '/images/payment/telcell.svg',
27
+ svg: telcellSVG,
31
28
  },
32
29
  {
33
30
  label: 'Inecopay',
34
31
  value: 'inecopay',
35
- svg: '/images/payment/inecopay.svg',
32
+ svg: inecopaySVG,
36
33
  },
37
34
  ];
38
- const [selectedPayment, setSelectedPayment] = useState(checkoutData.paymentType || '');
35
+ if (!showAll) {
36
+ paymentOptions = [
37
+ {
38
+ label: 'Card',
39
+ value: 'credit_card',
40
+ svg: cardSVG,
41
+ },
42
+ ...paymentOptions,
43
+ ];
44
+ }
45
+ const { checkoutData } = useCheckoutContext();
39
46
  const cardDetails = checkoutData.paymentType === 'credit_card'
40
47
  ? {
41
- type: 'MasterCard', // Or 'Visa', based on your logic
48
+ card_type: 'MasterCard', // Or 'Visa', based on your logic
42
49
  number: '**** **** **** 1234',
43
50
  expDate: '12/24',
44
51
  }
@@ -57,18 +64,17 @@ const PaymentMethodsComp = ({ className, fillCheckoutData, checkoutData, showAll
57
64
  filteredOptions = filteredOptions.map((option) => option.value === 'credit_card'
58
65
  ? {
59
66
  ...option,
60
- label: React.createElement("span", { className: 'card-type' }, cardDetails.type),
67
+ label: React.createElement("span", { className: 'card-type' }, cardDetails.card_type),
61
68
  }
62
69
  : option);
63
70
  }
64
71
  const handleSelect = (value) => {
65
- setSelectedPayment(value);
66
- fillCheckoutData('paymentType', value);
72
+ selectPayment(value);
67
73
  };
68
- return (React.createElement(PaymentMethodsCompStyle, { className: `payment-item-container ${className || ''}`, singlePayment: !!checkoutData.paymentType }, filteredOptions.map((option) => (React.createElement("div", { className: 'custom-payment-options', key: option.value },
74
+ return (React.createElement(PaymentMethodsCompStyle, { className: `payment-item-container ${className || ''}`, "$singlePayment": !!checkoutData.paymentType }, filteredOptions.map((option, index) => (React.createElement("div", { className: 'custom-payment-options', key: index },
69
75
  React.createElement("div", { className: 'payment-option-top' },
70
76
  React.createElement("div", { className: 'payment-item-left' },
71
- React.createElement("img", { src: option.svg, alt: `${option.label} icon` }),
77
+ React.createElement("div", null, option.svg),
72
78
  React.createElement(Text, { className: 'payment-label account-p account-p3 account-font-regular account-primary-color1' }, option.label)),
73
79
  React.createElement("div", { key: option.value, className: `circle-selected-wrap cursor-pointer ${selectedPayment === option.value ? 'active' : ''}`, onClick: () => handleSelect(option.value) },
74
80
  React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedPayment === option.value ? 'selected' : 'note-selected'}` },
package/dist/components/TotalCheckout/PaymentMethodsComp/style.js CHANGED
@@ -4,7 +4,7 @@ const PaymentMethodsCompStyle = styled.div `
4
4
  --account_itemInternalPadTB: var(--sp2x);
5
5
  --account_itemInternalPadLR: var(--sp4x);
6
6
  --account_flexWrapperMTop: var(--sp2x);
7
- --account_itemDistance: var(--sp3x);
7
+ --account_itemDistance: var(--sp5x);
8
8
  --account_circleSize: var(--sp4x);
9
9
  --account_checkSize: var(--sp2x);
10
10
 
@@ -14,7 +14,7 @@ const PaymentMethodsCompStyle = styled.div `
14
14
  column-gap: var(--account_itemDistance);
15
15
 
16
16
  .custom-payment-options {
17
- width: ${(props) => (props.singlePayment ? '100%' : 'calc(50% - var(--account_itemDistance) / 2)')};
17
+ width: ${(props) => (props.$singlePayment ? '100%' : 'calc(50% - var(--account_itemDistance) / 2)')};
18
18
  border: 2px solid var(--account_primaryColor5);
19
19
  border-radius: var(--account_itemBorderRadius);
20
20
  padding: var(--account_itemInternalPadTB) var(--account_itemInternalPadLR);
@@ -94,7 +94,7 @@ const PaymentMethodsCompStyle = styled.div `
94
94
  --account_itemInternalPadTB: var(--sp2x);
95
95
  --account_itemInternalPadLR: var(--sp3x);
96
96
  --account_flexWrapperMTop: var(--sp2x);
97
- --account_itemDistance: var(--sp3x);
97
+ --account_itemDistance: var(--sp5x);
98
98
  --account_circleSize: var(--sp3x);
99
99
  --account_checkSize: var(--sp1-5x);
100
100
  }
@@ -103,7 +103,7 @@ const PaymentMethodsCompStyle = styled.div `
103
103
  --account_itemInternalPadTB: var(--sp1-5x);
104
104
  --account_itemInternalPadLR: var(--sp3x);
105
105
  --account_flexWrapperMTop: var(--sp1-5x);
106
- --account_itemDistance: var(--sp3x);
106
+ --account_itemDistance: var(--sp4x);
107
107
  --account_circleSize: var(--sp3x);
108
108
  --account_checkSize: var(--sp1-5x);
109
109
  }
@@ -112,7 +112,7 @@ const PaymentMethodsCompStyle = styled.div `
112
112
  --account_itemInternalPadTB: var(--sp1-5x);
113
113
  --account_itemInternalPadLR: var(--sp3x);
114
114
  --account_flexWrapperMTop: var(--sp1-5x);
115
- --account_itemDistance: var(--sp2x);
115
+ --account_itemDistance: var(--sp3x);
116
116
  --account_circleSize: var(--sp3x);
117
117
  --account_checkSize: var(--sp1-5x);
118
118
  }
@@ -130,7 +130,7 @@ const PaymentMethodsCompStyle = styled.div `
130
130
  --account_itemInternalPadTB: var(--sp1-5x);
131
131
  --account_itemInternalPadLR: var(--sp2x);
132
132
  --account_flexWrapperMTop: var(--sp1-5x);
133
- --account_itemDistance: var(--sp2x);
133
+ --account_itemDistance: var(--sp3x);
134
134
  --account_circleSize: var(--sp2-5x);
135
135
  --account_checkSize: var(--sp1x);
136
136
  }
@@ -150,7 +150,7 @@ const PaymentMethodsCompStyle = styled.div `
150
150
  --account_itemInternalPadTB: var(--sp1-5x);
151
151
  --account_itemInternalPadLR: var(--sp1-5x);
152
152
  --account_flexWrapperMTop: var(--sp1-5x);
153
- --account_itemDistance: var(--sp2x);
153
+ --account_itemDistance: var(--sp1x);
154
154
  --account_circleSize: var(--sp2-5x);
155
155
  --account_checkSize: var(--sp1x);
156
156
 
package/dist/components/TotalCheckout/PromoCodeComp/index.js CHANGED
@@ -16,7 +16,7 @@ const PromoCodeComp = ({ isPromoCode = true, promo_code }) => {
16
16
  };
17
17
  return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: 'collapse-distance' },
18
18
  React.createElement(CollapseItem, { disable: disable, title: React.createElement(React.Fragment, null,
19
- React.createElement("div", null,
19
+ React.createElement("div", { className: 'inner-wrapper-icon' },
20
20
  React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none' },
21
21
  React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
22
22
  React.createElement("path", { d: 'M6 12L6 0', stroke: 'black', strokeWidth: '2' }))),
@@ -24,6 +24,7 @@ const PromoCodeComp = ({ isPromoCode = true, promo_code }) => {
24
24
  React.createElement(Text, { className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-success-text' }, promo_code),
25
25
  React.createElement(Text, { text: 'remove', className: 'account-p account-p4 account-primary-color2 account-font-medium promo-code-remove-text', onClick: () => {
26
26
  setCouponCode(false);
27
+ setDisable(false);
27
28
  } }))) : (React.createElement(FormBuilder, { onSubmit: onFinish, fields: promoCodeFields, className: `promo-code-block`, formOptions: {
28
29
  className: 'promo-code-container',
29
30
  } },
package/dist/components/TotalCheckout/SelectPaymentMethodPopup/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export default SelectPaymentMethodPopup;
2
- declare const SelectPaymentMethodPopup: React.NamedExoticComponent<object>;
2
+ declare const SelectPaymentMethodPopup: React.MemoExoticComponent<() => React.JSX.Element>;
3
3
  import React from 'react';