@lideralia/alife-uikit 1.3.10 → 1.3.11

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 (2) hide show
  1. package/dist/organisms/Cards/PayInfo.js +141 -82
  2. package/package.json +1 -1
package/dist/organisms/Cards/PayInfo.js CHANGED
@@ -73,11 +73,20 @@ CardPayInfo.Content = props => {
73
73
  const {
74
74
  labelPayMethod,
75
75
  labelCreditCard,
76
+ labelCreditCardNumber,
77
+ labelCreditCardExpDate,
78
+ labelCreditCardCvc,
76
79
  customColor,
77
80
  customTextColor,
78
- labelTermsAndConditions
81
+ labelTermsAndConditions,
82
+ handleSubmit
79
83
  } = props;
80
84
  const [isCompletedPayment, setIsCompletedPayment] = (0, _react.useState)(false);
85
+ const [cardComplete, setCardComplete] = (0, _react.useState)({
86
+ cardNumber: false,
87
+ cardExpiry: false,
88
+ cardCvc: false
89
+ });
81
90
  const stripe = (0, _reactStripeJs.useStripe)();
82
91
  const elements = (0, _reactStripeJs.useElements)();
83
92
  const [isNeedInvoice, setIsNeedInvoice] = (0, _react.useState)(false);
@@ -102,80 +111,94 @@ CardPayInfo.Content = props => {
102
111
  email_valid: true
103
112
  });
104
113
  (0, _react.useEffect)(() => {
105
- if (infoState !== null && infoState !== void 0 && infoState.payment_method_id && (infoState === null || infoState === void 0 ? void 0 : infoState.payment_method_id) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.payment_method_id) !== '') {
106
- if (!(infoState !== null && infoState !== void 0 && infoState.invoice_requested)) {
107
- setFormValid({
108
- form_valid: true
109
- });
110
- } else {
111
- if (infoState !== null && infoState !== void 0 && infoState.email && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== '') {
112
- const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
113
-
114
- if (re.test(infoState.email)) {
115
- setFormValid({
116
- form_valid: true
117
- });
118
- setEmailValid({
119
- email_valid: true
120
- });
121
- } else {
122
- setFormValid({
123
- form_valid: false
124
- });
125
- setEmailValid({
126
- email_valid: false
127
- });
128
- }
114
+ if (!(infoState !== null && infoState !== void 0 && infoState.invoice_requested)) {
115
+ setFormValid({
116
+ form_valid: true
117
+ });
118
+ } else {
119
+ if (infoState !== null && infoState !== void 0 && infoState.email && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== '') {
120
+ const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
121
+
122
+ if (re.test(infoState.email)) {
123
+ setFormValid({
124
+ form_valid: true
125
+ });
126
+ setEmailValid({
127
+ email_valid: true
128
+ });
129
+ } else {
130
+ setFormValid({
131
+ form_valid: false
132
+ });
133
+ setEmailValid({
134
+ email_valid: false
135
+ });
129
136
  }
130
-
131
- if (infoState !== null && infoState !== void 0 && infoState.dni && (infoState === null || infoState === void 0 ? void 0 : infoState.dni) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.dni) !== '' && infoState !== null && infoState !== void 0 && infoState.email && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== '' && infoState !== null && infoState !== void 0 && infoState.address && (infoState === null || infoState === void 0 ? void 0 : infoState.address) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.address) !== '' && infoState !== null && infoState !== void 0 && infoState.location && (infoState === null || infoState === void 0 ? void 0 : infoState.location) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.location) !== '' && infoState !== null && infoState !== void 0 && infoState.cp && (infoState === null || infoState === void 0 ? void 0 : infoState.cp) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.cp) !== '' && infoState !== null && infoState !== void 0 && infoState.province && (infoState === null || infoState === void 0 ? void 0 : infoState.province) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.province) !== '' && infoState !== null && infoState !== void 0 && infoState.country && (infoState === null || infoState === void 0 ? void 0 : infoState.country) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.country) !== '') {
132
- const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
133
-
134
- if (re.test(infoState.email)) {
135
- setFormValid({
136
- form_valid: true
137
- });
138
- setEmailValid({
139
- email_valid: true
140
- });
141
- } else {
142
- setFormValid({
143
- form_valid: false
144
- });
145
- setEmailValid({
146
- email_valid: false
147
- });
148
- }
149
- } else setFormValid({
150
- form_valid: false
151
- });
152
137
  }
153
- } else setFormValid({
154
- form_valid: false
155
- });
138
+
139
+ if (infoState !== null && infoState !== void 0 && infoState.dni && (infoState === null || infoState === void 0 ? void 0 : infoState.dni) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.dni) !== '' && infoState !== null && infoState !== void 0 && infoState.email && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== '' && infoState !== null && infoState !== void 0 && infoState.address && (infoState === null || infoState === void 0 ? void 0 : infoState.address) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.address) !== '' && infoState !== null && infoState !== void 0 && infoState.location && (infoState === null || infoState === void 0 ? void 0 : infoState.location) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.location) !== '' && infoState !== null && infoState !== void 0 && infoState.cp && (infoState === null || infoState === void 0 ? void 0 : infoState.cp) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.cp) !== '' && infoState !== null && infoState !== void 0 && infoState.province && (infoState === null || infoState === void 0 ? void 0 : infoState.province) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.province) !== '' && infoState !== null && infoState !== void 0 && infoState.country && (infoState === null || infoState === void 0 ? void 0 : infoState.country) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.country) !== '') {
140
+ const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
141
+
142
+ if (re.test(infoState.email)) {
143
+ setFormValid({
144
+ form_valid: true
145
+ });
146
+ setEmailValid({
147
+ email_valid: true
148
+ });
149
+ } else {
150
+ setFormValid({
151
+ form_valid: false
152
+ });
153
+ setEmailValid({
154
+ email_valid: false
155
+ });
156
+ }
157
+ } else setFormValid({
158
+ form_valid: false
159
+ });
160
+ }
156
161
  }, [infoState]);
157
162
 
158
- const handleSubmit = async e => {
159
- setIsCompletedPayment(e.complete);
163
+ const handleCardChange = field => e => {
164
+ const updatedCardComplete = _objectSpread(_objectSpread({}, cardComplete), {}, {
165
+ [field]: e.complete
166
+ });
160
167
 
161
- if (!stripe || !elements) {
162
- return;
163
- }
168
+ setCardComplete(updatedCardComplete);
169
+ const allComplete = Object.values(updatedCardComplete).every(Boolean);
170
+ setIsCompletedPayment(allComplete);
171
+ };
164
172
 
165
- stripe.createPaymentMethod({
173
+ const handleSubmitPayment = async infoState => {
174
+ if (!stripe || !elements) return;
175
+ const result = await stripe.createPaymentMethod({
166
176
  type: 'card',
167
- card: elements.getElement(_reactStripeJs.CardElement)
168
- }).then(result => {
169
- if (result.hasOwnProperty('paymentMethod')) {
170
- var _result$paymentMethod;
171
-
172
- setInfoState(_objectSpread(_objectSpread({}, infoState), {}, {
173
- payment_method_id: result === null || result === void 0 ? void 0 : (_result$paymentMethod = result.paymentMethod) === null || _result$paymentMethod === void 0 ? void 0 : _result$paymentMethod.id
174
- }));
175
- }
177
+ card: elements.getElement(_reactStripeJs.CardNumberElement)
176
178
  });
179
+
180
+ if (result !== null && result !== void 0 && result.hasOwnProperty('paymentMethod')) {
181
+ var _result$paymentMethod;
182
+
183
+ const newInfoState = _objectSpread(_objectSpread({}, infoState), {}, {
184
+ payment_method_id: result === null || result === void 0 ? void 0 : (_result$paymentMethod = result.paymentMethod) === null || _result$paymentMethod === void 0 ? void 0 : _result$paymentMethod.id
185
+ });
186
+
187
+ setInfoState(newInfoState);
188
+ await handleSubmit(newInfoState);
189
+ }
177
190
  };
178
191
 
192
+ const cardElementOptions = {
193
+ style: {
194
+ base: {
195
+ color: '#666',
196
+ fontSize: '16px',
197
+ padding: '20',
198
+ fontFamily: "Inter,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,'Segoe UI',Roboto,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'"
199
+ }
200
+ }
201
+ };
179
202
  return _react.default.createElement(_Card.Card, (0, _extends2.default)({
180
203
  maxWidth: "339px",
181
204
  minWidth: "290px",
@@ -203,7 +226,12 @@ CardPayInfo.Content = props => {
203
226
  label: labelCreditCard,
204
227
  defaultValue: 't1'
205
228
  }]
206
- }), _react.default.createElement(_Layout.Box, {
229
+ }), _react.default.createElement(_Field.Field, {
230
+ label: labelCreditCardNumber,
231
+ color: "black60",
232
+ fontWeight: "bold",
233
+ marginTop: "10px"
234
+ }, _react.default.createElement(_Layout.Box, {
207
235
  style: {
208
236
  height: '60px',
209
237
  padding: '20px 18px 18px 18px',
@@ -211,22 +239,51 @@ CardPayInfo.Content = props => {
211
239
  width: '100%',
212
240
  boxShadow: '#b9b6b8 0px 0px 0px 2px inset'
213
241
  }
214
- }, _react.default.createElement(_reactStripeJs.CardElement, {
215
- id: "card-element",
216
- onChange: handleSubmit,
217
- options: {
218
- language: 'it',
219
- hidePostalCode: true,
220
- style: {
221
- base: {
222
- color: '#666',
223
- fontSize: '16px',
224
- padding: '20',
225
- fontFamily: "Inter,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,'Segoe UI',Roboto,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'"
226
- }
227
- }
242
+ }, _react.default.createElement(_reactStripeJs.CardNumberElement, {
243
+ id: "card-number",
244
+ onChange: handleCardChange('cardNumber'),
245
+ options: cardElementOptions
246
+ }))), _react.default.createElement(_Layout.Flex, {
247
+ width: "100%",
248
+ gap: "10px",
249
+ marginTop: "10px"
250
+ }, _react.default.createElement(_Layout.Box, {
251
+ flex: "3"
252
+ }, _react.default.createElement(_Field.Field, {
253
+ label: labelCreditCardExpDate,
254
+ color: "black60",
255
+ fontWeight: "bold"
256
+ }, _react.default.createElement(_Layout.Box, {
257
+ style: {
258
+ height: '60px',
259
+ padding: '20px 18px 18px 18px',
260
+ borderRadius: '18px',
261
+ width: '100%',
262
+ boxShadow: '#b9b6b8 0px 0px 0px 2px inset'
263
+ }
264
+ }, _react.default.createElement(_reactStripeJs.CardExpiryElement, {
265
+ id: "card-expiry",
266
+ onChange: handleCardChange('cardExpiry'),
267
+ options: cardElementOptions
268
+ })))), _react.default.createElement(_Layout.Box, {
269
+ flex: "2"
270
+ }, _react.default.createElement(_Field.Field, {
271
+ label: labelCreditCardCvc,
272
+ color: "black60",
273
+ fontWeight: "bold"
274
+ }, _react.default.createElement(_Layout.Box, {
275
+ style: {
276
+ height: '60px',
277
+ padding: '20px 18px 18px 18px',
278
+ borderRadius: '18px',
279
+ width: '100%',
280
+ boxShadow: '#b9b6b8 0px 0px 0px 2px inset'
228
281
  }
229
- }))), _react.default.createElement(CardPayInfo.Body, (0, _extends2.default)({
282
+ }, _react.default.createElement(_reactStripeJs.CardCvcElement, {
283
+ id: "card-cvc",
284
+ onChange: handleCardChange('cardCvc'),
285
+ options: cardElementOptions
286
+ })))))), _react.default.createElement(CardPayInfo.Body, (0, _extends2.default)({
230
287
  isNeedInvoice: isNeedInvoice,
231
288
  setIsNeedInvoice: setIsNeedInvoice,
232
289
  infoState: infoState,
@@ -239,7 +296,9 @@ CardPayInfo.Content = props => {
239
296
  customTextColor: customTextColor,
240
297
  labelTermsAndConditions: labelTermsAndConditions,
241
298
  isCompletedPayment: isCompletedPayment
242
- }, props)));
299
+ }, props, {
300
+ handleSubmit: handleSubmitPayment
301
+ })));
243
302
  };
244
303
 
245
304
  CardPayInfo.Body = props => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lideralia/alife-uikit",
3
- "version": "1.3.10",
3
+ "version": "1.3.11",
4
4
  "description": "Librería y documentación de componentes, basada en el Design System de Alife.",
5
5
  "homepage": "https://github.com/lideralia/alife-frontend-components#readme",
6
6
  "bugs": {