@mirai/core 0.3.249 → 0.3.250

package/build/components/__shared__/ButtonPayment/ButtonPayment.js

@@ -74,10 +74,10 @@ const ButtonPayment = _ref => {
   (0, _react.useEffect)(() => {
     const {
       error,
-      orderRererence,
+      orderReference,
       transactionId
     } = payment;
-    if (orderRererence || transactionId) handleSuccess();else if (error) onError(error);
+    if (orderReference || transactionId) handleSuccess();else if (error) onError(error);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [payment]);
   const handlePress = async () => {

package/build/components/__shared__/ButtonPayment/ButtonPayment.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonPayment.js","names":["_dataSources","require","_locale","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_ButtonPayment","_ButtonPayment2","style","_helpers","_Payment","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","AMAZON_PAY","APLAZAME","CARD","PCIPROXY","TPV","PAYMENT_METHOD","ADDON","CHECKOUT","SIPAY","PAYCOMET","PAYMENT_PROVIDER","PROVIDERS_WITH_MODAL","ButtonPayment","_ref","children","config","currencyDecimals","provider","publicKey","dataSource","hotel","id","propHotel","info","promise","Promise","resolve","tracking","onError","onPress","onSuccess","others","locale","translate","useLocale","value","forwarder","payment","urlParams","useStore","modal","setModal","useState","response","setResponse","handleClose","useEffect","error","orderRererence","transactionId","handleSuccess","handlePress","method","includes","document","dispatchEvent","Event","EVENT_CTA_PRESS","requireCardValidation","cardValidation","PAYMENT_CARD_VALIDATION_PROVIDER","withModal","isAddon","catch","CustomEvent","EVENT_APLAZAME_RESPONSE","detail","url","getUrl","window","location","href","EVENT_AMAZON_PAY_RESPONSE","component","getComponent","createElement","Fragment","Button","L10N","ACTION_PAY_NOW","Modal","portal","title","visible","onClose","React","className","modalContent","exports","displayName","propTypes","PropTypes","oneOfType","string","node","shape","number","oneOf","values","showCVV","bool","amount","date","instanceOf","Date","func"],"sources":["../../../../src/components/__shared__/ButtonPayment/ButtonPayment.jsx"],"sourcesContent":["import { useStore } from '@mirai/data-sources';\nimport { useLocale } from '@mirai/locale';\nimport { Button, Modal } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { EVENT_AMAZON_PAY_RESPONSE, EVENT_APLAZAME_RESPONSE, EVENT_CTA_PRESS } from './ButtonPayment.constants';\nimport { L10N } from './ButtonPayment.l10n';\nimport * as style from './ButtonPayment.module.css';\nimport { getComponent, getUrl } from './helpers';\nimport { PAYMENT_CARD_VALIDATION_PROVIDER, PAYMENT_METHOD, PAYMENT_PROVIDER } from '../Payment';\n\nconst { AMAZON_PAY, APLAZAME, CARD, PCIPROXY, TPV } = PAYMENT_METHOD;\nconst { ADDON, CHECKOUT, SIPAY, PAYCOMET } = PAYMENT_PROVIDER;\n\nconst PROVIDERS_WITH_MODAL = [ADDON, CHECKOUT, SIPAY, PAYCOMET];\n\nconst ButtonPayment = ({\n  children,\n  config: { currencyDecimals, provider, publicKey } = {},\n  dataSource = {},\n  hotel: { id, ...propHotel } = {},\n  info = {},\n  promise = () => new Promise((resolve) => resolve({})),\n  tracking,\n  onError = () => {},\n  onPress = () => {},\n  onSuccess = () => {},\n  ...others\n}) => {\n  const { locale, translate } = useLocale();\n  const { value: { forwarder, payment = dataSource || {}, hotel = propHotel || {}, urlParams } = {} } = useStore();\n\n  const [modal, setModal] = useState(false);\n  const [response, setResponse] = useState();\n\n  const handleClose = () => {\n    setModal(false);\n    onError();\n  };\n\n  useEffect(() => {\n    const { error, orderRererence, transactionId } = payment;\n    if (orderRererence || transactionId) handleSuccess();\n    else if (error) onError(error);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [payment]);\n\n  const handlePress = async () => {\n    if (onPress() === false) return;\n\n    const { method } = payment || {};\n    if ([AMAZON_PAY, PCIPROXY].includes(method)) return document.dispatchEvent(new Event(EVENT_CTA_PRESS));\n\n    const requireCardValidation =\n      [CARD, PCIPROXY].includes(method) && cardValidation && PAYMENT_CARD_VALIDATION_PROVIDER.includes(provider);\n    const withModal = PROVIDERS_WITH_MODAL.includes(provider) && (method === TPV || requireCardValidation);\n    const response = !withModal || isAddon || method === APLAZAME ? await promise().catch(onError) : true;\n    if (!response) return;\n\n    if (withModal) {\n      setResponse(response);\n      setModal(true);\n    } else if (method === APLAZAME) {\n      document.dispatchEvent(new CustomEvent(EVENT_APLAZAME_RESPONSE, { detail: { ...response, publicKey } }));\n    } else {\n      const url = getUrl({ ...response, ...hotel, id, forwarder, locale, tracking, urlParams });\n      if (url) window.location.href = url;\n    }\n  };\n\n  const handleSuccess = async (value) => {\n    setModal(false);\n\n    const response = await promise(value).catch(onError);\n    if (!response) return;\n\n    if (payment.method === AMAZON_PAY)\n      return document.dispatchEvent(new CustomEvent(EVENT_AMAZON_PAY_RESPONSE, { detail: { response } }));\n\n    if (response) {\n      const url = getUrl({ ...response, ...hotel, id, forwarder, locale, tracking, urlParams });\n      if (url) {\n        onSuccess(url);\n        window.location.href = url;\n      }\n    }\n  };\n\n  const { method } = payment || {};\n  const { cardValidation } = info || {};\n  const component = getComponent({ cardValidation, method, provider });\n  const isAddon = provider === ADDON;\n\n  return (\n    <>\n      <Button {...others} onPress={handlePress}>\n        {children || translate(L10N.ACTION_PAY_NOW)}\n      </Button>\n\n      <Modal portal={isAddon} title={method} visible={modal} onClose={handleClose}>\n        {component &&\n          React.createElement(component, {\n            currencyDecimals,\n            info,\n            method,\n            provider,\n            publicKey,\n            response,\n            onError,\n            onSuccess: handleSuccess,\n            className: style.modalContent,\n          })}\n      </Modal>\n    </>\n  );\n};\n\nButtonPayment.displayName = 'Mirai:Core:ButtonPayment';\n\nButtonPayment.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  config: PropTypes.shape({\n    currencyDecimals: PropTypes.number,\n    provider: PropTypes.oneOf(Object.values(PAYMENT_PROVIDER)),\n    publicKey: PropTypes.string,\n    showCVV: PropTypes.bool,\n  }),\n  dataSource: PropTypes.shape({\n    method: PropTypes.oneOf(Object.values(PAYMENT_METHOD)),\n  }),\n  hotel: PropTypes.shape({\n    id: PropTypes.string,\n    url: PropTypes.string,\n  }),\n  info: PropTypes.shape({\n    amount: PropTypes.number,\n    cardValidation: PropTypes.bool,\n    date: PropTypes.instanceOf(Date),\n  }),\n  promise: PropTypes.func,\n  tracking: PropTypes.string,\n  onError: PropTypes.func,\n  onPress: PropTypes.func,\n  onSuccess: PropTypes.func,\n};\n\nexport { ButtonPayment };\n"],"mappings":"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"}
+{"version":3,"file":"ButtonPayment.js","names":["_dataSources","require","_locale","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_ButtonPayment","_ButtonPayment2","style","_helpers","_Payment","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","AMAZON_PAY","APLAZAME","CARD","PCIPROXY","TPV","PAYMENT_METHOD","ADDON","CHECKOUT","SIPAY","PAYCOMET","PAYMENT_PROVIDER","PROVIDERS_WITH_MODAL","ButtonPayment","_ref","children","config","currencyDecimals","provider","publicKey","dataSource","hotel","id","propHotel","info","promise","Promise","resolve","tracking","onError","onPress","onSuccess","others","locale","translate","useLocale","value","forwarder","payment","urlParams","useStore","modal","setModal","useState","response","setResponse","handleClose","useEffect","error","orderReference","transactionId","handleSuccess","handlePress","method","includes","document","dispatchEvent","Event","EVENT_CTA_PRESS","requireCardValidation","cardValidation","PAYMENT_CARD_VALIDATION_PROVIDER","withModal","isAddon","catch","CustomEvent","EVENT_APLAZAME_RESPONSE","detail","url","getUrl","window","location","href","EVENT_AMAZON_PAY_RESPONSE","component","getComponent","createElement","Fragment","Button","L10N","ACTION_PAY_NOW","Modal","portal","title","visible","onClose","React","className","modalContent","exports","displayName","propTypes","PropTypes","oneOfType","string","node","shape","number","oneOf","values","showCVV","bool","amount","date","instanceOf","Date","func"],"sources":["../../../../src/components/__shared__/ButtonPayment/ButtonPayment.jsx"],"sourcesContent":["import { useStore } from '@mirai/data-sources';\nimport { useLocale } from '@mirai/locale';\nimport { Button, Modal } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { EVENT_AMAZON_PAY_RESPONSE, EVENT_APLAZAME_RESPONSE, EVENT_CTA_PRESS } from './ButtonPayment.constants';\nimport { L10N } from './ButtonPayment.l10n';\nimport * as style from './ButtonPayment.module.css';\nimport { getComponent, getUrl } from './helpers';\nimport { PAYMENT_CARD_VALIDATION_PROVIDER, PAYMENT_METHOD, PAYMENT_PROVIDER } from '../Payment';\n\nconst { AMAZON_PAY, APLAZAME, CARD, PCIPROXY, TPV } = PAYMENT_METHOD;\nconst { ADDON, CHECKOUT, SIPAY, PAYCOMET } = PAYMENT_PROVIDER;\n\nconst PROVIDERS_WITH_MODAL = [ADDON, CHECKOUT, SIPAY, PAYCOMET];\n\nconst ButtonPayment = ({\n  children,\n  config: { currencyDecimals, provider, publicKey } = {},\n  dataSource = {},\n  hotel: { id, ...propHotel } = {},\n  info = {},\n  promise = () => new Promise((resolve) => resolve({})),\n  tracking,\n  onError = () => {},\n  onPress = () => {},\n  onSuccess = () => {},\n  ...others\n}) => {\n  const { locale, translate } = useLocale();\n  const { value: { forwarder, payment = dataSource || {}, hotel = propHotel || {}, urlParams } = {} } = useStore();\n\n  const [modal, setModal] = useState(false);\n  const [response, setResponse] = useState();\n\n  const handleClose = () => {\n    setModal(false);\n    onError();\n  };\n\n  useEffect(() => {\n    const { error, orderReference, transactionId } = payment;\n    if (orderReference || transactionId) handleSuccess();\n    else if (error) onError(error);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [payment]);\n\n  const handlePress = async () => {\n    if (onPress() === false) return;\n\n    const { method } = payment || {};\n    if ([AMAZON_PAY, PCIPROXY].includes(method)) return document.dispatchEvent(new Event(EVENT_CTA_PRESS));\n\n    const requireCardValidation =\n      [CARD, PCIPROXY].includes(method) && cardValidation && PAYMENT_CARD_VALIDATION_PROVIDER.includes(provider);\n    const withModal = PROVIDERS_WITH_MODAL.includes(provider) && (method === TPV || requireCardValidation);\n    const response = !withModal || isAddon || method === APLAZAME ? await promise().catch(onError) : true;\n    if (!response) return;\n\n    if (withModal) {\n      setResponse(response);\n      setModal(true);\n    } else if (method === APLAZAME) {\n      document.dispatchEvent(new CustomEvent(EVENT_APLAZAME_RESPONSE, { detail: { ...response, publicKey } }));\n    } else {\n      const url = getUrl({ ...response, ...hotel, id, forwarder, locale, tracking, urlParams });\n      if (url) window.location.href = url;\n    }\n  };\n\n  const handleSuccess = async (value) => {\n    setModal(false);\n\n    const response = await promise(value).catch(onError);\n    if (!response) return;\n\n    if (payment.method === AMAZON_PAY)\n      return document.dispatchEvent(new CustomEvent(EVENT_AMAZON_PAY_RESPONSE, { detail: { response } }));\n\n    if (response) {\n      const url = getUrl({ ...response, ...hotel, id, forwarder, locale, tracking, urlParams });\n      if (url) {\n        onSuccess(url);\n        window.location.href = url;\n      }\n    }\n  };\n\n  const { method } = payment || {};\n  const { cardValidation } = info || {};\n  const component = getComponent({ cardValidation, method, provider });\n  const isAddon = provider === ADDON;\n\n  return (\n    <>\n      <Button {...others} onPress={handlePress}>\n        {children || translate(L10N.ACTION_PAY_NOW)}\n      </Button>\n\n      <Modal portal={isAddon} title={method} visible={modal} onClose={handleClose}>\n        {component &&\n          React.createElement(component, {\n            currencyDecimals,\n            info,\n            method,\n            provider,\n            publicKey,\n            response,\n            onError,\n            onSuccess: handleSuccess,\n            className: style.modalContent,\n          })}\n      </Modal>\n    </>\n  );\n};\n\nButtonPayment.displayName = 'Mirai:Core:ButtonPayment';\n\nButtonPayment.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  config: PropTypes.shape({\n    currencyDecimals: PropTypes.number,\n    provider: PropTypes.oneOf(Object.values(PAYMENT_PROVIDER)),\n    publicKey: PropTypes.string,\n    showCVV: PropTypes.bool,\n  }),\n  dataSource: PropTypes.shape({\n    method: PropTypes.oneOf(Object.values(PAYMENT_METHOD)),\n  }),\n  hotel: PropTypes.shape({\n    id: PropTypes.string,\n    url: PropTypes.string,\n  }),\n  info: PropTypes.shape({\n    amount: PropTypes.number,\n    cardValidation: PropTypes.bool,\n    date: PropTypes.instanceOf(Date),\n  }),\n  promise: PropTypes.func,\n  tracking: PropTypes.string,\n  onError: PropTypes.func,\n  onPress: PropTypes.func,\n  onSuccess: PropTypes.func,\n};\n\nexport { ButtonPayment };\n"],"mappings":"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"}

package/build/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.js

@@ -28,6 +28,7 @@ const FormCheckout = _ref => {
     translate
   } = (0, _locale.useLocale)();
   const [busy, setBusy] = (0, _react.useState)(false);
+  const [focus, setFocus] = (0, _react.useState)();
   const [form, setForm] = (0, _react.useState)({});
   const [formError, setFormError] = (0, _react.useState)({});
   const [ready, setReady] = (0, _react.useState)(false);
@@ -44,17 +45,35 @@ const FormCheckout = _ref => {
     const {
       Frames
     } = window || {};
-    const handleValidationChanged = _ref2 => {
+    const handleBlur = _ref2 => {
+      let {
+        element
+      } = _ref2;
+      return handleLeave(element);
+    };
+    const handleFocus = _ref3 => {
+      let {
+        element
+      } = _ref3;
+      return handleEnter(element);
+    };
+    const handleValidationChanged = _ref4 => {
       let {
         element,
+        isEmpty,
         isValid
-      } = _ref2;
-      return handleError(element, !isValid);
+      } = _ref4;
+      handleChange(element, isEmpty ? undefined : 'value');
+      handleError(element, !isValid);
     };
+    Frames.addEventHandler(Frames.Events.FRAME_BLUR, handleBlur);
+    Frames.addEventHandler(Frames.Events.FRAME_FOCUS, handleFocus);
     Frames.addEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);
     Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);
     Frames.addEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);
     return () => {
+      Frames.removeEventHandler(Frames.Events.FRAME_BLUR, handleBlur);
+      Frames.removeEventHandler(Frames.Events.FRAME_FOCUS, handleFocus);
       Frames.removeEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);
       Frames.removeEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);
       Frames.removeEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);
@@ -75,7 +94,7 @@ const FormCheckout = _ref => {
       ..._FormCheckout.FRAME
     });
     onSuccess({
-      ...form,
+      name: form === null || form === void 0 ? void 0 : form.name,
       token
     });
   };
@@ -104,6 +123,14 @@ const FormCheckout = _ref => {
       [field]: value
     });
   };
+  const handleEnter = field => setFocus(focus => ({
+    ...focus,
+    [field]: true
+  }));
+  const handleLeave = field => setFocus(focus => ({
+    ...focus,
+    [field]: false
+  }));
   const handleLoad = () => {
     var _window$Frames3;
     (_window$Frames3 = window.Frames) === null || _window$Frames3 === void 0 ? void 0 : _window$Frames3.init({
@@ -131,16 +158,22 @@ const FormCheckout = _ref => {
   }, translate(_FormCheckout2.L10N.LABEL_SECURE_PAGE)), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     label: translate(_FormCheckout2.L10N.LABEL_CARD_NAME),
     error: formError.name,
-    success: formError.name === false
+    focus: focus === null || focus === void 0 ? void 0 : focus.name,
+    success: formError.name === false,
+    value: form.name
   }, /*#__PURE__*/_react.default.createElement(_ui.Input, {
     name: "name",
     value: form.name,
     onChange: value => handleChange('name', value),
+    onEnter: () => handleEnter('name'),
+    onLeave: () => handleLeave('name'),
     className: style.name
   })), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     label: translate(_FormCheckout2.L10N.LABEL_CARD_NUMBER),
     error: formError['card-number'],
-    success: formError['card-number'] === false
+    focus: focus === null || focus === void 0 ? void 0 : focus['card-number'],
+    success: formError['card-number'] === false,
+    value: form === null || form === void 0 ? void 0 : form['card-number']
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _ui.styles)(style.frame, 'card-number-frame')
   })), /*#__PURE__*/_react.default.createElement(_ui.View, {
@@ -148,13 +181,17 @@ const FormCheckout = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     label: translate(_FormCheckout2.L10N.LABEL_EXPIRATION),
     error: formError['expiry-date'],
-    success: formError['expiry-date'] === false
+    focus: focus === null || focus === void 0 ? void 0 : focus['expiry-date'],
+    success: formError['expiry-date'] === false,
+    value: form === null || form === void 0 ? void 0 : form['expiry-date']
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _ui.styles)(style.frame, 'expiry-date-frame')
   })), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     label: translate(_FormCheckout2.L10N.LABEL_CVV),
     error: formError['cvv'],
+    focus: focus === null || focus === void 0 ? void 0 : focus['cvv'],
     success: formError['cvv'] === false,
+    value: form === null || form === void 0 ? void 0 : form['cvv'],
     className: style.inputCVV
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _ui.styles)(style.frame, 'cvv-frame')

package/build/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckout.js","names":["_locale","require","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_FormCheckout","_FormCheckout2","style","_helpers","_helpers2","_InputField","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","FormCheckout","_ref","publicKey","process","env","PROVIDER_CHECKOUT_PUBLICKEY","onError","onSuccess","others","translate","useLocale","busy","setBusy","useState","form","setForm","formError","setFormError","ready","setReady","responseError","setResponseError","useEffect","loadScript","id","name","onLoad","handleLoad","Frames","window","handleValidationChanged","_ref2","element","isValid","handleError","addEventHandler","Events","CARD_TOKENIZED","handleCardTokenized","CARD_TOKENIZATION_FAILED","handleCardTokenizedFailed","FRAME_VALIDATION_CHANGED","removeEventHandler","_window$Frames","token","arguments","length","undefined","init","FRAME","_window$Frames2","error","enableSubmitForm","handleChange","field","value","_window$Frames3","getStyle","handlePress","cardholder","submitCard","hasError","values","FIELDS_COUNT","some","createElement","View","Text","action","className","description","L10N","LABEL_SECURE_PAGE","InputField","label","LABEL_CARD_NAME","success","Input","onChange","LABEL_CARD_NUMBER","styles","frame","row","LABEL_EXPIRATION","LABEL_CVV","inputCVV","Notification","small","wide","NOTIFICATION_ERROR_CHECKOUT","Button","disabled","large","onPress","button","ACTION_PAY","exports","displayName","propTypes","PropTypes","string","isRequired","func"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.jsx"],"sourcesContent":["import { useLocale } from '@mirai/locale';\nimport { Button, Input, Notification, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { FIELDS_COUNT, FRAME } from './FormCheckout.constants';\nimport { L10N } from './FormCheckout.l10n';\nimport * as style from './FormCheckout.module.css';\nimport { getStyle } from './helpers';\nimport { loadScript } from '../../helpers';\nimport { InputField } from '../InputField';\n\nexport const FormCheckout = ({\n  publicKey = process.env.PROVIDER_CHECKOUT_PUBLICKEY,\n  onError = () => {},\n  onSuccess = () => {},\n  ...others\n}) => {\n  const { translate } = useLocale();\n\n  const [busy, setBusy] = useState(false);\n  const [form, setForm] = useState({});\n  const [formError, setFormError] = useState({});\n  const [ready, setReady] = useState(false);\n  const [responseError, setResponseError] = useState();\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => loadScript({ id: 'checkoutScript', name: 'framesv2.min.js', onLoad: handleLoad }), []);\n\n  useEffect(() => {\n    if (!ready) return;\n\n    const { Frames } = window || {};\n    const handleValidationChanged = ({ element, isValid }) => handleError(element, !isValid);\n\n    Frames.addEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);\n    Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);\n    Frames.addEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);\n\n    return () => {\n      Frames.removeEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);\n      Frames.removeEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);\n      Frames.removeEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [form, formError, ready]);\n\n  const handleCardTokenized = ({ token } = {}) => {\n    setBusy(false);\n    if (!token) return;\n\n    setForm({});\n    setFormError({});\n    window.Frames?.init({ publicKey, ...FRAME });\n    onSuccess({ ...form, token });\n  };\n\n  const handleCardTokenizedFailed = (error = {}) => {\n    setBusy(false);\n    setResponseError(error);\n    window.Frames?.enableSubmitForm();\n    onError(error);\n  };\n\n  const handleChange = (field, value = '') => {\n    setForm({ ...form, [field]: value });\n    setFormError({ ...formError, [field]: value.length === 0 });\n  };\n\n  const handleError = (field, value) => {\n    setFormError({ ...formError, [field]: value });\n  };\n\n  const handleLoad = () => {\n    window.Frames?.init({ publicKey, ...FRAME, ...getStyle() });\n    setReady(true);\n  };\n\n  const handlePress = () => {\n    const { Frames } = window || {};\n    setBusy(true);\n    setResponseError();\n    Frames.cardholder = {\n      name: form.name,\n    };\n    Frames.submitCard();\n  };\n\n  const hasError =\n    Object.values(formError).length < FIELDS_COUNT || Object.values(formError).some((value) => value === true);\n\n  return (\n    <View {...others}>\n      <Text action className={style.description}>\n        {translate(L10N.LABEL_SECURE_PAGE)}\n      </Text>\n\n      <InputField label={translate(L10N.LABEL_CARD_NAME)} error={formError.name} success={formError.name === false}>\n        <Input name=\"name\" value={form.name} onChange={(value) => handleChange('name', value)} className={style.name} />\n      </InputField>\n      <InputField\n        label={translate(L10N.LABEL_CARD_NUMBER)}\n        error={formError['card-number']}\n        success={formError['card-number'] === false}\n      >\n        <div className={styles(style.frame, 'card-number-frame')} />\n      </InputField>\n      <View row>\n        <InputField\n          label={translate(L10N.LABEL_EXPIRATION)}\n          error={formError['expiry-date']}\n          success={formError['expiry-date'] === false}\n        >\n          <div className={styles(style.frame, 'expiry-date-frame')} />\n        </InputField>\n\n        <InputField\n          label={translate(L10N.LABEL_CVV)}\n          error={formError['cvv']}\n          success={formError['cvv'] === false}\n          className={style.inputCVV}\n        >\n          <div className={styles(style.frame, 'cvv-frame')} />\n        </InputField>\n      </View>\n\n      {responseError && (\n        <Notification error small wide>\n          {translate(L10N.NOTIFICATION_ERROR_CHECKOUT)}\n        </Notification>\n      )}\n\n      <Button busy={busy} disabled={hasError} large wide onPress={handlePress} className={style.button}>\n        {translate(L10N.ACTION_PAY)}\n      </Button>\n    </View>\n  );\n};\n\nFormCheckout.displayName = 'Mirai:Payments:ButtonPayment:FormCheckout';\n\nFormCheckout.propTypes = {\n  publicKey: PropTypes.string.isRequired,\n  onError: PropTypes.func,\n  onSuccess: PropTypes.func,\n};\n"],"mappings":"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"}
+{"version":3,"file":"FormCheckout.js","names":["_locale","require","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_FormCheckout","_FormCheckout2","style","_helpers","_helpers2","_InputField","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","FormCheckout","_ref","publicKey","process","env","PROVIDER_CHECKOUT_PUBLICKEY","onError","onSuccess","others","translate","useLocale","busy","setBusy","useState","focus","setFocus","form","setForm","formError","setFormError","ready","setReady","responseError","setResponseError","useEffect","loadScript","id","name","onLoad","handleLoad","Frames","window","handleBlur","_ref2","element","handleLeave","handleFocus","_ref3","handleEnter","handleValidationChanged","_ref4","isEmpty","isValid","handleChange","undefined","handleError","addEventHandler","Events","FRAME_BLUR","FRAME_FOCUS","CARD_TOKENIZED","handleCardTokenized","CARD_TOKENIZATION_FAILED","handleCardTokenizedFailed","FRAME_VALIDATION_CHANGED","removeEventHandler","_window$Frames","token","arguments","length","init","FRAME","_window$Frames2","error","enableSubmitForm","field","value","_window$Frames3","getStyle","handlePress","cardholder","submitCard","hasError","values","FIELDS_COUNT","some","createElement","View","Text","action","className","description","L10N","LABEL_SECURE_PAGE","InputField","label","LABEL_CARD_NAME","success","Input","onChange","onEnter","onLeave","LABEL_CARD_NUMBER","styles","frame","row","LABEL_EXPIRATION","LABEL_CVV","inputCVV","Notification","small","wide","NOTIFICATION_ERROR_CHECKOUT","Button","disabled","large","onPress","button","ACTION_PAY","exports","displayName","propTypes","PropTypes","string","isRequired","func"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.jsx"],"sourcesContent":["import { useLocale } from '@mirai/locale';\nimport { Button, Input, Notification, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { FIELDS_COUNT, FRAME } from './FormCheckout.constants';\nimport { L10N } from './FormCheckout.l10n';\nimport * as style from './FormCheckout.module.css';\nimport { getStyle } from './helpers';\nimport { loadScript } from '../../helpers';\nimport { InputField } from '../InputField';\n\nexport const FormCheckout = ({\n  publicKey = process.env.PROVIDER_CHECKOUT_PUBLICKEY,\n  onError = () => {},\n  onSuccess = () => {},\n  ...others\n}) => {\n  const { translate } = useLocale();\n\n  const [busy, setBusy] = useState(false);\n  const [focus, setFocus] = useState();\n  const [form, setForm] = useState({});\n  const [formError, setFormError] = useState({});\n  const [ready, setReady] = useState(false);\n  const [responseError, setResponseError] = useState();\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => loadScript({ id: 'checkoutScript', name: 'framesv2.min.js', onLoad: handleLoad }), []);\n\n  useEffect(() => {\n    if (!ready) return;\n\n    const { Frames } = window || {};\n\n    const handleBlur = ({ element }) => handleLeave(element);\n\n    const handleFocus = ({ element }) => handleEnter(element);\n\n    const handleValidationChanged = ({ element, isEmpty, isValid }) => {\n      handleChange(element, isEmpty ? undefined : 'value');\n      handleError(element, !isValid);\n    };\n\n    Frames.addEventHandler(Frames.Events.FRAME_BLUR, handleBlur);\n    Frames.addEventHandler(Frames.Events.FRAME_FOCUS, handleFocus);\n    Frames.addEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);\n    Frames.addEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);\n    Frames.addEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);\n\n    return () => {\n      Frames.removeEventHandler(Frames.Events.FRAME_BLUR, handleBlur);\n      Frames.removeEventHandler(Frames.Events.FRAME_FOCUS, handleFocus);\n      Frames.removeEventHandler(Frames.Events.CARD_TOKENIZED, handleCardTokenized);\n      Frames.removeEventHandler(Frames.Events.CARD_TOKENIZATION_FAILED, handleCardTokenizedFailed);\n      Frames.removeEventHandler(Frames.Events.FRAME_VALIDATION_CHANGED, handleValidationChanged);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [form, formError, ready]);\n\n  const handleCardTokenized = ({ token } = {}) => {\n    setBusy(false);\n    if (!token) return;\n\n    setForm({});\n    setFormError({});\n    window.Frames?.init({ publicKey, ...FRAME });\n    onSuccess({ name: form?.name, token });\n  };\n\n  const handleCardTokenizedFailed = (error = {}) => {\n    setBusy(false);\n    setResponseError(error);\n    window.Frames?.enableSubmitForm();\n    onError(error);\n  };\n\n  const handleChange = (field, value = '') => {\n    setForm({ ...form, [field]: value });\n    setFormError({ ...formError, [field]: value.length === 0 });\n  };\n\n  const handleError = (field, value) => {\n    setFormError({ ...formError, [field]: value });\n  };\n\n  const handleEnter = (field) => setFocus((focus) => ({ ...focus, [field]: true }));\n\n  const handleLeave = (field) => setFocus((focus) => ({ ...focus, [field]: false }));\n\n  const handleLoad = () => {\n    window.Frames?.init({ publicKey, ...FRAME, ...getStyle() });\n    setReady(true);\n  };\n\n  const handlePress = () => {\n    const { Frames } = window || {};\n    setBusy(true);\n    setResponseError();\n    Frames.cardholder = {\n      name: form.name,\n    };\n    Frames.submitCard();\n  };\n\n  const hasError =\n    Object.values(formError).length < FIELDS_COUNT || Object.values(formError).some((value) => value === true);\n\n  return (\n    <View {...others}>\n      <Text action className={style.description}>\n        {translate(L10N.LABEL_SECURE_PAGE)}\n      </Text>\n\n      <InputField\n        label={translate(L10N.LABEL_CARD_NAME)}\n        error={formError.name}\n        focus={focus?.name}\n        success={formError.name === false}\n        value={form.name}\n      >\n        <Input\n          name=\"name\"\n          value={form.name}\n          onChange={(value) => handleChange('name', value)}\n          onEnter={() => handleEnter('name')}\n          onLeave={() => handleLeave('name')}\n          className={style.name}\n        />\n      </InputField>\n      <InputField\n        label={translate(L10N.LABEL_CARD_NUMBER)}\n        error={formError['card-number']}\n        focus={focus?.['card-number']}\n        success={formError['card-number'] === false}\n        value={form?.['card-number']}\n      >\n        <div className={styles(style.frame, 'card-number-frame')} />\n      </InputField>\n      <View row>\n        <InputField\n          label={translate(L10N.LABEL_EXPIRATION)}\n          error={formError['expiry-date']}\n          focus={focus?.['expiry-date']}\n          success={formError['expiry-date'] === false}\n          value={form?.['expiry-date']}\n        >\n          <div className={styles(style.frame, 'expiry-date-frame')} />\n        </InputField>\n\n        <InputField\n          label={translate(L10N.LABEL_CVV)}\n          error={formError['cvv']}\n          focus={focus?.['cvv']}\n          success={formError['cvv'] === false}\n          value={form?.['cvv']}\n          className={style.inputCVV}\n        >\n          <div className={styles(style.frame, 'cvv-frame')} />\n        </InputField>\n      </View>\n\n      {responseError && (\n        <Notification error small wide>\n          {translate(L10N.NOTIFICATION_ERROR_CHECKOUT)}\n        </Notification>\n      )}\n\n      <Button busy={busy} disabled={hasError} large wide onPress={handlePress} className={style.button}>\n        {translate(L10N.ACTION_PAY)}\n      </Button>\n    </View>\n  );\n};\n\nFormCheckout.displayName = 'Mirai:Payments:ButtonPayment:FormCheckout';\n\nFormCheckout.propTypes = {\n  publicKey: PropTypes.string.isRequired,\n  onError: PropTypes.func,\n  onSuccess: PropTypes.func,\n};\n"],"mappings":"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"}

package/build/components/__shared__/ButtonPayment/components/FormCheckout/FormCheckout.module.css

@@ -16,6 +16,7 @@
   direction: var(--mirai-ui-text-direction);
   padding-top: var(--mirai-ui-space-S) !important;
   outline: 0;
+  height: calc(var(--mirai-ui-space-XS) + var(--mirai-ui-space-L));
 }
 
 .frame::placeholder {

package/build/components/__shared__/ButtonPayment/components/FormPaycomet/FormPaycomet.js

@@ -16,8 +16,7 @@ var _InputField = require("../InputField");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/* eslint-disable react/no-unknown-property */
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* eslint-disable react/no-unknown-property */
 const FormPaycomet = _ref => {
   let {
     currencyDecimals = 2,
@@ -101,19 +100,20 @@ const FormPaycomet = _ref => {
     const {
       inputColor,
       inputFontSize,
-      inputNumberValueWidth,
       font
     } = _ui.Theme.get();
     return {
-      cvv: "border:0px;color:".concat(inputColor, ";font-family:").concat(font, ";font-size:").concat(inputFontSize, ";height:").concat(inputNumberValueWidth, ";padding:0!important;"),
-      card_number: "border:0px;background-image:none;color:".concat(inputColor, ";font-family:").concat(font, ";font-size:").concat(inputFontSize, ";height:").concat(inputNumberValueWidth, ";outline: 0;padding:0!important;")
+      card_number: "border:0px;background-image:none;color:".concat(inputColor, ";font-family:").concat(font, ";font-size:").concat(inputFontSize, ";outline: 0;padding:0!important;"),
+      cvv: "border:0px;color:".concat(inputColor, ";font-family:").concat(font, ";font-size:").concat(inputFontSize, ";padding:0!important;")
     };
   };
   const {
     card_number,
     cvv
   } = getInlineStyle();
-  return /*#__PURE__*/_react.default.createElement(_ui.View, others, /*#__PURE__*/_react.default.createElement(_ui.Text, {
+  return /*#__PURE__*/_react.default.createElement(_ui.View, _extends({}, others, {
+    className: (0, _ui.styles)(style.container, others.className)
+  }), /*#__PURE__*/_react.default.createElement(_ui.Text, {
     action: true
   }, translate(_FormPaycomet2.L10N.LABEL_SECURE_PAGE)), /*#__PURE__*/_react.default.createElement("form", {
     ref: formRef,
@@ -135,12 +135,14 @@ const FormPaycomet = _ref => {
     name: "paytpvToken",
     value: ""
   }), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
-    label: translate(_FormPaycomet2.L10N.LABEL_CARD_NAME)
+    label: translate(_FormPaycomet2.L10N.LABEL_CARD_NAME),
+    value: "value"
   }, /*#__PURE__*/_react.default.createElement("input", {
     "data-paycomet": "cardHolderName",
     className: style.inputName
   })), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
-    label: translate(_FormPaycomet2.L10N.LABEL_CARD_NUMBER)
+    label: translate(_FormPaycomet2.L10N.LABEL_CARD_NUMBER),
+    value: "value"
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "paycomet-pan",
     className: style.inputName
@@ -151,7 +153,8 @@ const FormPaycomet = _ref => {
   })), /*#__PURE__*/_react.default.createElement(_ui.View, {
     row: true
   }, /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
-    label: translate(_FormPaycomet2.L10N.LABEL_EXPIRATION)
+    label: translate(_FormPaycomet2.L10N.LABEL_EXPIRATION),
+    value: "value"
   }, /*#__PURE__*/_react.default.createElement(_ui.View, {
     row: true,
     className: style.inputName
@@ -171,7 +174,8 @@ const FormPaycomet = _ref => {
     className: style.inputExpire
   }))), /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     label: translate(_FormPaycomet2.L10N.LABEL_CVV),
-    className: style.inputCVV
+    className: style.inputCVV,
+    value: "value"
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "paycomet-cvc2",
     "data-paycomet": "cvc2",
@@ -187,8 +191,7 @@ const FormPaycomet = _ref => {
     preventDefault: false
   }, translate(_FormPaycomet2.L10N.ACTION_PAY))), error && /*#__PURE__*/_react.default.createElement(_ui.Notification, {
     error: true,
-    wide: true,
-    className: style.error
+    wide: true
   }, error), /*#__PURE__*/_react.default.createElement("div", {
     ref: errorRef,
     id: "paymentErrorMsg",

package/build/components/__shared__/ButtonPayment/components/FormPaycomet/FormPaycomet.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormPaycomet.js","names":["_locale","require","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_FormPaycomet","_FormPaycomet2","style","_helpers","_InputField","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","FormPaycomet","_ref","currencyDecimals","info","amount","publicKey","process","env","PROVIDER_PAYCOMET_PUBLICKEY","onSuccess","others","locale","translate","useLocale","formRef","useRef","tokenRef","errorRef","useMutationObserver","current","value","nextToken","document","getElementById","length","setToken","attributes","textContent","nextError","setError","setBusy","busy","useState","token","error","expire","setExpire","useEffect","exists","SCRIPT_ID","script","createElement","id","src","concat","PROVIDER_PAYCOMET_SCRIPT","split","head","appendChild","el","parentNode","removeChild","handleExpireChange","event","name","target","replace","handleCardTokenized","preventDefault","handlePress","stopPropagation","submit","getInlineStyle","inputColor","inputFontSize","inputNumberValueWidth","font","Theme","cvv","card_number","View","Text","action","L10N","LABEL_SECURE_PAGE","ref","onSubmit","type","Math","pow","toFixed","InputField","label","LABEL_CARD_NAME","className","inputName","LABEL_CARD_NUMBER","LABEL_CARD_NUMBER_PLACEHOLDER","row","LABEL_EXPIRATION","onChange","month","maxLength","inputExpire","year","LABEL_CVV","inputCVV","Button","large","wide","onPress","ACTION_PAY","Notification","display","exports","displayName","propTypes","PropTypes","number","shape","string","isRequired","func"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/FormPaycomet/FormPaycomet.jsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\nimport { useLocale } from '@mirai/locale';\nimport { Button, Notification, Text, Theme, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { SCRIPT_ID } from './FormPaycomet.constants';\nimport { L10N } from './FormPaycomet.l10n';\nimport * as style from './FormPaycomet.module.css';\nimport { useMutationObserver } from './helpers';\nimport { InputField } from '../InputField';\n\nexport const FormPaycomet = ({\n  currencyDecimals = 2,\n  info: { amount } = {},\n  publicKey = process.env.PROVIDER_PAYCOMET_PUBLICKEY,\n  onSuccess = () => {},\n  ...others\n}) => {\n  const { locale, translate } = useLocale();\n\n  const formRef = useRef();\n  const tokenRef = useRef();\n  const errorRef = useRef();\n\n  useMutationObserver(\n    tokenRef.current,\n    () => {\n      const { value: nextToken = '' } = document.getElementById('paytpvToken') || {};\n      if (nextToken.length > 0) setToken(nextToken);\n    },\n    { attributes: true },\n  );\n\n  useMutationObserver(errorRef.current, () => {\n    const { textContent: nextError = '' } = document.getElementById('paymentErrorMsg') || {};\n    if (nextError?.length > 0) {\n      setError(nextError);\n      setBusy(false);\n    }\n  });\n\n  const [busy, setBusy] = useState(false);\n  const [token, setToken] = useState();\n  const [error, setError] = useState();\n  const [expire, setExpire] = useState({});\n\n  useEffect(() => {\n    const exists = document.getElementById(SCRIPT_ID);\n    if (!exists) {\n      const script = document.createElement('script');\n      script.id = SCRIPT_ID;\n      script.src = `${process.env.PROVIDER_PAYCOMET_SCRIPT}?lang=${locale.split('-')[0]}`;\n\n      document.head.appendChild(script);\n    }\n    return () => {\n      const el = document.getElementById(SCRIPT_ID);\n      if (el) el.parentNode.removeChild(el);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!token) return;\n\n    setBusy(false);\n    setError();\n    onSuccess({ token });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [token]);\n\n  const handleExpireChange = (event) => {\n    const { name, value = '' } = event.target || {};\n    setExpire({ ...expire, [name]: value.replace(/[^\\d]/g, '') });\n  };\n\n  const handleCardTokenized = (event) => {\n    event.preventDefault();\n    setBusy(true);\n  };\n\n  const handlePress = (event) => {\n    event.stopPropagation();\n    formRef.current.submit();\n  };\n\n  const getInlineStyle = () => {\n    const { inputColor, inputFontSize, inputNumberValueWidth, font } = Theme.get();\n    return {\n      cvv: `border:0px;color:${inputColor};font-family:${font};font-size:${inputFontSize};height:${inputNumberValueWidth};padding:0!important;`,\n      card_number: `border:0px;background-image:none;color:${inputColor};font-family:${font};font-size:${inputFontSize};height:${inputNumberValueWidth};outline: 0;padding:0!important;`,\n    };\n  };\n  const { card_number, cvv } = getInlineStyle();\n\n  return (\n    <View {...others}>\n      <Text action>{translate(L10N.LABEL_SECURE_PAGE)}</Text>\n      <form ref={formRef} id=\"paycometPaymentForm\" onSubmit={handleCardTokenized} action=\"javascript:void(0)\">\n        <input type=\"hidden\" name=\"amount\" value={(amount * Math.pow(10, currencyDecimals)).toFixed()} />\n        <input type=\"hidden\" data-paycomet=\"jetID\" value={publicKey} />\n        <input ref={tokenRef} type=\"hidden\" id=\"paytpvToken\" name=\"paytpvToken\" value=\"\" />\n        <InputField label={translate(L10N.LABEL_CARD_NAME)}>\n          <input data-paycomet=\"cardHolderName\" className={style.inputName} />\n        </InputField>\n        <InputField label={translate(L10N.LABEL_CARD_NUMBER)}>\n          <div id=\"paycomet-pan\" className={style.inputName}></div>\n          <input\n            paycomet-style={card_number}\n            paycomet-name=\"pan\"\n            paycomet-placeholder={translate(L10N.LABEL_CARD_NUMBER_PLACEHOLDER)}\n          />\n        </InputField>\n        <View row>\n          <InputField label={translate(L10N.LABEL_EXPIRATION)}>\n            <View row className={style.inputName}>\n              <input\n                onChange={handleExpireChange}\n                value={expire.month}\n                name=\"month\"\n                data-paycomet=\"dateMonth\"\n                maxLength={2}\n                className={style.inputExpire}\n              />\n              /\n              <input\n                onChange={handleExpireChange}\n                value={expire.year}\n                name=\"year\"\n                data-paycomet=\"dateYear\"\n                maxLength={2}\n                className={style.inputExpire}\n              />\n            </View>\n          </InputField>\n\n          <InputField label={translate(L10N.LABEL_CVV)} className={style.inputCVV}>\n            <div id=\"paycomet-cvc2\" data-paycomet=\"cvc2\" className={style.inputName}></div>\n            <input paycomet-name=\"cvc2\" paycomet-style={cvv} />\n          </InputField>\n        </View>\n        <Button busy={busy} large wide onPress={handlePress} preventDefault={false}>\n          {translate(L10N.ACTION_PAY)}\n        </Button>\n      </form>\n      {error && (\n        <Notification error wide className={style.error}>\n          {error}\n        </Notification>\n      )}\n      <div ref={errorRef} id=\"paymentErrorMsg\" style={{ display: 'none' }}></div>\n    </View>\n  );\n};\n\nFormPaycomet.displayName = 'Mirai:Payments:ButtonPayment:FormPaycomet';\n\nFormPaycomet.propTypes = {\n  currencyDecimals: PropTypes.number,\n  info: PropTypes.shape({\n    amount: PropTypes.number,\n  }),\n  publicKey: PropTypes.string.isRequired,\n  onSuccess: PropTypes.func,\n};\n"],"mappings":";;;;;;AACA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,GAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAC,uBAAA,CAAAL,OAAA;AAEA,IAAAM,aAAA,GAAAN,OAAA;AACA,IAAAO,cAAA,GAAAP,OAAA;AACA,IAAAQ,KAAA,GAAAH,uBAAA,CAAAL,OAAA;AACA,IAAAS,QAAA,GAAAT,OAAA;AACA,IAAAU,WAAA,GAAAV,OAAA;AAA2C,SAAAW,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAjB,uBAAA6B,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAhB,UAAA,GAAAgB,GAAA,KAAAf,OAAA,EAAAe,GAAA;AAV3C;;AAYO,MAAMC,YAAY,GAAGC,IAAA,IAMtB;EAAA,IANuB;IAC3BC,gBAAgB,GAAG,CAAC;IACpBC,IAAI,EAAE;MAAEC;IAAO,CAAC,GAAG,CAAC,CAAC;IACrBC,SAAS,GAAGC,OAAO,CAACC,GAAG,CAACC,2BAA2B;IACnDC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;IACpB,GAAGC;EACL,CAAC,GAAAT,IAAA;EACC,MAAM;IAAEU,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,iBAAS,EAAC,CAAC;EAEzC,MAAMC,OAAO,GAAG,IAAAC,aAAM,EAAC,CAAC;EACxB,MAAMC,QAAQ,GAAG,IAAAD,aAAM,EAAC,CAAC;EACzB,MAAME,QAAQ,GAAG,IAAAF,aAAM,EAAC,CAAC;EAEzB,IAAAG,4BAAmB,EACjBF,QAAQ,CAACG,OAAO,EAChB,MAAM;IACJ,MAAM;MAAEC,KAAK,EAAEC,SAAS,GAAG;IAAG,CAAC,GAAGC,QAAQ,CAACC,cAAc,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC9E,IAAIF,SAAS,CAACG,MAAM,GAAG,CAAC,EAAEC,QAAQ,CAACJ,SAAS,CAAC;EAC/C,CAAC,EACD;IAAEK,UAAU,EAAE;EAAK,CACrB,CAAC;EAED,IAAAR,4BAAmB,EAACD,QAAQ,CAACE,OAAO,EAAE,MAAM;IAC1C,MAAM;MAAEQ,WAAW,EAAEC,SAAS,GAAG;IAAG,CAAC,GAAGN,QAAQ,CAACC,cAAc,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACxF,IAAI,CAAAK,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEJ,MAAM,IAAG,CAAC,EAAE;MACzBK,QAAQ,CAACD,SAAS,CAAC;MACnBE,OAAO,CAAC,KAAK,CAAC;IAChB;EACF,CAAC,CAAC;EAEF,MAAM,CAACC,IAAI,EAAED,OAAO,CAAC,GAAG,IAAAE,eAAQ,EAAC,KAAK,CAAC;EACvC,MAAM,CAACC,KAAK,EAAER,QAAQ,CAAC,GAAG,IAAAO,eAAQ,EAAC,CAAC;EACpC,MAAM,CAACE,KAAK,EAAEL,QAAQ,CAAC,GAAG,IAAAG,eAAQ,EAAC,CAAC;EACpC,MAAM,CAACG,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAJ,eAAQ,EAAC,CAAC,CAAC,CAAC;EAExC,IAAAK,gBAAS,EAAC,MAAM;IACd,MAAMC,MAAM,GAAGhB,QAAQ,CAACC,cAAc,CAACgB,uBAAS,CAAC;IACjD,IAAI,CAACD,MAAM,EAAE;MACX,MAAME,MAAM,GAAGlB,QAAQ,CAACmB,aAAa,CAAC,QAAQ,CAAC;MAC/CD,MAAM,CAACE,EAAE,GAAGH,uBAAS;MACrBC,MAAM,CAACG,GAAG,MAAAC,MAAA,CAAMtC,OAAO,CAACC,GAAG,CAACsC,wBAAwB,YAAAD,MAAA,CAASjC,MAAM,CAACmC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAE;MAEnFxB,QAAQ,CAACyB,IAAI,CAACC,WAAW,CAACR,MAAM,CAAC;IACnC;IACA,OAAO,MAAM;MACX,MAAMS,EAAE,GAAG3B,QAAQ,CAACC,cAAc,CAACgB,uBAAS,CAAC;MAC7C,IAAIU,EAAE,EAAEA,EAAE,CAACC,UAAU,CAACC,WAAW,CAACF,EAAE,CAAC;IACvC,CAAC;IACD;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAZ,gBAAS,EAAC,MAAM;IACd,IAAI,CAACJ,KAAK,EAAE;IAEZH,OAAO,CAAC,KAAK,CAAC;IACdD,QAAQ,CAAC,CAAC;IACVpB,SAAS,CAAC;MAAEwB;IAAM,CAAC,CAAC;IACpB;EACF,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAMmB,kBAAkB,GAAIC,KAAK,IAAK;IACpC,MAAM;MAAEC,IAAI;MAAElC,KAAK,GAAG;IAAG,CAAC,GAAGiC,KAAK,CAACE,MAAM,IAAI,CAAC,CAAC;IAC/CnB,SAAS,CAAC;MAAE,GAAGD,MAAM;MAAE,CAACmB,IAAI,GAAGlC,KAAK,CAACoC,OAAO,CAAC,QAAQ,EAAE,EAAE;IAAE,CAAC,CAAC;EAC/D,CAAC;EAED,MAAMC,mBAAmB,GAAIJ,KAAK,IAAK;IACrCA,KAAK,CAACK,cAAc,CAAC,CAAC;IACtB5B,OAAO,CAAC,IAAI,CAAC;EACf,CAAC;EAED,MAAM6B,WAAW,GAAIN,KAAK,IAAK;IAC7BA,KAAK,CAACO,eAAe,CAAC,CAAC;IACvB9C,OAAO,CAACK,OAAO,CAAC0C,MAAM,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,cAAc,GAAGA,CAAA,KAAM;IAC3B,MAAM;MAAEC,UAAU;MAAEC,aAAa;MAAEC,qBAAqB;MAAEC;IAAK,CAAC,GAAGC,SAAK,CAACjF,GAAG,CAAC,CAAC;IAC9E,OAAO;MACLkF,GAAG,sBAAAxB,MAAA,CAAsBmB,UAAU,mBAAAnB,MAAA,CAAgBsB,IAAI,iBAAAtB,MAAA,CAAcoB,aAAa,cAAApB,MAAA,CAAWqB,qBAAqB,0BAAuB;MACzII,WAAW,4CAAAzB,MAAA,CAA4CmB,UAAU,mBAAAnB,MAAA,CAAgBsB,IAAI,iBAAAtB,MAAA,CAAcoB,aAAa,cAAApB,MAAA,CAAWqB,qBAAqB;IAClJ,CAAC;EACH,CAAC;EACD,MAAM;IAAEI,WAAW;IAAED;EAAI,CAAC,GAAGN,cAAc,CAAC,CAAC;EAE7C,oBACE3F,MAAA,CAAAa,OAAA,CAAAyD,aAAA,CAACzE,GAAA,CAAAsG,IAAI,EAAK5D,MAAM,eACdvC,MAAA,CAAAa,OAAA,CAAAyD,aAAA,CAACzE,GAAA,CAAAuG,IAAI;IAACC,MAAM;EAAA,GAAE5D,SAAS,CAAC6D,mBAAI,CAACC,iBAAiB,CAAQ,CAAC,eACvDvG,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IAAMkC,GAAG,EAAE7D,OAAQ;IAAC4B,EAAE,EAAC,qBAAqB;IAACkC,QAAQ,EAAEnB,mBAAoB;IAACe,MAAM,EAAC;EAAoB,gBACrGrG,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IAAOoC,IAAI,EAAC,QAAQ;IAACvB,IAAI,EAAC,QAAQ;IAAClC,KAAK,EAAE,CAAChB,MAAM,GAAG0E,IAAI,CAACC,GAAG,CAAC,EAAE,EAAE7E,gBAAgB,CAAC,EAAE8E,OAAO,CAAC;EAAE,CAAE,CAAC,eACjG7G,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IAAOoC,IAAI,EAAC,QAAQ;IAAC,iBAAc,OAAO;IAACzD,KAAK,EAAEf;EAAU,CAAE,CAAC,eAC/DlC,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IAAOkC,GAAG,EAAE3D,QAAS;IAAC6D,IAAI,EAAC,QAAQ;IAACnC,EAAE,EAAC,aAAa;IAACY,IAAI,EAAC,aAAa;IAAClC,KAAK,EAAC;EAAE,CAAE,CAAC,eACnFjD,MAAA,CAAAa,OAAA,CAAAyD,aAAA,CAAChE,WAAA,CAAAwG,UAAU;IAACC,KAAK,EAAEtE,SAAS,CAAC6D,mBAAI,CAACU,eAAe;EAAE,gBACjDhH,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IAAO,iBAAc,gBAAgB;IAAC2C,SAAS,EAAE7G,KAAK,CAAC8G;EAAU,CAAE,CACzD,CAAC,eACblH,MAAA,CAAAa,OAAA,CAAAyD,aAAA,CAAChE,WAAA,CAAAwG,UAAU;IAACC,KAAK,EAAEtE,SAAS,CAAC6D,mBAAI,CAACa,iBAAiB;EAAE,gBACnDnH,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IAAKC,EAAE,EAAC,cAAc;IAAC0C,SAAS,EAAE7G,KAAK,CAAC8G;EAAU,CAAM,CAAC,eACzDlH,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IACE,kBAAgB4B,WAAY;IAC5B,iBAAc,KAAK;IACnB,wBAAsBzD,SAAS,CAAC6D,mBAAI,CAACc,6BAA6B;EAAE,CACrE,CACS,CAAC,eACbpH,MAAA,CAAAa,OAAA,CAAAyD,aAAA,CAACzE,GAAA,CAAAsG,IAAI;IAACkB,GAAG;EAAA,gBACPrH,MAAA,CAAAa,OAAA,CAAAyD,aAAA,CAAChE,WAAA,CAAAwG,UAAU;IAACC,KAAK,EAAEtE,SAAS,CAAC6D,mBAAI,CAACgB,gBAAgB;EAAE,gBAClDtH,MAAA,CAAAa,OAAA,CAAAyD,aAAA,CAACzE,GAAA,CAAAsG,IAAI;IAACkB,GAAG;IAACJ,SAAS,EAAE7G,KAAK,CAAC8G;EAAU,gBACnClH,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IACEiD,QAAQ,EAAEtC,kBAAmB;IAC7BhC,KAAK,EAAEe,MAAM,CAACwD,KAAM;IACpBrC,IAAI,EAAC,OAAO;IACZ,iBAAc,WAAW;IACzBsC,SAAS,EAAE,CAAE;IACbR,SAAS,EAAE7G,KAAK,CAACsH;EAAY,CAC9B,CAAC,KAEF,eAAA1H,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IACEiD,QAAQ,EAAEtC,kBAAmB;IAC7BhC,KAAK,EAAEe,MAAM,CAAC2D,IAAK;IACnBxC,IAAI,EAAC,MAAM;IACX,iBAAc,UAAU;IACxBsC,SAAS,EAAE,CAAE;IACbR,SAAS,EAAE7G,KAAK,CAACsH;EAAY,CAC9B,CACG,CACI,CAAC,eAEb1H,MAAA,CAAAa,OAAA,CAAAyD,aAAA,CAAChE,WAAA,CAAAwG,UAAU;IAACC,KAAK,EAAEtE,SAAS,CAAC6D,mBAAI,CAACsB,SAAS,CAAE;IAACX,SAAS,EAAE7G,KAAK,CAACyH;EAAS,gBACtE7H,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IAAKC,EAAE,EAAC,eAAe;IAAC,iBAAc,MAAM;IAAC0C,SAAS,EAAE7G,KAAK,CAAC8G;EAAU,CAAM,CAAC,eAC/ElH,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IAAO,iBAAc,MAAM;IAAC,kBAAgB2B;EAAI,CAAE,CACxC,CACR,CAAC,eACPjG,MAAA,CAAAa,OAAA,CAAAyD,aAAA,CAACzE,GAAA,CAAAiI,MAAM;IAAClE,IAAI,EAAEA,IAAK;IAACmE,KAAK;IAACC,IAAI;IAACC,OAAO,EAAEzC,WAAY;IAACD,cAAc,EAAE;EAAM,GACxE9C,SAAS,CAAC6D,mBAAI,CAAC4B,UAAU,CACpB,CACJ,CAAC,EACNnE,KAAK,iBACJ/D,MAAA,CAAAa,OAAA,CAAAyD,aAAA,CAACzE,GAAA,CAAAsI,YAAY;IAACpE,KAAK;IAACiE,IAAI;IAACf,SAAS,EAAE7G,KAAK,CAAC2D;EAAM,GAC7CA,KACW,CACf,eACD/D,MAAA,CAAAa,OAAA,CAAAyD,aAAA;IAAKkC,GAAG,EAAE1D,QAAS;IAACyB,EAAE,EAAC,iBAAiB;IAACnE,KAAK,EAAE;MAAEgI,OAAO,EAAE;IAAO;EAAE,CAAM,CACtE,CAAC;AAEX,CAAC;AAACC,OAAA,CAAAxG,YAAA,GAAAA,YAAA;AAEFA,YAAY,CAACyG,WAAW,GAAG,2CAA2C;AAEtEzG,YAAY,CAAC0G,SAAS,GAAG;EACvBxG,gBAAgB,EAAEyG,kBAAS,CAACC,MAAM;EAClCzG,IAAI,EAAEwG,kBAAS,CAACE,KAAK,CAAC;IACpBzG,MAAM,EAAEuG,kBAAS,CAACC;EACpB,CAAC,CAAC;EACFvG,SAAS,EAAEsG,kBAAS,CAACG,MAAM,CAACC,UAAU;EACtCtG,SAAS,EAAEkG,kBAAS,CAACK;AACvB,CAAC"}
+{"version":3,"file":"FormPaycomet.js","names":["_locale","require","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_FormPaycomet","_FormPaycomet2","style","_helpers","_InputField","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","FormPaycomet","_ref","currencyDecimals","info","amount","publicKey","process","env","PROVIDER_PAYCOMET_PUBLICKEY","onSuccess","others","locale","translate","useLocale","formRef","useRef","tokenRef","errorRef","useMutationObserver","current","value","nextToken","document","getElementById","setToken","attributes","textContent","nextError","setError","setBusy","busy","useState","token","error","expire","setExpire","useEffect","exists","SCRIPT_ID","script","createElement","id","src","concat","PROVIDER_PAYCOMET_SCRIPT","split","head","appendChild","el","parentNode","removeChild","handleExpireChange","event","name","replace","handleCardTokenized","preventDefault","handlePress","stopPropagation","submit","getInlineStyle","inputColor","inputFontSize","font","Theme","card_number","cvv","View","className","styles","container","Text","action","L10N","LABEL_SECURE_PAGE","ref","onSubmit","type","Math","pow","toFixed","InputField","label","LABEL_CARD_NAME","inputName","LABEL_CARD_NUMBER","LABEL_CARD_NUMBER_PLACEHOLDER","row","LABEL_EXPIRATION","onChange","month","maxLength","inputExpire","year","LABEL_CVV","inputCVV","Button","large","wide","onPress","ACTION_PAY","Notification","display","exports","displayName","propTypes","PropTypes","number","shape","string","isRequired","func"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/FormPaycomet/FormPaycomet.jsx"],"sourcesContent":["/* eslint-disable react/no-unknown-property */\nimport { useLocale } from '@mirai/locale';\nimport { Button, Notification, styles, Text, Theme, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { SCRIPT_ID } from './FormPaycomet.constants';\nimport { L10N } from './FormPaycomet.l10n';\nimport * as style from './FormPaycomet.module.css';\nimport { useMutationObserver } from './helpers';\nimport { InputField } from '../InputField';\n\nexport const FormPaycomet = ({\n  currencyDecimals = 2,\n  info: { amount } = {},\n  publicKey = process.env.PROVIDER_PAYCOMET_PUBLICKEY,\n  onSuccess = () => {},\n  ...others\n}) => {\n  const { locale, translate } = useLocale();\n\n  const formRef = useRef();\n  const tokenRef = useRef();\n  const errorRef = useRef();\n\n  useMutationObserver(\n    tokenRef.current,\n    () => {\n      const { value: nextToken = '' } = document.getElementById('paytpvToken') || {};\n      if (nextToken.length > 0) setToken(nextToken);\n    },\n    { attributes: true },\n  );\n\n  useMutationObserver(errorRef.current, () => {\n    const { textContent: nextError = '' } = document.getElementById('paymentErrorMsg') || {};\n    if (nextError?.length > 0) {\n      setError(nextError);\n      setBusy(false);\n    }\n  });\n\n  const [busy, setBusy] = useState(false);\n  const [token, setToken] = useState();\n  const [error, setError] = useState();\n  const [expire, setExpire] = useState({});\n\n  useEffect(() => {\n    const exists = document.getElementById(SCRIPT_ID);\n    if (!exists) {\n      const script = document.createElement('script');\n      script.id = SCRIPT_ID;\n      script.src = `${process.env.PROVIDER_PAYCOMET_SCRIPT}?lang=${locale.split('-')[0]}`;\n\n      document.head.appendChild(script);\n    }\n    return () => {\n      const el = document.getElementById(SCRIPT_ID);\n      if (el) el.parentNode.removeChild(el);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!token) return;\n\n    setBusy(false);\n    setError();\n    onSuccess({ token });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [token]);\n\n  const handleExpireChange = (event) => {\n    const { name, value = '' } = event.target || {};\n    setExpire({ ...expire, [name]: value.replace(/[^\\d]/g, '') });\n  };\n\n  const handleCardTokenized = (event) => {\n    event.preventDefault();\n    setBusy(true);\n  };\n\n  const handlePress = (event) => {\n    event.stopPropagation();\n    formRef.current.submit();\n  };\n\n  const getInlineStyle = () => {\n    const { inputColor, inputFontSize, font } = Theme.get();\n\n    return {\n      card_number: `border:0px;background-image:none;color:${inputColor};font-family:${font};font-size:${inputFontSize};outline: 0;padding:0!important;`,\n      cvv: `border:0px;color:${inputColor};font-family:${font};font-size:${inputFontSize};padding:0!important;`,\n    };\n  };\n  const { card_number, cvv } = getInlineStyle();\n\n  return (\n    <View {...others} className={styles(style.container, others.className)}>\n      <Text action>{translate(L10N.LABEL_SECURE_PAGE)}</Text>\n      <form ref={formRef} id=\"paycometPaymentForm\" onSubmit={handleCardTokenized} action=\"javascript:void(0)\">\n        <input type=\"hidden\" name=\"amount\" value={(amount * Math.pow(10, currencyDecimals)).toFixed()} />\n        <input type=\"hidden\" data-paycomet=\"jetID\" value={publicKey} />\n        <input ref={tokenRef} type=\"hidden\" id=\"paytpvToken\" name=\"paytpvToken\" value=\"\" />\n        <InputField label={translate(L10N.LABEL_CARD_NAME)} value=\"value\">\n          <input data-paycomet=\"cardHolderName\" className={style.inputName} />\n        </InputField>\n        <InputField label={translate(L10N.LABEL_CARD_NUMBER)} value=\"value\">\n          <div id=\"paycomet-pan\" className={style.inputName}></div>\n          <input\n            paycomet-style={card_number}\n            paycomet-name=\"pan\"\n            paycomet-placeholder={translate(L10N.LABEL_CARD_NUMBER_PLACEHOLDER)}\n          />\n        </InputField>\n        <View row>\n          <InputField label={translate(L10N.LABEL_EXPIRATION)} value=\"value\">\n            <View row className={style.inputName}>\n              <input\n                onChange={handleExpireChange}\n                value={expire.month}\n                name=\"month\"\n                data-paycomet=\"dateMonth\"\n                maxLength={2}\n                className={style.inputExpire}\n              />\n              /\n              <input\n                onChange={handleExpireChange}\n                value={expire.year}\n                name=\"year\"\n                data-paycomet=\"dateYear\"\n                maxLength={2}\n                className={style.inputExpire}\n              />\n            </View>\n          </InputField>\n\n          <InputField label={translate(L10N.LABEL_CVV)} className={style.inputCVV} value=\"value\">\n            <div id=\"paycomet-cvc2\" data-paycomet=\"cvc2\" className={style.inputName}></div>\n            <input paycomet-name=\"cvc2\" paycomet-style={cvv} />\n          </InputField>\n        </View>\n        <Button busy={busy} large wide onPress={handlePress} preventDefault={false}>\n          {translate(L10N.ACTION_PAY)}\n        </Button>\n      </form>\n      {error && (\n        <Notification error wide>\n          {error}\n        </Notification>\n      )}\n      <div ref={errorRef} id=\"paymentErrorMsg\" style={{ display: 'none' }}></div>\n    </View>\n  );\n};\n\nFormPaycomet.displayName = 'Mirai:Payments:ButtonPayment:FormPaycomet';\n\nFormPaycomet.propTypes = {\n  currencyDecimals: PropTypes.number,\n  info: PropTypes.shape({\n    amount: PropTypes.number,\n  }),\n  publicKey: PropTypes.string.isRequired,\n  onSuccess: PropTypes.func,\n};\n"],"mappings":"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"}

package/build/components/__shared__/ButtonPayment/components/FormPaycomet/FormPaycomet.module.css

@@ -1,5 +1,5 @@
-.error {
-  margin-top: var(--mirai-ui-space-M);
+.container {
+  gap: var(--mirai-ui-space-M);
 }
 
 .inputCVV {
@@ -21,6 +21,6 @@
   color: var(--mirai-ui-input-color);
   font-family: var(--mirai-ui-input-font);
   font-size: var(--mirai-ui-input-font-size);
-  height: calc(var(--mirai-ui-input-min-height) - var(--mirai-ui-space-S)) !important;
+  height: var(--mirai-ui-space-L) !important;
   outline: 0;
-}
+}

package/build/components/__shared__/ButtonPayment/components/FormPaycomet/__tests__/__snapshots__/FormPaycomet.test.js.snap

@@ -63,7 +63,7 @@ exports[`component:<FormCheckout> renders 1`] = `
           <input
             paycomet-name="pan"
             paycomet-placeholder="payments.label.card_number_placeholder"
-            paycomet-style="border:0px;background-image:none;color:undefined;font-family:undefined;font-size:undefined;height:undefined;outline: 0;padding:0!important;"
+            paycomet-style="border:0px;background-image:none;color:undefined;font-family:undefined;font-size:undefined;outline: 0;padding:0!important;"
           />
         </div>
       </div>
@@ -117,7 +117,7 @@ exports[`component:<FormCheckout> renders 1`] = `
             />
             <input
               paycomet-name="cvc2"
-              paycomet-style="border:0px;color:undefined;font-family:undefined;font-size:undefined;height:undefined;padding:0!important;"
+              paycomet-style="border:0px;color:undefined;font-family:undefined;font-size:undefined;padding:0!important;"
             />
           </div>
         </div>

package/build/components/__shared__/ButtonPayment/components/InputField/InputField.js

@@ -16,19 +16,21 @@ const InputField = _ref => {
   let {
     children,
     error,
+    focus,
     hint,
     label,
     showRequired = false,
     success,
+    value,
     ...others
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_ui.View, _extends({}, others, {
     className: (0, _ui.styles)(style.container, others.className)
   }), /*#__PURE__*/_react.default.createElement(_ui.View, {
-    className: (0, _ui.styles)(style.border, error && style.error)
+    className: (0, _ui.styles)(style.border, error && style.error, focus && style.focus)
   }, label && /*#__PURE__*/_react.default.createElement(_ui.Text, {
     small: true,
-    className: (0, _ui.styles)(style.label)
+    className: (0, _ui.styles)(style.label, (focus || error || value !== undefined && ((value === null || value === void 0 ? void 0 : value.length) > 0 || typeof value === 'number')) && style.withValue)
   }, label, showRequired && /*#__PURE__*/_react.default.createElement("span", {
     className: style.required
   }, " *")), children, (error || success) && /*#__PURE__*/_react.default.createElement(_ui.Icon, {
@@ -36,7 +38,7 @@ const InputField = _ref => {
     className: (0, _ui.styles)(style.icon, error && style.error, success && style.success)
   })), hint && /*#__PURE__*/_react.default.createElement(_ui.Text, {
     small: true,
-    className: (0, _ui.styles)(style.text, style.hint)
+    className: style.hint
   }, hint));
 };
 exports.InputField = InputField;
@@ -44,9 +46,11 @@ InputField.displayName = 'Mirai:Payments:InputField';
 InputField.propTypes = {
   children: _propTypes.default.node.isRequired,
   error: _propTypes.default.bool,
+  focus: _propTypes.default.bool,
   hint: _propTypes.default.string,
   label: _propTypes.default.string.isRequired,
   showRequired: _propTypes.default.bool,
-  success: _propTypes.default.bool
+  success: _propTypes.default.bool,
+  value: _propTypes.default.string
 };
 //# sourceMappingURL=InputField.js.map

package/build/components/__shared__/ButtonPayment/components/InputField/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","names":["_ui","require","_propTypes","_interopRequireDefault","_react","style","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","InputField","_ref","children","error","hint","label","showRequired","success","others","createElement","View","className","styles","container","border","Text","small","required","Icon","value","ICON","ERROR","SUCCESS","icon","text","exports","displayName","propTypes","PropTypes","node","isRequired","bool","string"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/InputField/InputField.jsx"],"sourcesContent":["import { Icon, ICON, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport * as style from './InputField.module.css';\n\nconst InputField = ({ children, error, hint, label, showRequired = false, success, ...others }) => (\n  <View {...others} className={styles(style.container, others.className)}>\n    <View className={styles(style.border, error && style.error)}>\n      {label && (\n        <Text small className={styles(style.label)}>\n          {label}\n          {showRequired && <span className={style.required}> *</span>}\n        </Text>\n      )}\n      {children}\n      {(error || success) && (\n        <Icon\n          value={error ? ICON.ERROR : ICON.SUCCESS}\n          className={styles(style.icon, error && style.error, success && style.success)}\n        />\n      )}\n    </View>\n    {hint && (\n      <Text small className={styles(style.text, style.hint)}>\n        {hint}\n      </Text>\n    )}\n  </View>\n);\n\nInputField.displayName = 'Mirai:Payments:InputField';\n\nInputField.propTypes = {\n  children: PropTypes.node.isRequired,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string.isRequired,\n  showRequired: PropTypes.bool,\n  success: PropTypes.bool,\n};\n\nexport { InputField };\n"],"mappings":"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"}
+{"version":3,"file":"InputField.js","names":["_ui","require","_propTypes","_interopRequireDefault","_react","style","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","InputField","_ref","children","error","focus","hint","label","showRequired","success","value","others","createElement","View","className","styles","container","border","Text","small","undefined","withValue","required","Icon","ICON","ERROR","SUCCESS","icon","exports","displayName","propTypes","PropTypes","node","isRequired","bool","string"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/InputField/InputField.jsx"],"sourcesContent":["import { Icon, ICON, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport * as style from './InputField.module.css';\n\nconst InputField = ({ children, error, focus, hint, label, showRequired = false, success, value, ...others }) => (\n  <View {...others} className={styles(style.container, others.className)}>\n    <View className={styles(style.border, error && style.error, focus && style.focus)}>\n      {label && (\n        <Text\n          small\n          className={styles(\n            style.label,\n            (focus || error || (value !== undefined && (value?.length > 0 || typeof value === 'number'))) &&\n              style.withValue,\n          )}\n        >\n          {label}\n          {showRequired && <span className={style.required}> *</span>}\n        </Text>\n      )}\n      {children}\n      {(error || success) && (\n        <Icon\n          value={error ? ICON.ERROR : ICON.SUCCESS}\n          className={styles(style.icon, error && style.error, success && style.success)}\n        />\n      )}\n    </View>\n    {hint && (\n      <Text small className={style.hint}>\n        {hint}\n      </Text>\n    )}\n  </View>\n);\n\nInputField.displayName = 'Mirai:Payments:InputField';\n\nInputField.propTypes = {\n  children: PropTypes.node.isRequired,\n  error: PropTypes.bool,\n  focus: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string.isRequired,\n  showRequired: PropTypes.bool,\n  success: PropTypes.bool,\n  value: PropTypes.string,\n};\n\nexport { InputField };\n"],"mappings":"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"}

package/build/components/__shared__/ButtonPayment/components/InputField/InputField.module.css

@@ -1,11 +1,15 @@
 .container {
   margin-bottom: var(--mirai-ui-space-M);
   width: 100%;
+  min-height: var(--mirai-ui-input-min-height);
 }
 
 .border {
   border: var(--mirai-ui-input-text-border);
   border-radius: var(--mirai-ui-input-text-radius);
+  padding-left: calc(var(--mirai-ui-input-text-padding-x) / 2);
+  padding-right: calc(var(--mirai-ui-input-text-padding-x) / 2);
+  transition: box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
   position: relative;
 }
 
@@ -13,14 +17,24 @@
   border-color: var(--mirai-ui-input-text-error);
 }
 
+.border.focus:not(.error) {
+  border-color: var(--mirai-ui-input-text-focus);
+  box-shadow: var(--mirai-ui-focus-shadow);
+}
+
+.border.focus.error {
+  box-shadow: var(--mirai-ui-focus-shadow-error);
+}
+
 .border > *:not(.label):not(.icon) {
-  border-radius: var(--mirai-ui-input-text-radius);
-  height: var(--mirai-ui-input-min-height);
-  padding: var(--mirai-ui-space-S) var(--mirai-ui-input-text-padding-x) 0 var(--mirai-ui-input-text-padding-x);
+  padding: calc(var(--mirai-ui-input-text-padding-y) + var(--mirai-ui-space-S))
+    calc(var(--mirai-ui-input-text-padding-x) / 2) calc(var(--mirai-ui-input-text-padding-x) / 2)
+    calc(var(--mirai-ui-input-text-padding-x) / 2);
 }
 
 .hint {
   color: var(--mirai-ui-content-light);
+  margin: calc(var(--mirai-ui-input-text-padding-y) / 4) var(--mirai-ui-input-text-padding-x);
 }
 
 .icon {
@@ -43,18 +57,39 @@
   color: var(--mirai-ui-success);
 }
 
+.withLabel {
+  padding-top: calc(var(--mirai-ui-input-text-padding-y) + var(--mirai-ui-space-S));
+}
+
+.focus .label {
+  color: var(--mirai-ui-input-text-focus);
+}
+
 .label {
-  color: var(--mirai-ui-content-light);
+  color: var(--mirai-ui-input-disabled);
+  background-color: var(--mirai-ui-input-background);
+  font-size: var(--mirai-ui-input-font-size);
   left: var(--mirai-ui-input-text-padding-x);
+  line-height: calc(var(--mirai-ui-input-min-height) - var(--mirai-ui-border-width));
+  overflow: hidden;
   pointer-events: none;
   position: absolute;
-  top: var(--mirai-ui-space-XS);
+  right: calc(var(--mirai-ui-input-text-padding-x) / 2);
+  text-overflow: ellipsis;
+  top: var(--mirai-ui-border-width);
+  transition: font-size var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    line-height var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    right var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    top var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+  white-space: nowrap;
 }
 
-.text {
-  margin: calc(var(--mirai-ui-input-text-padding-y) / 4) var(--mirai-ui-input-text-padding-x);
+.label.withValue {
+  font-size: var(--mirai-ui-font-size-small);
+  line-height: var(--mirai-ui-line-height-small);
+  top: calc(var(--mirai-ui-space-XXS) + var(--mirai-ui-border-width));
 }
 
-.text .required {
+.label .required {
   color: var(--mirai-ui-error);
-}
+}

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

@@ -41,6 +41,7 @@ const PCI = _ref => {
     value,
     set
   } = (0, _dataSources.useStore)();
+  const [focus, setFocus] = (0, _react.useState)();
   const [form, setForm] = (0, _react.useState)({});
   const [formError, setFormError] = (0, _react.useState)({
     card: {},
@@ -102,7 +103,7 @@ const PCI = _ref => {
     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, ready, responseError, value]);
+  }, [focus, form, formError, ready, responseError, value]);
   (0, _react.useEffect)(() => {
     onChange({
       expire: form.expire,
@@ -160,15 +161,18 @@ const PCI = _ref => {
         field
       } = {}
     } = _ref4;
+    const fieldName = field === 'cardNumber' ? 'card' : field;
+    if (type === 'focus') return handleEnter(fieldName);
+    if (type === 'blur') return handleLeave(fieldName);
     const isKeyUp = type === 'keyUp';
-    const isCardEmpty = field === 'cardNumber' && cardNumber.length === 0 && !form.card;
-    const isCvvEmpty = field === 'cvv' && cvv.length === 0 && !form.cvv;
+    const isCardEmpty = fieldName === 'cardNumber' && cardNumber.length === 0 && !form.card;
+    const isCvvEmpty = fieldName === 'cvv' && cvv.length === 0 && !form.cvv;
     if (!isKeyUp || isKeyUp && (isCardEmpty || isCvvEmpty)) return;
     setResponseError();
     const error = {
       ...formError
     };
-    if (field === 'cardNumber') {
+    if (fieldName === 'card') {
       setForm({
         ...form,
         card: cardNumber,
@@ -179,7 +183,7 @@ const PCI = _ref => {
       } : cardNumber.length === 0 ? {
         required: true
       } : undefined;
-    } else if (field === 'cvv') {
+    } else if (fieldName === 'cvv') {
       setForm({
         ...form,
         cvv
@@ -192,6 +196,14 @@ const PCI = _ref => {
     }
     setFormError(error);
   };
+  const handleEnter = field => setFocus({
+    ...focus,
+    [field]: true
+  });
+  const handleLeave = field => setFocus({
+    ...focus,
+    [field]: false
+  });
   const handleError = function (field) {
     let {
       required,
@@ -243,19 +255,23 @@ const PCI = _ref => {
     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: showErrors && (!form.card || ((_form$card = form.card) === null || _form$card === void 0 ? void 0 : _form$card.length) === 0) || Object.keys(formError.card || {}).length > 0,
+    focus: focus === null || focus === void 0 ? void 0 : focus.card,
+    label: translate(_PCI2.L10N.LABEL_CARD_NUMBER),
     showRequired: true,
     success: !formError.card,
+    value: form.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: showErrors && (!form.name || ((_form$name = form.name) === null || _form$name === void 0 ? void 0 : _form$name.length) === 0) || Object.keys(formError.name || {}).length > 0,
+    focus: focus === null || focus === void 0 ? void 0 : focus.name,
     label: translate(_PCI2.L10N.LABEL_CARD_NAME),
     showRequired: true,
     success: ((_form$name2 = form.name) === null || _form$name2 === void 0 ? void 0 : _form$name2.length) > 0 && !formError.name,
+    value: form.name,
     testId: testId ? "".concat(testId, "-PCI-name") : undefined
   }, /*#__PURE__*/_react.default.createElement(_ui.Input, {
     id: "checkout-name",
@@ -263,14 +279,18 @@ const PCI = _ref => {
     required: true,
     value: form.name,
     onChange: value => handleChange('name', value),
-    onError: error => handleError('name', error)
+    onEnter: () => handleEnter('name'),
+    onError: error => handleError('name', error),
+    onLeave: () => handleLeave('name')
   })), /*#__PURE__*/_react.default.createElement(_ui.View, {
     row: true
   }, /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     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,
+    focus: focus === null || focus === void 0 ? void 0 : focus.expire,
     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,
+    value: form.expire,
     className: style.expire,
     testId: testId ? "".concat(testId, "-PCI-expire") : undefined
   }, /*#__PURE__*/_react.default.createElement(_ui.Input, {
@@ -282,13 +302,17 @@ const PCI = _ref => {
     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)
+    onEnter: () => handleEnter('expire'),
+    onError: error => handleError('expire', error),
+    onLeave: () => handleLeave('expire')
   })), showCVV && /*#__PURE__*/_react.default.createElement(_InputField.InputField, {
     id: "checkout-cvv",
-    label: translate(_PCI2.L10N.LABEL_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,
+    focus: focus === null || focus === void 0 ? void 0 : focus.cvv,
+    label: translate(_PCI2.L10N.LABEL_CVV),
     showRequired: true,
     success: !formError.cvv,
+    value: form.cvv,
     className: style.cvv,
     testId: testId ? "".concat(testId, "-PCI-CVV") : undefined
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"PCI.js","names":["_dataSources","require","_locale","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_helpers","_PCI","_PCI2","style","_ButtonPayment","_InputField","_helpers2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","secureFields","PCI","_ref","_form$card","_form$name","_form$name2","_form$expire","_form$expire2","_form$cvv","cards","publicKey","process","env","METHOD_PCIPROXY_PUBLICKEY","showCVV","showErrors","onChange","onError","others","translate","useLocale","value","payment","useStore","form","setForm","useState","formError","setFormError","card","name","expire","cvv","undefined","ready","setReady","responseError","setResponseError","useEffect","exists","document","getElementById","SCRIPT_ID","script","createElement","id","src","METHOD_PCIPROXY_SCRIPT","onload","handleLoad","head","appendChild","_secureFields","el","parentNode","removeChild","destroy","SecureFields","initTokenize","cardNumber","getStyle","paymentMethods","entries","CARDS","filter","arguments","length","includes","map","key","_secureFields2","_secureFields3","_secureFields4","_secureFields5","on","handleChangeSecure","handleTokenError","handleReady","handleSuccess","addEventListener","EVENT_CTA_PRESS","handleButtonPress","keys","removeEventListener","type","fromEntries","_ref2","_ref3","month","year","split","submit","expm","expy","handleChange","field","formatValues","_ref4","fields","event","isKeyUp","isCardEmpty","isCvvEmpty","error","valid","paymentMethod","format","required","handleError","test","setPlaceholder","PLACEHOLDER_CARD","PLACEHOLDER_CVV","_ref5","transactionId","ERROR","testId","View","Text","action","L10N","LABEL_SECURE_PAGE","InputField","label","LABEL_CARD_NUMBER","showRequired","success","concat","className","input","LABEL_CARD_NAME","Input","row","LABEL_EXPIRATION","maxLength","placeholder","LABEL_MONTH_FORMAT","LABEL_YEAR_FORMAT","testExpire","LABEL_CVV","Notification","small","wide","NOTIFICATION_ERROR_PCI","exports","displayName","propTypes","PropTypes","array","string","bool","func"],"sources":["../../../../../../src/components/__shared__/Payment/components/PCI/PCI.jsx"],"sourcesContent":["import { useStore } from '@mirai/data-sources';\nimport { useLocale } from '@mirai/locale';\nimport { Input, Notification, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { formatValues, getStyle } from './helpers';\nimport { CARDS, ERROR, PLACEHOLDER_CARD, PLACEHOLDER_CVV, SCRIPT_ID } from './PCI.constants';\nimport { L10N } from './PCI.l10n';\nimport * as style from './PCI.module.css';\nimport { EVENT_CTA_PRESS } from '../../../ButtonPayment/ButtonPayment.constants';\nimport { InputField } from '../../../ButtonPayment/components/InputField';\nimport { testExpire } from '../Card/helpers';\n\nlet secureFields;\n\nconst PCI = ({\n  cards = [],\n  publicKey = process.env.METHOD_PCIPROXY_PUBLICKEY,\n  showCVV = true,\n  showErrors = false,\n  onChange = () => {},\n  onError = () => {},\n  ...others\n}) => {\n  const { translate } = useLocale();\n  const { value: { payment = {} } = {}, value, set } = useStore();\n\n  const [form, setForm] = useState({});\n  const [formError, setFormError] = useState({\n    card: {},\n    name: {},\n    expire: {},\n    ...(showCVV ? { cvv: {} } : undefined),\n  });\n  const [ready, setReady] = useState(false);\n  const [responseError, setResponseError] = useState(false);\n\n  useEffect(() => {\n    const exists = document.getElementById(SCRIPT_ID);\n    if (!exists) {\n      const script = document.createElement('script');\n      script.id = SCRIPT_ID;\n      script.src = process.env.METHOD_PCIPROXY_SCRIPT;\n      script.onload = handleLoad;\n\n      document.head.appendChild(script);\n    }\n\n    return () => {\n      const el = document.getElementById(SCRIPT_ID);\n      el.parentNode.removeChild(el);\n      secureFields?.destroy();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!ready) return;\n\n    onError(formError);\n    // eslint-disable-next-line no-undef\n    secureFields = new SecureFields();\n    secureFields.initTokenize(\n      publicKey,\n      { cardNumber: 'card', ...(showCVV ? { cvv: 'cvv' } : undefined) },\n      {\n        ...getStyle(),\n        paymentMethods: Object.entries(CARDS)\n          .filter(([, value] = []) => cards.includes(value))\n          .map(([key] = []) => key),\n      },\n    );\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [publicKey, ready]);\n\n  useEffect(() => {\n    secureFields?.on('change', handleChangeSecure);\n    secureFields?.on('error', handleTokenError);\n    secureFields?.on('ready', handleReady);\n    secureFields?.on('success', handleSuccess);\n\n    document.addEventListener(EVENT_CTA_PRESS, handleButtonPress);\n\n    if (Object.keys(formError).length === 0) onError({});\n\n    return () => document.removeEventListener(EVENT_CTA_PRESS, handleButtonPress);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [form, formError, ready, responseError, value]);\n\n  useEffect(() => {\n    onChange({ expire: form.expire, name: form.name, type: form.type });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [form]);\n\n  useEffect(() => {\n    onError(Object.fromEntries(Object.entries(formError).filter(([, value]) => value !== undefined)));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [formError, responseError]);\n\n  const handleButtonPress = () => {\n    if (Object.entries(formError).filter(([, value]) => value !== undefined).length > 0) return;\n\n    setResponseError();\n    const [month, year] = form.expire.split('/');\n    secureFields.submit({ expm: month, expy: year });\n  };\n\n  const handleChange = (field, value = '') => {\n    setResponseError();\n\n    const { expire, name } = formatValues({ ...{ expire: form.expire, name: form.name }, [field]: value }, form);\n    setForm({ ...form, expire, name });\n  };\n\n  const handleChangeSecure = ({ fields: { cardNumber = {}, cvv = {} } = {}, event: { type, field } = {} }) => {\n    const isKeyUp = type === 'keyUp';\n    const isCardEmpty = field === 'cardNumber' && cardNumber.length === 0 && !form.card;\n    const isCvvEmpty = field === 'cvv' && cvv.length === 0 && !form.cvv;\n\n    if (!isKeyUp || (isKeyUp && (isCardEmpty || isCvvEmpty))) return;\n\n    setResponseError();\n\n    const error = { ...formError };\n    if (field === 'cardNumber') {\n      setForm({ ...form, card: cardNumber, type: cardNumber.valid ? CARDS[cardNumber.paymentMethod] : undefined });\n      error.card =\n        !cardNumber.valid && cardNumber.length > 0\n          ? { format: true }\n          : cardNumber.length === 0\n          ? { required: true }\n          : undefined;\n    } else if (field === 'cvv') {\n      setForm({ ...form, cvv });\n      error.cvv = !cvv.valid && cvv.length > 0 ? { format: true } : cvv.length === 0 ? { required: true } : undefined;\n    }\n\n    setFormError(error);\n  };\n\n  const handleError = (field, { required, test } = {}) => {\n    if (!ready) return;\n\n    setFormError((formError) => ({\n      ...formError,\n      ...{ [field]: required ? { required: true } : test ? { format: true } : undefined },\n    }));\n  };\n\n  const handleLoad = () => {\n    setReady(true);\n  };\n\n  const handleReady = () => {\n    secureFields.setPlaceholder('cardNumber', PLACEHOLDER_CARD);\n    showCVV && secureFields.setPlaceholder('cvv', PLACEHOLDER_CVV);\n  };\n\n  const handleSuccess = ({ transactionId }) => {\n    set({ payment: { ...payment, transactionId } });\n  };\n\n  const handleTokenError = () => {\n    setResponseError(ERROR);\n    set({ payment: { ...payment, error: ERROR } });\n  };\n\n  const { testId } = others;\n\n  return (\n    <View {...others}>\n      <Text action>{translate(L10N.LABEL_SECURE_PAGE)}</Text>\n\n      <InputField\n        id=\"checkout-card\"\n        label={translate(L10N.LABEL_CARD_NUMBER)}\n        error={(showErrors && (!form.card || form.card?.length === 0)) || Object.keys(formError.card || {}).length > 0}\n        showRequired\n        success={!formError.card}\n        testId={testId ? `${testId}-PCI-card` : undefined}\n      >\n        <div id=\"card\" className={style.input} />\n      </InputField>\n      <InputField\n        error={(showErrors && (!form.name || form.name?.length === 0)) || Object.keys(formError.name || {}).length > 0}\n        label={translate(L10N.LABEL_CARD_NAME)}\n        showRequired\n        success={form.name?.length > 0 && !formError.name}\n        testId={testId ? `${testId}-PCI-name` : undefined}\n      >\n        <Input\n          id=\"checkout-name\"\n          name=\"name\"\n          required\n          value={form.name}\n          onChange={(value) => handleChange('name', value)}\n          onError={(error) => handleError('name', error)}\n        />\n      </InputField>\n      <View row>\n        <InputField\n          error={\n            (showErrors && (!form.expire || form.expire?.length === 0)) ||\n            Object.keys(formError.expire || {}).length > 0\n          }\n          label={translate(L10N.LABEL_EXPIRATION)}\n          showRequired\n          success={form.expire?.length > 0 && !formError.expire}\n          className={style.expire}\n          testId={testId ? `${testId}-PCI-expire` : undefined}\n        >\n          <Input\n            id=\"checkout-expire\"\n            maxLength={5}\n            name=\"expire\"\n            placeholder={`${translate(L10N.LABEL_MONTH_FORMAT)}/${translate(L10N.LABEL_YEAR_FORMAT)}`}\n            required\n            test={(expire) => expire.length === 0 || (expire?.length > 0 && testExpire(expire))}\n            value={form.expire}\n            onChange={(value) => handleChange('expire', value)}\n            onError={(error) => handleError('expire', error)}\n          />\n        </InputField>\n        {showCVV && (\n          <InputField\n            id=\"checkout-cvv\"\n            label={translate(L10N.LABEL_CVV)}\n            error={(showErrors && (!form.cvv || form.cvv?.length === 0)) || Object.keys(formError.cvv || {}).length > 0}\n            showRequired\n            success={!formError.cvv}\n            className={style.cvv}\n            testId={testId ? `${testId}-PCI-CVV` : undefined}\n          >\n            <div id=\"cvv\" className={style.input} />\n          </InputField>\n        )}\n      </View>\n\n      {responseError && (\n        <Notification error small wide>\n          {translate(L10N.NOTIFICATION_ERROR_PCI)}\n        </Notification>\n      )}\n    </View>\n  );\n};\n\nPCI.displayName = 'Mirai:Payments:PCI';\n\nPCI.propTypes = {\n  cards: PropTypes.array,\n  publicKey: PropTypes.string,\n  showCVV: PropTypes.bool,\n  showErrors: PropTypes.bool,\n  onChange: PropTypes.func,\n  onError: PropTypes.func,\n};\n\nexport { PCI };\n"],"mappings":"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"}
+{"version":3,"file":"PCI.js","names":["_dataSources","require","_locale","_ui","_propTypes","_interopRequireDefault","_react","_interopRequireWildcard","_helpers","_PCI","_PCI2","style","_ButtonPayment","_InputField","_helpers2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","secureFields","PCI","_ref","_form$card","_form$name","_form$name2","_form$expire","_form$expire2","_form$cvv","cards","publicKey","process","env","METHOD_PCIPROXY_PUBLICKEY","showCVV","showErrors","onChange","onError","others","translate","useLocale","value","payment","useStore","focus","setFocus","useState","form","setForm","formError","setFormError","card","name","expire","cvv","undefined","ready","setReady","responseError","setResponseError","useEffect","exists","document","getElementById","SCRIPT_ID","script","createElement","id","src","METHOD_PCIPROXY_SCRIPT","onload","handleLoad","head","appendChild","_secureFields","el","parentNode","removeChild","destroy","SecureFields","initTokenize","cardNumber","getStyle","paymentMethods","entries","CARDS","filter","arguments","length","includes","map","key","_secureFields2","_secureFields3","_secureFields4","_secureFields5","on","handleChangeSecure","handleTokenError","handleReady","handleSuccess","addEventListener","EVENT_CTA_PRESS","handleButtonPress","keys","removeEventListener","type","fromEntries","_ref2","_ref3","month","year","split","submit","expm","expy","handleChange","field","formatValues","_ref4","fields","event","fieldName","handleEnter","handleLeave","isKeyUp","isCardEmpty","isCvvEmpty","error","valid","paymentMethod","format","required","handleError","test","setPlaceholder","PLACEHOLDER_CARD","PLACEHOLDER_CVV","_ref5","transactionId","ERROR","testId","View","Text","action","L10N","LABEL_SECURE_PAGE","InputField","label","LABEL_CARD_NUMBER","showRequired","success","concat","className","input","LABEL_CARD_NAME","Input","onEnter","onLeave","row","LABEL_EXPIRATION","maxLength","placeholder","LABEL_MONTH_FORMAT","LABEL_YEAR_FORMAT","testExpire","LABEL_CVV","Notification","small","wide","NOTIFICATION_ERROR_PCI","exports","displayName","propTypes","PropTypes","array","string","bool","func"],"sources":["../../../../../../src/components/__shared__/Payment/components/PCI/PCI.jsx"],"sourcesContent":["import { useStore } from '@mirai/data-sources';\nimport { useLocale } from '@mirai/locale';\nimport { Input, Notification, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { formatValues, getStyle } from './helpers';\nimport { CARDS, ERROR, PLACEHOLDER_CARD, PLACEHOLDER_CVV, SCRIPT_ID } from './PCI.constants';\nimport { L10N } from './PCI.l10n';\nimport * as style from './PCI.module.css';\nimport { EVENT_CTA_PRESS } from '../../../ButtonPayment/ButtonPayment.constants';\nimport { InputField } from '../../../ButtonPayment/components/InputField';\nimport { testExpire } from '../Card/helpers';\n\nlet secureFields;\n\nconst PCI = ({\n  cards = [],\n  publicKey = process.env.METHOD_PCIPROXY_PUBLICKEY,\n  showCVV = true,\n  showErrors = false,\n  onChange = () => {},\n  onError = () => {},\n  ...others\n}) => {\n  const { translate } = useLocale();\n  const { value: { payment = {} } = {}, value, set } = useStore();\n\n  const [focus, setFocus] = useState();\n  const [form, setForm] = useState({});\n  const [formError, setFormError] = useState({\n    card: {},\n    name: {},\n    expire: {},\n    ...(showCVV ? { cvv: {} } : undefined),\n  });\n  const [ready, setReady] = useState(false);\n  const [responseError, setResponseError] = useState(false);\n\n  useEffect(() => {\n    const exists = document.getElementById(SCRIPT_ID);\n    if (!exists) {\n      const script = document.createElement('script');\n      script.id = SCRIPT_ID;\n      script.src = process.env.METHOD_PCIPROXY_SCRIPT;\n      script.onload = handleLoad;\n\n      document.head.appendChild(script);\n    }\n\n    return () => {\n      const el = document.getElementById(SCRIPT_ID);\n      el.parentNode.removeChild(el);\n      secureFields?.destroy();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (!ready) return;\n\n    onError(formError);\n    // eslint-disable-next-line no-undef\n    secureFields = new SecureFields();\n    secureFields.initTokenize(\n      publicKey,\n      { cardNumber: 'card', ...(showCVV ? { cvv: 'cvv' } : undefined) },\n      {\n        ...getStyle(),\n        paymentMethods: Object.entries(CARDS)\n          .filter(([, value] = []) => cards.includes(value))\n          .map(([key] = []) => key),\n      },\n    );\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [publicKey, ready]);\n\n  useEffect(() => {\n    secureFields?.on('change', handleChangeSecure);\n    secureFields?.on('error', handleTokenError);\n    secureFields?.on('ready', handleReady);\n    secureFields?.on('success', handleSuccess);\n\n    document.addEventListener(EVENT_CTA_PRESS, handleButtonPress);\n\n    if (Object.keys(formError).length === 0) onError({});\n\n    return () => document.removeEventListener(EVENT_CTA_PRESS, handleButtonPress);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [focus, form, formError, ready, responseError, value]);\n\n  useEffect(() => {\n    onChange({ expire: form.expire, name: form.name, type: form.type });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [form]);\n\n  useEffect(() => {\n    onError(Object.fromEntries(Object.entries(formError).filter(([, value]) => value !== undefined)));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [formError, responseError]);\n\n  const handleButtonPress = () => {\n    if (Object.entries(formError).filter(([, value]) => value !== undefined).length > 0) return;\n\n    setResponseError();\n    const [month, year] = form.expire.split('/');\n    secureFields.submit({ expm: month, expy: year });\n  };\n\n  const handleChange = (field, value = '') => {\n    setResponseError();\n\n    const { expire, name } = formatValues({ ...{ expire: form.expire, name: form.name }, [field]: value }, form);\n    setForm({ ...form, expire, name });\n  };\n\n  const handleChangeSecure = ({ fields: { cardNumber = {}, cvv = {} } = {}, event: { type, field } = {} }) => {\n    const fieldName = field === 'cardNumber' ? 'card' : field;\n    if (type === 'focus') return handleEnter(fieldName);\n    if (type === 'blur') return handleLeave(fieldName);\n\n    const isKeyUp = type === 'keyUp';\n    const isCardEmpty = fieldName === 'cardNumber' && cardNumber.length === 0 && !form.card;\n    const isCvvEmpty = fieldName === 'cvv' && cvv.length === 0 && !form.cvv;\n\n    if (!isKeyUp || (isKeyUp && (isCardEmpty || isCvvEmpty))) return;\n\n    setResponseError();\n\n    const error = { ...formError };\n    if (fieldName === 'card') {\n      setForm({ ...form, card: cardNumber, type: cardNumber.valid ? CARDS[cardNumber.paymentMethod] : undefined });\n      error.card =\n        !cardNumber.valid && cardNumber.length > 0\n          ? { format: true }\n          : cardNumber.length === 0\n          ? { required: true }\n          : undefined;\n    } else if (fieldName === 'cvv') {\n      setForm({ ...form, cvv });\n      error.cvv = !cvv.valid && cvv.length > 0 ? { format: true } : cvv.length === 0 ? { required: true } : undefined;\n    }\n\n    setFormError(error);\n  };\n\n  const handleEnter = (field) => setFocus({ ...focus, [field]: true });\n\n  const handleLeave = (field) => setFocus({ ...focus, [field]: false });\n\n  const handleError = (field, { required, test } = {}) => {\n    if (!ready) return;\n\n    setFormError((formError) => ({\n      ...formError,\n      ...{ [field]: required ? { required: true } : test ? { format: true } : undefined },\n    }));\n  };\n\n  const handleLoad = () => {\n    setReady(true);\n  };\n\n  const handleReady = () => {\n    secureFields.setPlaceholder('cardNumber', PLACEHOLDER_CARD);\n    showCVV && secureFields.setPlaceholder('cvv', PLACEHOLDER_CVV);\n  };\n\n  const handleSuccess = ({ transactionId }) => {\n    set({ payment: { ...payment, transactionId } });\n  };\n\n  const handleTokenError = () => {\n    setResponseError(ERROR);\n    set({ payment: { ...payment, error: ERROR } });\n  };\n\n  const { testId } = others;\n\n  return (\n    <View {...others}>\n      <Text action>{translate(L10N.LABEL_SECURE_PAGE)}</Text>\n\n      <InputField\n        id=\"checkout-card\"\n        error={(showErrors && (!form.card || form.card?.length === 0)) || Object.keys(formError.card || {}).length > 0}\n        focus={focus?.card}\n        label={translate(L10N.LABEL_CARD_NUMBER)}\n        showRequired\n        success={!formError.card}\n        value={form.card}\n        testId={testId ? `${testId}-PCI-card` : undefined}\n      >\n        <div id=\"card\" className={style.input} />\n      </InputField>\n      <InputField\n        error={(showErrors && (!form.name || form.name?.length === 0)) || Object.keys(formError.name || {}).length > 0}\n        focus={focus?.name}\n        label={translate(L10N.LABEL_CARD_NAME)}\n        showRequired\n        success={form.name?.length > 0 && !formError.name}\n        value={form.name}\n        testId={testId ? `${testId}-PCI-name` : undefined}\n      >\n        <Input\n          id=\"checkout-name\"\n          name=\"name\"\n          required\n          value={form.name}\n          onChange={(value) => handleChange('name', value)}\n          onEnter={() => handleEnter('name')}\n          onError={(error) => handleError('name', error)}\n          onLeave={() => handleLeave('name')}\n        />\n      </InputField>\n      <View row>\n        <InputField\n          error={\n            (showErrors && (!form.expire || form.expire?.length === 0)) ||\n            Object.keys(formError.expire || {}).length > 0\n          }\n          focus={focus?.expire}\n          label={translate(L10N.LABEL_EXPIRATION)}\n          showRequired\n          success={form.expire?.length > 0 && !formError.expire}\n          value={form.expire}\n          className={style.expire}\n          testId={testId ? `${testId}-PCI-expire` : undefined}\n        >\n          <Input\n            id=\"checkout-expire\"\n            maxLength={5}\n            name=\"expire\"\n            placeholder={`${translate(L10N.LABEL_MONTH_FORMAT)}/${translate(L10N.LABEL_YEAR_FORMAT)}`}\n            required\n            test={(expire) => expire.length === 0 || (expire?.length > 0 && testExpire(expire))}\n            value={form.expire}\n            onChange={(value) => handleChange('expire', value)}\n            onEnter={() => handleEnter('expire')}\n            onError={(error) => handleError('expire', error)}\n            onLeave={() => handleLeave('expire')}\n          />\n        </InputField>\n        {showCVV && (\n          <InputField\n            id=\"checkout-cvv\"\n            error={(showErrors && (!form.cvv || form.cvv?.length === 0)) || Object.keys(formError.cvv || {}).length > 0}\n            focus={focus?.cvv}\n            label={translate(L10N.LABEL_CVV)}\n            showRequired\n            success={!formError.cvv}\n            value={form.cvv}\n            className={style.cvv}\n            testId={testId ? `${testId}-PCI-CVV` : undefined}\n          >\n            <div id=\"cvv\" className={style.input} />\n          </InputField>\n        )}\n      </View>\n\n      {responseError && (\n        <Notification error small wide>\n          {translate(L10N.NOTIFICATION_ERROR_PCI)}\n        </Notification>\n      )}\n    </View>\n  );\n};\n\nPCI.displayName = 'Mirai:Payments:PCI';\n\nPCI.propTypes = {\n  cards: PropTypes.array,\n  publicKey: PropTypes.string,\n  showCVV: PropTypes.bool,\n  showErrors: PropTypes.bool,\n  onChange: PropTypes.func,\n  onError: PropTypes.func,\n};\n\nexport { PCI };\n"],"mappings":"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"}

package/build/components/__shared__/Payment/components/PCI/PCI.module.css

@@ -6,4 +6,5 @@
 
 .input {
   box-sizing: border-box;
+  height: calc(var(--mirai-ui-space-XXS) + var(--mirai-ui-space-XL));
 }

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

@@ -9,7 +9,6 @@ const getStyle = () => {
   const {
     content,
     font,
-    fontWeight,
     inputDisabled,
     inputFontSize
   } = _ui.Theme.get();
@@ -19,7 +18,6 @@ const getStyle = () => {
         color: content,
         fontFamily: font,
         fontSize: inputFontSize,
-        fontWeight: fontWeight,
         letterSpacing: 0
       },
       '*::placeholder': 'color:' + inputDisabled,

package/build/components/__shared__/Payment/components/PCI/helpers/getStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"getStyle.js","names":["_ui","require","getStyle","content","font","fontWeight","inputDisabled","inputFontSize","Theme","get","styles","color","fontFamily","fontSize","letterSpacing","cardNumber","cvv","exports"],"sources":["../../../../../../../src/components/__shared__/Payment/components/PCI/helpers/getStyle.js"],"sourcesContent":["import { Theme } from '@mirai/ui';\n\nexport const getStyle = () => {\n  const { content, font, fontWeight, inputDisabled, inputFontSize } = Theme.get();\n\n  return {\n    styles: {\n      '*': {\n        color: content,\n        fontFamily: font,\n        fontSize: inputFontSize,\n        fontWeight: fontWeight,\n        letterSpacing: 0,\n      },\n      '*::placeholder': 'color:' + inputDisabled,\n      cardNumber: 'padding: 0;',\n      cvv: 'padding: 0;',\n    },\n  };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,GAAA,GAAAC,OAAA;AAEO,MAAMC,QAAQ,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC,UAAU;IAAEC,aAAa;IAAEC;EAAc,CAAC,GAAGC,SAAK,CAACC,GAAG,CAAC,CAAC;EAE/E,OAAO;IACLC,MAAM,EAAE;MACN,GAAG,EAAE;QACHC,KAAK,EAAER,OAAO;QACdS,UAAU,EAAER,IAAI;QAChBS,QAAQ,EAAEN,aAAa;QACvBF,UAAU,EAAEA,UAAU;QACtBS,aAAa,EAAE;MACjB,CAAC;MACD,gBAAgB,EAAE,QAAQ,GAAGR,aAAa;MAC1CS,UAAU,EAAE,aAAa;MACzBC,GAAG,EAAE;IACP;EACF,CAAC;AACH,CAAC;AAACC,OAAA,CAAAf,QAAA,GAAAA,QAAA"}
+{"version":3,"file":"getStyle.js","names":["_ui","require","getStyle","content","font","inputDisabled","inputFontSize","Theme","get","styles","color","fontFamily","fontSize","letterSpacing","cardNumber","cvv","exports"],"sources":["../../../../../../../src/components/__shared__/Payment/components/PCI/helpers/getStyle.js"],"sourcesContent":["import { Theme } from '@mirai/ui';\n\nexport const getStyle = () => {\n  const { content, font, inputDisabled, inputFontSize } = Theme.get();\n\n  return {\n    styles: {\n      '*': {\n        color: content,\n        fontFamily: font,\n        fontSize: inputFontSize,\n        letterSpacing: 0,\n      },\n      '*::placeholder': 'color:' + inputDisabled,\n      cardNumber: 'padding: 0;',\n      cvv: 'padding: 0;',\n    },\n  };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,GAAA,GAAAC,OAAA;AAEO,MAAMC,QAAQ,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC,aAAa;IAAEC;EAAc,CAAC,GAAGC,SAAK,CAACC,GAAG,CAAC,CAAC;EAEnE,OAAO;IACLC,MAAM,EAAE;MACN,GAAG,EAAE;QACHC,KAAK,EAAEP,OAAO;QACdQ,UAAU,EAAEP,IAAI;QAChBQ,QAAQ,EAAEN,aAAa;QACvBO,aAAa,EAAE;MACjB,CAAC;MACD,gBAAgB,EAAE,QAAQ,GAAGR,aAAa;MAC1CS,UAAU,EAAE,aAAa;MACzBC,GAAG,EAAE;IACP;EACF,CAAC;AACH,CAAC;AAACC,OAAA,CAAAd,QAAA,GAAAA,QAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/core",
-  "version": "0.3.249",
+  "version": "0.3.250",
   "source": "src/index.js",
   "repository": "https://gitlab.com/miraicorp/dev/frontend/core",
   "author": "JΛVI <hello@soyjavi.com>",