ordering-ui-external 2.3.1 → 2.3.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.
Files changed (8) hide show
  1. package/_modules/themes/five/src/components/Checkout/index.js +1 -1
  2. package/_modules/themes/five/src/components/MultiCartsPaymethodsAndWallets/index.js +7 -5
  3. package/_modules/themes/five/src/components/MultiCheckout/index.js +13 -2
  4. package/package.json +1 -1
  5. package/src/themes/five/src/components/Checkout/index.js +2 -1
  6. package/src/themes/five/src/components/MultiCartsPaymethodsAndWallets/index.js +48 -42
  7. package/src/themes/five/src/components/MultiCheckout/index.js +12 -1
  8. package/src/themes/five/src/components/PaymentOptions/index.js +22 -23
package/_modules/themes/five/src/components/Checkout/index.js CHANGED
@@ -175,7 +175,7 @@ var CheckoutUI = function CheckoutUI(props) {
175
175
  var isWalletCreditPointsEnabled = ((_businessConfigs$find2 = businessConfigs.find(function (config) {
176
176
  return config.key === 'wallet_credit_point_enabled';
177
177
  })) === null || _businessConfigs$find2 === void 0 ? void 0 : _businessConfigs$find2.value) === '1';
178
- var isWalletEnabled = (configs === null || configs === void 0 ? void 0 : (_configs$cash_wallet = configs.cash_wallet) === null || _configs$cash_wallet === void 0 ? void 0 : _configs$cash_wallet.value) && (configs === null || configs === void 0 ? void 0 : (_configs$wallet_enabl = configs.wallet_enabled) === null || _configs$wallet_enabl === void 0 ? void 0 : _configs$wallet_enabl.value) === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled) && !useKioskApp;
178
+ var isWalletEnabled = (configs === null || configs === void 0 ? void 0 : (_configs$cash_wallet = configs.cash_wallet) === null || _configs$cash_wallet === void 0 ? void 0 : _configs$cash_wallet.value) && (configs === null || configs === void 0 ? void 0 : (_configs$wallet_enabl = configs.wallet_enabled) === null || _configs$wallet_enabl === void 0 ? void 0 : _configs$wallet_enabl.value) === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled) && !useKioskApp && !isCustomerMode;
179
179
  var isMultiDriverTips = (orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme = orderingTheme.theme) === null || _orderingTheme$theme === void 0 ? void 0 : (_orderingTheme$theme$ = _orderingTheme$theme.header) === null || _orderingTheme$theme$ === void 0 ? void 0 : (_orderingTheme$theme$2 = _orderingTheme$theme$.components) === null || _orderingTheme$theme$2 === void 0 ? void 0 : (_orderingTheme$theme$3 = _orderingTheme$theme$2.layout) === null || _orderingTheme$theme$3 === void 0 ? void 0 : (_orderingTheme$theme$4 = _orderingTheme$theme$3.type) === null || _orderingTheme$theme$4 === void 0 ? void 0 : _orderingTheme$theme$4.toLowerCase()) === 'chew';
180
180
  var placeSpotTypes = [3, 4, 5];
181
181
  var placeSpotsEnabled = placeSpotTypes.includes(options === null || options === void 0 ? void 0 : options.type) && !useKioskApp;
package/_modules/themes/five/src/components/MultiCartsPaymethodsAndWallets/index.js CHANGED
@@ -76,7 +76,8 @@ var MultiCartsPaymethodsAndWalletsUI = function MultiCartsPaymethodsAndWalletsUI
76
76
  paymethodSelected = props.paymethodSelected,
77
77
  handleSelectPaymethod = props.handleSelectPaymethod,
78
78
  handleSelectWallet = props.handleSelectWallet,
79
- handlePaymethodDataChange = props.handlePaymethodDataChange;
79
+ handlePaymethodDataChange = props.handlePaymethodDataChange,
80
+ isCustomerMode = props.isCustomerMode;
80
81
  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
81
82
  _useLanguage2 = _slicedToArray(_useLanguage, 2),
82
83
  t = _useLanguage2[1];
@@ -111,8 +112,9 @@ var MultiCartsPaymethodsAndWalletsUI = function MultiCartsPaymethodsAndWalletsUI
111
112
  }
112
113
  }));
113
114
  }) : paymethodsAndWallets.paymethods.map(function (paymethod) {
114
- return /*#__PURE__*/_react.default.createElement(_styles.PayCard, {
115
- key: paymethod.id,
115
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
116
+ key: paymethod.id
117
+ }, (!isCustomerMode || isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash')) && /*#__PURE__*/_react.default.createElement(_styles.PayCard, {
116
118
  isActive: (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.id) === paymethod.id,
117
119
  onClick: function onClick() {
118
120
  return handleSelectPaymethod(_objectSpread(_objectSpread({}, paymethod), {}, {
@@ -122,7 +124,7 @@ var MultiCartsPaymethodsAndWalletsUI = function MultiCartsPaymethodsAndWalletsUI
122
124
  paymethod_id: paymethod === null || paymethod === void 0 ? void 0 : paymethod.id
123
125
  }));
124
126
  }
125
- }, /*#__PURE__*/_react.default.createElement("div", null, getPayIcon(paymethod.id)), /*#__PURE__*/_react.default.createElement("p", null, t(paymethod === null || paymethod === void 0 ? void 0 : paymethod.gateway.toUpperCase(), paymethod === null || paymethod === void 0 ? void 0 : paymethod.name)));
127
+ }, /*#__PURE__*/_react.default.createElement("div", null, getPayIcon(paymethod.id)), /*#__PURE__*/_react.default.createElement("p", null, t(paymethod === null || paymethod === void 0 ? void 0 : paymethod.gateway.toUpperCase(), paymethod === null || paymethod === void 0 ? void 0 : paymethod.name))));
126
128
  })), (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : (_paymethodSelected$pa = paymethodSelected.paymethod) === null || _paymethodSelected$pa === void 0 ? void 0 : _paymethodSelected$pa.gateway) === 'stripe' && /*#__PURE__*/_react.default.createElement(_PaymentOptionStripe.PaymentOptionStripe, {
127
129
  paymethod: paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.paymethod,
128
130
  businessId: businessIds[0],
@@ -137,7 +139,7 @@ var MultiCartsPaymethodsAndWalletsUI = function MultiCartsPaymethodsAndWalletsUI
137
139
  }, /*#__PURE__*/_react.default.createElement("img", {
138
140
  src: (0, _utils.getIconCard)(paymethodSelected === null || paymethodSelected === void 0 ? void 0 : (_paymethodSelected$pa7 = paymethodSelected.paymethod_data) === null || _paymethodSelected$pa7 === void 0 ? void 0 : (_paymethodSelected$pa8 = _paymethodSelected$pa7.card) === null || _paymethodSelected$pa8 === void 0 ? void 0 : _paymethodSelected$pa8.brand),
139
141
  alt: ""
140
- })), /*#__PURE__*/_react.default.createElement("span", null, "XXXX-XXXX-XXXX-", paymethodSelected === null || paymethodSelected === void 0 ? void 0 : (_paymethodSelected$pa9 = paymethodSelected.paymethod_data) === null || _paymethodSelected$pa9 === void 0 ? void 0 : (_paymethodSelected$pa10 = _paymethodSelected$pa9.card) === null || _paymethodSelected$pa10 === void 0 ? void 0 : _paymethodSelected$pa10.last4))), /*#__PURE__*/_react.default.createElement(_styles.WalletPaymentOptionContainer, null, paymethodsAndWallets.loading || walletsState.loading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _toConsumableArray(Array(2).keys()).map(function (i) {
142
+ })), /*#__PURE__*/_react.default.createElement("span", null, "XXXX-XXXX-XXXX-", paymethodSelected === null || paymethodSelected === void 0 ? void 0 : (_paymethodSelected$pa9 = paymethodSelected.paymethod_data) === null || _paymethodSelected$pa9 === void 0 ? void 0 : (_paymethodSelected$pa10 = _paymethodSelected$pa9.card) === null || _paymethodSelected$pa10 === void 0 ? void 0 : _paymethodSelected$pa10.last4))), !isCustomerMode && /*#__PURE__*/_react.default.createElement(_styles.WalletPaymentOptionContainer, null, paymethodsAndWallets.loading || walletsState.loading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _toConsumableArray(Array(2).keys()).map(function (i) {
141
143
  return /*#__PURE__*/_react.default.createElement("div", {
142
144
  key: i
143
145
  }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
package/_modules/themes/five/src/components/MultiCheckout/index.js CHANGED
@@ -163,7 +163,17 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
163
163
  }
164
164
  }, [validationFields, user, customerState]);
165
165
  (0, _react.useEffect)(function () {
166
- if (openCarts.length || cartGroup.loading) return;
166
+ if (openCarts.length || cartGroup.loading) {
167
+ if (openCarts.length === 1) {
168
+ onRedirectPage && onRedirectPage({
169
+ page: 'checkout',
170
+ params: {
171
+ cartUuid: openCarts[0].uuid
172
+ }
173
+ });
174
+ }
175
+ return;
176
+ }
167
177
  onRedirectPage && onRedirectPage({
168
178
  page: 'search'
169
179
  });
@@ -201,7 +211,8 @@ var MultiCheckoutUI = function MultiCheckoutUI(props) {
201
211
  handleSelectPaymethod: handleSelectPaymethod,
202
212
  handleSelectWallet: handleSelectWallet,
203
213
  handlePaymethodDataChange: handlePaymethodDataChange,
204
- cartUuid: cartUuid
214
+ cartUuid: cartUuid,
215
+ isCustomerMode: isCustomerMode
205
216
  })), (validationFields === null || validationFields === void 0 ? void 0 : (_validationFields$fie9 = validationFields.fields) === null || _validationFields$fie9 === void 0 ? void 0 : (_validationFields$fie10 = _validationFields$fie9.checkout) === null || _validationFields$fie10 === void 0 ? void 0 : (_validationFields$fie11 = _validationFields$fie10.coupon) === null || _validationFields$fie11 === void 0 ? void 0 : _validationFields$fie11.enabled) && openCarts.every(function (cart) {
206
217
  return cart.business_id && cart.status !== 2;
207
218
  }) && (configs === null || configs === void 0 ? void 0 : (_configs$multi_busine2 = configs.multi_business_checkout_coupon_input_style) === null || _configs$multi_busine2 === void 0 ? void 0 : _configs$multi_busine2.value) === 'group' && /*#__PURE__*/_react.default.createElement(_styles.DriverTipContainer, null, /*#__PURE__*/_react.default.createElement("h1", null, t('DISCOUNT_COUPON', 'Discount coupon')), /*#__PURE__*/_react.default.createElement(_styles.CouponContainer, null, /*#__PURE__*/_react.default.createElement(_CouponControl.CouponControl, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-external",
3
- "version": "2.3.1",
3
+ "version": "2.3.3",
4
4
  "description": "Ordering UI Components",
5
5
  "main": "./_modules/index.js",
6
6
  "exports": {
package/src/themes/five/src/components/Checkout/index.js CHANGED
@@ -132,7 +132,8 @@ const CheckoutUI = (props) => {
132
132
  const isTableNumberEnabled = configs?.table_numer_enabled?.value
133
133
  const isWalletCashEnabled = businessConfigs.find(config => config.key === 'wallet_cash_enabled')?.value === '1'
134
134
  const isWalletCreditPointsEnabled = businessConfigs.find(config => config.key === 'wallet_credit_point_enabled')?.value === '1'
135
- const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled) && !useKioskApp
135
+ const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' &&
136
+ (isWalletCashEnabled || isWalletCreditPointsEnabled) && !useKioskApp && !isCustomerMode
136
137
  const isMultiDriverTips = orderingTheme?.theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
137
138
 
138
139
  const placeSpotTypes = [3, 4, 5]
package/src/themes/five/src/components/MultiCartsPaymethodsAndWallets/index.js CHANGED
@@ -66,7 +66,8 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
66
66
  paymethodSelected,
67
67
  handleSelectPaymethod,
68
68
  handleSelectWallet,
69
- handlePaymethodDataChange
69
+ handlePaymethodDataChange,
70
+ isCustomerMode
70
71
  } = props
71
72
 
72
73
  const [, t] = useLanguage()
@@ -98,14 +99,17 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
98
99
  ))
99
100
  ) : (
100
101
  paymethodsAndWallets.paymethods.map(paymethod => (
101
- <PayCard
102
- key={paymethod.id}
103
- isActive={paymethodSelected?.id === paymethod.id}
104
- onClick={() => handleSelectPaymethod({ ...paymethod, paymethod: { gateway: paymethod.gateway }, paymethod_id: paymethod?.id })}
105
- >
106
- <div>{getPayIcon(paymethod.id)}</div>
107
- <p>{t(paymethod?.gateway.toUpperCase(), paymethod?.name)}</p>
108
- </PayCard>
102
+ <React.Fragment key={paymethod.id}>
103
+ {(!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
104
+ <PayCard
105
+ isActive={paymethodSelected?.id === paymethod.id}
106
+ onClick={() => handleSelectPaymethod({ ...paymethod, paymethod: { gateway: paymethod.gateway }, paymethod_id: paymethod?.id })}
107
+ >
108
+ <div>{getPayIcon(paymethod.id)}</div>
109
+ <p>{t(paymethod?.gateway.toUpperCase(), paymethod?.name)}</p>
110
+ </PayCard>
111
+ )}
112
+ </React.Fragment>
109
113
  ))
110
114
  )}
111
115
  </PaymethodsListContainer>
@@ -136,40 +140,42 @@ const MultiCartsPaymethodsAndWalletsUI = (props) => {
136
140
  </PayCardSelected>
137
141
  )}
138
142
 
139
- <WalletPaymentOptionContainer>
140
- {(paymethodsAndWallets.loading || walletsState.loading) ? (
141
- <>
142
- {[...Array(2).keys()].map(i => (
143
- <div key={i}>
144
- <Skeleton height={40} style={{ marginBottom: '20px' }} />
145
- </div>
146
- ))}
147
- </>
148
- ) : (
149
- <>
150
- {walletsState?.result?.filter(wallet => paymethodsAndWallets.wallets.find(item => item.type === wallet.type)).map((wallet, idx) => walletName[wallet.type]?.isActive && (
151
- <WalletOptionContainer
152
- key={wallet.type}
153
- isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
154
- >
155
- <Checkbox
156
- name={`payment_option_${wallet.type}`}
157
- id={`custom-checkbox-${idx}`}
158
- disabled={wallet.balance === 0}
159
- value={`payment_option_${wallet.type}`}
160
- onChange={e => handleSelectWallet(e.target.checked, wallet)}
161
- />
162
- <label
163
- htmlFor={`custom-checkbox-${idx}`}
143
+ {!isCustomerMode && (
144
+ <WalletPaymentOptionContainer>
145
+ {(paymethodsAndWallets.loading || walletsState.loading) ? (
146
+ <>
147
+ {[...Array(2).keys()].map(i => (
148
+ <div key={i}>
149
+ <Skeleton height={40} style={{ marginBottom: '20px' }} />
150
+ </div>
151
+ ))}
152
+ </>
153
+ ) : (
154
+ <>
155
+ {walletsState?.result?.filter(wallet => paymethodsAndWallets.wallets.find(item => item.type === wallet.type)).map((wallet, idx) => walletName[wallet.type]?.isActive && (
156
+ <WalletOptionContainer
157
+ key={wallet.type}
158
+ isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
164
159
  >
165
- {walletName[wallet.type]?.name}
166
- </label>
167
- <span>{parsePrice(wallet.balance)}</span>
168
- </WalletOptionContainer>
169
- ))}
170
- </>
171
- )}
172
- </WalletPaymentOptionContainer>
160
+ <Checkbox
161
+ name={`payment_option_${wallet.type}`}
162
+ id={`custom-checkbox-${idx}`}
163
+ disabled={wallet.balance === 0}
164
+ value={`payment_option_${wallet.type}`}
165
+ onChange={e => handleSelectWallet(e.target.checked, wallet)}
166
+ />
167
+ <label
168
+ htmlFor={`custom-checkbox-${idx}`}
169
+ >
170
+ {walletName[wallet.type]?.name}
171
+ </label>
172
+ <span>{parsePrice(wallet.balance)}</span>
173
+ </WalletOptionContainer>
174
+ ))}
175
+ </>
176
+ )}
177
+ </WalletPaymentOptionContainer>
178
+ )}
173
179
  </Container>
174
180
  )
175
181
  }
package/src/themes/five/src/components/MultiCheckout/index.js CHANGED
@@ -159,7 +159,17 @@ const MultiCheckoutUI = (props) => {
159
159
  }, [validationFields, user, customerState])
160
160
 
161
161
  useEffect(() => {
162
- if (openCarts.length || cartGroup.loading) return
162
+ if (openCarts.length || cartGroup.loading) {
163
+ if (openCarts.length === 1) {
164
+ onRedirectPage && onRedirectPage({
165
+ page: 'checkout',
166
+ params: {
167
+ cartUuid: openCarts[0].uuid
168
+ }
169
+ })
170
+ }
171
+ return
172
+ }
163
173
  onRedirectPage && onRedirectPage({ page: 'search' })
164
174
  }, [openCarts, cartGroup])
165
175
 
@@ -211,6 +221,7 @@ const MultiCheckoutUI = (props) => {
211
221
  handleSelectWallet={handleSelectWallet}
212
222
  handlePaymethodDataChange={handlePaymethodDataChange}
213
223
  cartUuid={cartUuid}
224
+ isCustomerMode={isCustomerMode}
214
225
  />
215
226
  </PaymentMethodContainer>
216
227
 
package/src/themes/five/src/components/PaymentOptions/index.js CHANGED
@@ -191,27 +191,27 @@ const PaymentOptionsUI = (props) => {
191
191
  <PaymentMethodsList className='payments-list'>
192
192
  {!(paymethodsList.loading || isLoading) &&
193
193
  supportedMethods.length > 0 && (
194
- supportedMethods.sort((a, b) => a.id - b.id).map(paymethod => (
195
- <React.Fragment key={paymethod.id}>
196
- {
197
- (!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
198
- <PayCard
199
- isDisabled={isDisabled}
200
- className={`card ${paymethodSelected?.id === paymethod.id ? 'active' : ''}`}
201
- onClick={() => handlePaymentMethodClick(paymethod)}
202
- >
203
- <div>
204
- {getPayIcon(paymethod.id)}
205
- </div>
206
- <p>
207
- {t(paymethod.gateway.toUpperCase(), paymethod.name)}
208
- </p>
209
- </PayCard>
210
- )
211
- }
212
- </React.Fragment>
213
- ))
214
- )}
194
+ supportedMethods.sort((a, b) => a.id - b.id).map(paymethod => (
195
+ <React.Fragment key={paymethod.id}>
196
+ {
197
+ (!isCustomerMode || (isCustomerMode && (paymethod.gateway === 'card_delivery' || paymethod.gateway === 'cash'))) && (
198
+ <PayCard
199
+ isDisabled={isDisabled}
200
+ className={`card ${paymethodSelected?.id === paymethod.id ? 'active' : ''}`}
201
+ onClick={() => handlePaymentMethodClick(paymethod)}
202
+ >
203
+ <div>
204
+ {getPayIcon(paymethod.id)}
205
+ </div>
206
+ <p>
207
+ {t(paymethod.gateway.toUpperCase(), paymethod.name)}
208
+ </p>
209
+ </PayCard>
210
+ )
211
+ }
212
+ </React.Fragment>
213
+ ))
214
+ )}
215
215
 
216
216
  {(paymethodsList.loading || isLoading) && (
217
217
  [...Array(5).keys()].map(i => (
@@ -329,8 +329,7 @@ const PaymentOptionsUI = (props) => {
329
329
  {!isOpenMethod?.paymethod?.credentials?.publishable &&
330
330
  <Container>
331
331
  <p>{t('ADD_PUBLISHABLE_KEY', 'Please add a stripe key')}</p>
332
- </Container>
333
- }
332
+ </Container>}
334
333
  {isOpenMethod?.paymethod?.credentials?.publishable && stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && (
335
334
  <StripeElementsForm
336
335
  methodsPay={methodsPay}