@mirai/core 0.3.170 → 0.3.172

package/build/components/__shared__/Payment/__tests__/__snapshots__/Payment.test.js.snap

@@ -347,12 +347,14 @@ exports[`component:<Payment> renders some methods 1`] = `
       class="view"
     >
       <div
-        class="pressable"
+        class="pressable disabled"
+        disabled=""
       >
         <div
           class="radio"
         >
           <input
+            checked=""
             class="input"
             name="method"
             type="radio"
@@ -362,11 +364,147 @@ exports[`component:<Payment> renders some methods 1`] = `
             class="checkmark"
           />
         </div>
-        <span
-          class="text bold paragraph"
+        <h3
+          class="text bold headline-3"
         >
           payments.label.card
-        </span>
+        </h3>
+      </div>
+      <div
+        class="view"
+      >
+        <fieldset
+          autocomplete="off"
+        >
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_number
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-card"
+                  maxlength="19"
+                  name="card"
+                  placeholder="0000 0000 0000 0000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_name
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-name"
+                  maxlength="100"
+                  minlength="3"
+                  name="name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.expiration
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-expire"
+                  maxlength="5"
+                  name="expire"
+                  placeholder="payments.label.month_format/payments.label.year_format"
+                  required=""
+                  type="inputDate"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.cvv
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-CVV"
+                  maxlength="3"
+                  name="CVV"
+                  placeholder="000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </fieldset>
       </div>
     </div>
     <div
@@ -644,13 +782,15 @@ exports[`component:<Payment> testID with some methods 1`] = `
       class="view"
     >
       <div
-        class="pressable"
+        class="pressable disabled"
         data-testid="mirai-item-CARD"
+        disabled=""
       >
         <div
           class="radio"
         >
           <input
+            checked=""
             class="input"
             name="method"
             type="radio"
@@ -660,12 +800,154 @@ exports[`component:<Payment> testID with some methods 1`] = `
             class="checkmark"
           />
         </div>
-        <span
-          class="text bold paragraph"
+        <h3
+          class="text bold headline-3"
           data-testid="mirai-text-CARD"
         >
           payments.label.card
-        </span>
+        </h3>
+      </div>
+      <div
+        class="view"
+        data-testid="mirai-container-CARD"
+      >
+        <fieldset
+          autocomplete="off"
+          data-testid="mirai"
+        >
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_number
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  data-testid="mirai-card"
+                  id="checkout-card"
+                  maxlength="19"
+                  name="card"
+                  placeholder="0000 0000 0000 0000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_name
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  data-testid="mirai-name"
+                  id="checkout-name"
+                  maxlength="100"
+                  minlength="3"
+                  name="name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.expiration
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  data-testid="mirai-expire"
+                  id="checkout-expire"
+                  maxlength="5"
+                  name="expire"
+                  placeholder="payments.label.month_format/payments.label.year_format"
+                  required=""
+                  type="inputDate"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.cvv
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  data-testid="mirai-CVV"
+                  id="checkout-CVV"
+                  maxlength="3"
+                  name="CVV"
+                  placeholder="000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </fieldset>
       </div>
     </div>
     <div

package/build/components/__shared__/Payment/components/PCI/PCI.constants.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SCRIPT_ID = exports.PLACEHOLDER_CVV = exports.PLACEHOLDER_CARD = exports.PCI_CARD = exports.NUMBER_FIELDS = exports.ERROR = void 0;
+exports.SCRIPT_ID = exports.PLACEHOLDER_CVV = exports.PLACEHOLDER_CARD = exports.PCI_CARD = exports.ERROR = void 0;
 var _Payment = require("../../Payment.constants");
 const ERROR = exports.ERROR = {
   error: true
 };
-const NUMBER_FIELDS = exports.NUMBER_FIELDS = 4;
 const PCI_CARD = exports.PCI_CARD = {
   VIS: _Payment.CARD.VISA,
   AMX: _Payment.CARD.AMERICAN_EXPRESS,

package/build/components/__shared__/Payment/components/PCI/PCI.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"PCI.constants.js","names":["_Payment","require","ERROR","exports","error","NUMBER_FIELDS","PCI_CARD","VIS","CARD","VISA","AMX","AMERICAN_EXPRESS","ECA","MASTERCARD","JCB","DIS","DISCOVER","DIN","DINERS_CLUB","CUP","UNIONPAY","MAU","MAESTRO","PLACEHOLDER_CARD","PLACEHOLDER_CVV","SCRIPT_ID"],"sources":["../../../../../../src/components/__shared__/Payment/components/PCI/PCI.constants.js"],"sourcesContent":["import { CARD } from '../../Payment.constants';\n\nconst ERROR = { error: true };\n\nconst NUMBER_FIELDS = 4;\n\nconst PCI_CARD = {\n  VIS: CARD.VISA,\n  AMX: CARD.AMERICAN_EXPRESS,\n  ECA: CARD.MASTERCARD,\n  JCB: CARD.JCB,\n  DIS: CARD.DISCOVER,\n  DIN: CARD.DINERS_CLUB,\n  CUP: CARD.UNIONPAY,\n  MAU: CARD.MAESTRO,\n};\n\nconst PLACEHOLDER_CARD = '0000 0000 0000 0000';\n\nconst PLACEHOLDER_CVV = '000';\n\nconst SCRIPT_ID = 'script-pci-proxy';\n\nexport { ERROR, NUMBER_FIELDS, PCI_CARD, PLACEHOLDER_CARD, PLACEHOLDER_CVV, SCRIPT_ID };\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAEA,MAAMC,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG;EAAEE,KAAK,EAAE;AAAK,CAAC;AAE7B,MAAMC,aAAa,GAAAF,OAAA,CAAAE,aAAA,GAAG,CAAC;AAEvB,MAAMC,QAAQ,GAAAH,OAAA,CAAAG,QAAA,GAAG;EACfC,GAAG,EAAEC,aAAI,CAACC,IAAI;EACdC,GAAG,EAAEF,aAAI,CAACG,gBAAgB;EAC1BC,GAAG,EAAEJ,aAAI,CAACK,UAAU;EACpBC,GAAG,EAAEN,aAAI,CAACM,GAAG;EACbC,GAAG,EAAEP,aAAI,CAACQ,QAAQ;EAClBC,GAAG,EAAET,aAAI,CAACU,WAAW;EACrBC,GAAG,EAAEX,aAAI,CAACY,QAAQ;EAClBC,GAAG,EAAEb,aAAI,CAACc;AACZ,CAAC;AAED,MAAMC,gBAAgB,GAAApB,OAAA,CAAAoB,gBAAA,GAAG,qBAAqB;AAE9C,MAAMC,eAAe,GAAArB,OAAA,CAAAqB,eAAA,GAAG,KAAK;AAE7B,MAAMC,SAAS,GAAAtB,OAAA,CAAAsB,SAAA,GAAG,kBAAkB"}
+{"version":3,"file":"PCI.constants.js","names":["_Payment","require","ERROR","exports","error","PCI_CARD","VIS","CARD","VISA","AMX","AMERICAN_EXPRESS","ECA","MASTERCARD","JCB","DIS","DISCOVER","DIN","DINERS_CLUB","CUP","UNIONPAY","MAU","MAESTRO","PLACEHOLDER_CARD","PLACEHOLDER_CVV","SCRIPT_ID"],"sources":["../../../../../../src/components/__shared__/Payment/components/PCI/PCI.constants.js"],"sourcesContent":["import { CARD } from '../../Payment.constants';\n\nconst ERROR = { error: true };\n\nconst PCI_CARD = {\n  VIS: CARD.VISA,\n  AMX: CARD.AMERICAN_EXPRESS,\n  ECA: CARD.MASTERCARD,\n  JCB: CARD.JCB,\n  DIS: CARD.DISCOVER,\n  DIN: CARD.DINERS_CLUB,\n  CUP: CARD.UNIONPAY,\n  MAU: CARD.MAESTRO,\n};\n\nconst PLACEHOLDER_CARD = '0000 0000 0000 0000';\n\nconst PLACEHOLDER_CVV = '000';\n\nconst SCRIPT_ID = 'script-pci-proxy';\n\nexport { ERROR, PCI_CARD, PLACEHOLDER_CARD, PLACEHOLDER_CVV, SCRIPT_ID };\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAEA,MAAMC,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG;EAAEE,KAAK,EAAE;AAAK,CAAC;AAE7B,MAAMC,QAAQ,GAAAF,OAAA,CAAAE,QAAA,GAAG;EACfC,GAAG,EAAEC,aAAI,CAACC,IAAI;EACdC,GAAG,EAAEF,aAAI,CAACG,gBAAgB;EAC1BC,GAAG,EAAEJ,aAAI,CAACK,UAAU;EACpBC,GAAG,EAAEN,aAAI,CAACM,GAAG;EACbC,GAAG,EAAEP,aAAI,CAACQ,QAAQ;EAClBC,GAAG,EAAET,aAAI,CAACU,WAAW;EACrBC,GAAG,EAAEX,aAAI,CAACY,QAAQ;EAClBC,GAAG,EAAEb,aAAI,CAACc;AACZ,CAAC;AAED,MAAMC,gBAAgB,GAAAnB,OAAA,CAAAmB,gBAAA,GAAG,qBAAqB;AAE9C,MAAMC,eAAe,GAAApB,OAAA,CAAAoB,eAAA,GAAG,KAAK;AAE7B,MAAMC,SAAS,GAAArB,OAAA,CAAAqB,SAAA,GAAG,kBAAkB"}

package/build/components/__shared__/Payment/components/PCI/PCI.js

@@ -21,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 let secureFields;
 const PCI = _ref => {
-  var _form$name, _form$expire, _form$expire2;
+  var _form$card, _form$name, _form$name2, _form$expire, _form$expire2, _form$cvv;
   let {
     publicKey = process.env.METHOD_PCIPROXY_PUBLICKEY,
     showCVV = true,
@@ -40,7 +40,14 @@ const PCI = _ref => {
     set
   } = (0, _dataSources.useStore)();
   const [form, setForm] = (0, _react.useState)({});
-  const [formError, setFormError] = (0, _react.useState)({});
+  const [formError, setFormError] = (0, _react.useState)({
+    card: {},
+    name: {},
+    expire: {},
+    ...(showCVV ? {
+      cvv: {}
+    } : undefined)
+  });
   const [ready, setReady] = (0, _react.useState)(false);
   const [responseError, setResponseError] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
@@ -62,6 +69,7 @@ const PCI = _ref => {
   }, []);
   (0, _react.useEffect)(() => {
     if (!ready) return;
+    onError(formError);
     // eslint-disable-next-line no-undef
     secureFields = new SecureFields();
     secureFields.initTokenize(publicKey, {
@@ -73,19 +81,6 @@ const PCI = _ref => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [publicKey, ready]);
-  (0, _react.useEffect)(() => {
-    if (showErrors === false) return;
-    const error = {
-      card: !form.card,
-      ...(showCVV ? {
-        cvv: !form.cvv
-      } : undefined),
-      expire: !form.expire,
-      name: !form.name
-    };
-    Object.values(error).some(value => value) && setFormError(error);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showErrors]);
   (0, _react.useEffect)(() => {
     var _secureFields2, _secureFields3, _secureFields4, _secureFields5;
     (_secureFields2 = secureFields) === null || _secureFields2 === void 0 ? void 0 : _secureFields2.on('change', handleChangeSecure);
@@ -93,7 +88,7 @@ const PCI = _ref => {
     (_secureFields4 = secureFields) === null || _secureFields4 === void 0 ? void 0 : _secureFields4.on('ready', handleReady);
     (_secureFields5 = secureFields) === null || _secureFields5 === void 0 ? void 0 : _secureFields5.on('success', handleSuccess);
     document.addEventListener(_ButtonPayment.EVENT_CTA_PRESS, handleButtonPress);
-    if (Object.keys(formError).length === 0) onError(_PCI.ERROR);
+    if (Object.keys(formError).length === 0) onError({});
     return () => document.removeEventListener(_ButtonPayment.EVENT_CTA_PRESS, handleButtonPress);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [form, formError, payment, ready, responseError]);
@@ -106,22 +101,17 @@ const PCI = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [form]);
   (0, _react.useEffect)(() => {
-    let error = {
-      ...Object.entries({
-        ...formError
-      }).filter(_ref2 => {
-        let [, value] = _ref2;
-        return value;
-      })
-    };
-    const numberFields = showCVV ? _PCI.NUMBER_FIELDS : _PCI.NUMBER_FIELDS - 1;
-    if (responseError || Object.keys(error).length === 0 && Object.keys(formError).length !== numberFields) {
-      error = _PCI.ERROR;
-    }
-    onError(error);
+    onError(Object.fromEntries(Object.entries(formError).filter(_ref2 => {
+      let [, value] = _ref2;
+      return value !== undefined;
+    })));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [formError, responseError]);
   const handleButtonPress = () => {
+    if (Object.entries(formError).filter(_ref3 => {
+      let [, value] = _ref3;
+      return value !== undefined;
+    }).length > 0) return;
     setResponseError();
     const [month, year] = form.expire.split('/');
     secureFields.submit({
@@ -147,12 +137,8 @@ const PCI = _ref => {
       expire,
       name
     });
-    setFormError(prevForm => ({
-      ...prevForm,
-      [field]: prevForm[field] || value.length === 0
-    }));
   };
-  const handleChangeSecure = _ref3 => {
+  const handleChangeSecure = _ref4 => {
     let {
       fields: {
         cardNumber = {},
@@ -162,42 +148,55 @@ const PCI = _ref => {
         type,
         field
       } = {}
-    } = _ref3;
+    } = _ref4;
     const isKeyUp = type === 'keyUp';
     const isCardEmpty = field === 'cardNumber' && cardNumber.length === 0 && !form.card;
     const isCvvEmpty = field === 'cvv' && cvv.length === 0 && !form.cvv;
     if (!isKeyUp || isKeyUp && (isCardEmpty || isCvvEmpty)) return;
     setResponseError();
+    const error = {
+      ...formError
+    };
     if (field === 'cardNumber') {
       setForm({
         ...form,
         card: cardNumber,
         type: cardNumber.valid ? _PCI.PCI_CARD[cardNumber.paymentMethod] : undefined
       });
-      setFormError({
-        ...formError,
-        card: !cardNumber.valid && cardNumber.length > 0 || formError.card !== undefined && cardNumber.length === 0
-      });
+      error.card = !cardNumber.valid && cardNumber.length > 0 ? {
+        format: true
+      } : cardNumber.length === 0 ? {
+        required: true
+      } : undefined;
     } else if (field === 'cvv') {
       setForm({
         ...form,
         cvv
       });
-      setFormError({
-        ...formError,
-        cvv: !cvv.valid && cvv.length > 0 || formError.cvv !== undefined && cvv.length === 0
-      });
+      error.cvv = !cvv.valid && cvv.length > 0 ? {
+        format: true
+      } : cvv.length === 0 ? {
+        required: true
+      } : undefined;
     }
+    setFormError(error);
   };
   const handleError = function (field) {
     let {
       required,
       test
     } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    setFormError({
+    if (!ready) return;
+    setFormError(formError => ({
       ...formError,
-      [field]: test || required && !!formError[field]
-    });
+      ...{
+        [field]: required ? {
+          required: true
+        } : test ? {
+          format: true
+        } : undefined
+      }
+    }));
   };
   const handleLoad = () => {
     setReady(true);
@@ -206,10 +205,10 @@ const PCI = _ref => {
     secureFields.setPlaceholder('cardNumber', _PCI.PLACEHOLDER_CARD);
     showCVV && secureFields.setPlaceholder('cvv', _PCI.PLACEHOLDER_CVV);
   };
-  const handleSuccess = _ref4 => {
+  const handleSuccess = _ref5 => {
     let {
       transactionId
-    } = _ref4;
+    } = _ref5;
     set({
       payment: {
         ...payment,
@@ -232,21 +231,23 @@ const PCI = _ref => {
   return /*#__PURE__*/_react.default.createElement(_ui.View, others, /*#__PURE__*/_react.default.createElement(_ui.Text, {
     action: true
   }, translate(_PCI2.L10N.LABEL_SECURE_PAGE)), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
+    id: "checkout-card",
     label: translate(_PCI2.L10N.LABEL_CARD_NUMBER),
-    error: formError.card,
+    error: showErrors && (!form.card || ((_form$card = form.card) === null || _form$card === void 0 ? void 0 : _form$card.length) === 0) || Object.keys(formError.card || {}).length > 0,
     showRequired: true,
-    success: formError.card === false,
+    success: !formError.card,
     testId: testId ? "".concat(testId, "-PCI-card") : undefined
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "card",
     className: style.input
   })), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
-    error: formError.name,
+    error: showErrors && (!form.name || ((_form$name = form.name) === null || _form$name === void 0 ? void 0 : _form$name.length) === 0) || Object.keys(formError.name || {}).length > 0,
     label: translate(_PCI2.L10N.LABEL_CARD_NAME),
     showRequired: true,
-    success: ((_form$name = form.name) === null || _form$name === void 0 ? void 0 : _form$name.length) > 0 && !formError.name,
+    success: ((_form$name2 = form.name) === null || _form$name2 === void 0 ? void 0 : _form$name2.length) > 0 && !formError.name,
     testId: testId ? "".concat(testId, "-PCI-name") : undefined
   }, /*#__PURE__*/_react.default.createElement(_ui.Input, {
+    id: "checkout-name",
     name: "name",
     required: true,
     value: form.name,
@@ -255,26 +256,28 @@ const PCI = _ref => {
   })), /*#__PURE__*/_react.default.createElement(_ui.View, {
     row: true
   }, /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
-    error: (form === null || form === void 0 ? void 0 : (_form$expire = form.expire) === null || _form$expire === void 0 ? void 0 : _form$expire.length) > 0 && !!formError.expire,
+    error: showErrors && (!form.expire || ((_form$expire = form.expire) === null || _form$expire === void 0 ? void 0 : _form$expire.length) === 0) || Object.keys(formError.expire || {}).length > 0,
     label: translate(_PCI2.L10N.LABEL_EXPIRATION),
     showRequired: true,
     success: ((_form$expire2 = form.expire) === null || _form$expire2 === void 0 ? void 0 : _form$expire2.length) > 0 && !formError.expire,
     className: style.expire,
     testId: testId ? "".concat(testId, "-PCI-expire") : undefined
   }, /*#__PURE__*/_react.default.createElement(_ui.Input, {
+    id: "checkout-expire",
     maxLength: 5,
     name: "expire",
     placeholder: "".concat(translate(_PCI2.L10N.LABEL_MONTH_FORMAT), "/").concat(translate(_PCI2.L10N.LABEL_YEAR_FORMAT)),
     required: true,
-    test: expire => (expire === null || expire === void 0 ? void 0 : expire.length) > 0 && (0, _helpers2.testExpire)(expire),
+    test: expire => expire.length === 0 || (expire === null || expire === void 0 ? void 0 : expire.length) > 0 && (0, _helpers2.testExpire)(expire),
     value: form.expire,
     onChange: value => handleChange('expire', value),
     onError: error => handleError('expire', error)
   })), showCVV && /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
+    id: "checkout-cvv",
     label: translate(_PCI2.L10N.LABEL_CVV),
-    error: formError.cvv,
+    error: showErrors && (!form.cvv || ((_form$cvv = form.cvv) === null || _form$cvv === void 0 ? void 0 : _form$cvv.length) === 0) || Object.keys(formError.cvv || {}).length > 0,
     showRequired: true,
-    success: formError.cvv === false,
+    success: !formError.cvv,
     className: style.cvv,
     testId: testId ? "".concat(testId, "-PCI-CVV") : undefined
   }, /*#__PURE__*/_react.default.createElement("div", {