@lideralia/alife-uikit 1.3.15 → 1.3.17

package/dist/atoms/imgs/PendantJewelry.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function SvgPendantJewelry(props) {
+  return React.createElement("svg", (0, _extends2.default)({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMidYMid meet"
+  }, props), React.createElement("g", {
+    clipPath: "url(#pendant-jewelry_svg__clip0)"
+  }, React.createElement("path", {
+    d: "M26.0673 9.41138C26.0602 9.41744 26.053 9.42294 26.0459 9.42899C26.2669 9.7944 26.3943 10.2225 26.3943 10.6815C26.3943 12.016 25.3192 13.0974 23.9935 13.0974C22.6679 13.0974 21.5923 12.0155 21.5923 10.6815C21.5923 10.1251 21.7793 9.61335 22.0932 9.20502C22.2031 9.06193 22.3283 8.93151 22.4667 8.81649C22.8818 8.472 23.4133 8.26508 23.9935 8.26508C24.4731 8.26508 24.9194 8.40706 25.2945 8.65085C25.3131 8.63654 25.3312 8.62223 25.3492 8.60792C25.4706 8.50722 25.5822 8.3911 25.6812 8.26233C25.2032 7.92388 24.6214 7.72412 23.9941 7.72412C23.27 7.72412 22.6067 7.98937 22.0937 8.42797C21.9559 8.54574 21.8291 8.67561 21.7148 8.81649C21.3024 9.32553 21.0547 9.9749 21.0547 10.6815C21.0547 12.3121 22.3732 13.6389 23.9935 13.6389C25.6139 13.6389 26.9324 12.3121 26.9324 10.6815C26.9324 10.0745 26.7492 9.50989 26.4359 9.03992C26.3237 9.17255 26.2002 9.29747 26.0673 9.41138Z",
+    fill: "#FEAE36"
+  }), React.createElement("path", {
+    d: "M33.0583 8.84082C31.0797 8.84082 27.6728 9.52816 24.7673 13.5532C24.7673 13.5532 24.251 12.9374 24.0005 13.3528C23.7331 12.9093 23.1808 13.4805 23.1808 13.4805C20.2868 9.51991 16.9088 8.84082 14.9395 8.84082C9.01039 8.84082 4 14.5525 4 21.3093C4 28.9278 11.0879 35.241 16.7857 40.3155C19.368 42.6163 21.8076 44.7912 23.0649 46.6358L23.9995 48L24.9313 46.6358C26.1891 44.7912 28.6309 42.6163 31.2132 40.3155C36.9115 35.241 43.9989 28.9278 43.9989 21.3093C43.9989 14.5525 38.9885 8.84137 33.0572 8.84137L33.0583 8.84082Z",
+    fill: "#FEAE36"
+  }), React.createElement("path", {
+    d: "M32.2551 10.4021C30.5511 10.4021 27.6844 10.8269 25.1399 13.9192C24.8462 14.2763 24.3978 14.4733 23.9329 14.4524C23.5124 14.4337 23.1214 14.2367 22.855 13.9137C20.311 10.8253 17.4465 10.4026 15.7414 10.4026C10.3384 10.4026 5.77148 15.5239 5.77148 21.5823C5.77148 28.4133 12.2311 34.0738 17.4247 38.6238C19.7784 40.687 22.0014 42.6373 23.1476 44.291L23.9996 45.5143L24.8489 44.291C25.9952 42.6373 28.2209 40.687 30.5741 38.6238C35.7677 34.0738 42.2272 28.4133 42.2272 21.5823C42.2272 15.5239 37.6609 10.4026 32.2551 10.4026V10.4021Z",
+    fill: "#E83060"
+  }), React.createElement("mask", {
+    id: "pendant-jewelry_svg__mask0",
+    style: {
+      maskType: 'luminance'
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "5",
+    y: "10",
+    width: "38",
+    height: "36"
+  }, React.createElement("path", {
+    d: "M32.2551 10.4021C30.5511 10.4021 27.6844 10.8269 25.1399 13.9192C24.8462 14.2763 24.3978 14.4733 23.9329 14.4524C23.5124 14.4337 23.1214 14.2367 22.855 13.9137C20.311 10.8253 17.4465 10.4026 15.7414 10.4026C10.3384 10.4026 5.77148 15.5239 5.77148 21.5823C5.77148 28.4133 12.2311 34.0738 17.4247 38.6238C19.7784 40.687 22.0014 42.6373 23.1476 44.291L23.9996 45.5143L24.8489 44.291C25.9952 42.6373 28.2209 40.687 30.5741 38.6238C35.7677 34.0738 42.2272 28.4133 42.2272 21.5823C42.2272 15.5239 37.6609 10.4026 32.2551 10.4026V10.4021Z",
+    fill: "white"
+  })), React.createElement("g", {
+    mask: "url(#pendant-jewelry_svg__mask0)"
+  }, React.createElement("path", {
+    d: "M42.5357 14.6065C38.2756 3.2992 24.1063 11.3894 24.1063 11.3894C24.1063 11.3894 9.93697 3.2992 5.67688 14.6065C-0.126466 30.0087 24.1063 45.9953 24.1063 45.9953C24.1063 45.9953 48.339 30.0087 42.5357 14.6065Z",
+    fill: "#E83060"
+  }), React.createElement("path", {
+    opacity: "0.12",
+    d: "M41.3971 12.3992C36.2024 4.50714 24.1063 11.3899 24.1063 11.3899V27.2912C24.1063 27.2912 32.779 19.9137 41.3971 12.3997V12.3992Z",
+    fill: "white"
+  }), React.createElement("path", {
+    opacity: "0.24",
+    d: "M41.5475 27.2912C43.4315 23.2585 44.1572 18.91 42.5357 14.607C42.2141 13.7535 41.8215 13.0436 41.3971 12.3997L24.1063 27.2912H41.547H41.5475Z",
+    fill: "white"
+  }), React.createElement("path", {
+    opacity: "0.12",
+    d: "M41.5471 27.2912H24.1064L33.1297 38.5429C36.3032 35.4199 39.5653 31.533 41.5471 27.2912Z",
+    fill: "white"
+  }), React.createElement("path", {
+    opacity: "0.09",
+    d: "M24.1063 27.2912V45.9958C24.1063 45.9958 28.5206 43.0786 33.1296 38.5429L24.1063 27.2912Z",
+    fill: "#2A2A3C"
+  }), React.createElement("path", {
+    opacity: "0.12",
+    d: "M6.63663 27.2912C4.75213 23.258 4.02644 18.9099 5.64789 14.6065C5.96945 13.753 6.36265 13.0431 6.78647 12.3992L24.0773 27.2907H6.63663V27.2912Z",
+    fill: "#2A2A3C"
+  }), React.createElement("path", {
+    opacity: "0.18",
+    d: "M6.63663 27.2912H24.0773L15.054 38.5429C11.8805 35.4199 8.61792 31.533 6.63663 27.2912Z",
+    fill: "#2A2A3C"
+  }), React.createElement("path", {
+    opacity: "0.12",
+    d: "M24.077 27.2912V45.9958C24.077 45.9958 19.6627 43.0786 15.0537 38.5429L24.077 27.2912Z",
+    fill: "#2A2A3C"
+  })), React.createElement("path", {
+    d: "M26.7122 6.02638C26.5574 6.03904 26.3994 6.05059 26.2342 6.06215C26.3376 6.3318 26.3944 6.62457 26.3944 6.93109C26.3944 7.49241 26.2036 8.00861 25.8848 8.41914C26.0226 8.53636 26.1505 8.66568 26.2648 8.80601C26.6821 8.29532 26.9326 7.6421 26.9326 6.93109C26.9326 6.61301 26.8817 6.30704 26.7887 6.01978C26.763 6.02198 26.7373 6.02418 26.7122 6.02638Z",
+    fill: "#7F7F8A"
+  }), React.createElement("path", {
+    d: "M25.8837 8.4187C25.7727 8.56123 25.6464 8.69111 25.5069 8.80557C25.0941 9.14401 24.5669 9.34708 23.9927 9.34708C23.5185 9.34708 23.0767 9.2084 22.7048 8.96957L22.6485 9.01579C22.526 9.11595 22.4139 9.23096 22.3154 9.35754C22.7912 9.69213 23.3698 9.88859 23.9927 9.88859C24.7123 9.88859 25.3719 9.62664 25.8837 9.19244C26.0215 9.07523 26.1495 8.9459 26.2638 8.80557C26.149 8.66524 26.0215 8.53592 25.8837 8.4187Z",
+    fill: "#7F7F8A"
+  }), React.createElement("path", {
+    d: "M21.9287 8.21166L21.9478 8.19515C21.7225 7.82754 21.5918 7.39444 21.5918 6.93053C21.5918 6.5211 21.6935 6.13643 21.8718 5.79853C21.9719 5.60868 22.0966 5.43423 22.2415 5.27849C22.6795 4.80852 23.3019 4.5141 23.9931 4.5141C24.5471 4.5141 25.0568 4.70341 25.4625 5.02094C25.5517 5.01709 25.6408 5.01324 25.73 5.00828C25.8869 5.00003 26.0433 4.99012 26.1981 4.97967C25.6589 4.36332 24.8708 3.97314 23.9931 3.97314C22.9984 3.97314 22.1179 4.47338 21.5858 5.23721C21.4726 5.39956 21.3753 5.57291 21.296 5.75671C21.1407 6.11717 21.0537 6.51394 21.0537 6.93108C21.0537 7.54303 21.2396 8.1115 21.5568 8.58312C21.6695 8.4505 21.7942 8.32557 21.9281 8.21166H21.9287Z",
+    fill: "#7F7F8A"
+  }), React.createElement("path", {
+    d: "M6.60734 0.695068L6.24805 1.10175C11.1611 3.73555 16.1015 5.28523 21.0167 5.73209C21.0277 5.70402 21.038 5.67651 21.0501 5.64899C21.1152 5.49876 21.1923 5.35237 21.2798 5.21259C16.0452 4.77619 11.1305 3.10489 6.60734 0.695068Z",
+    fill: "#7F7F8A"
+  }), React.createElement("path", {
+    d: "M42.6389 0C37.6865 2.83191 32.2408 4.80534 26.4002 5.23733C26.182 5.25329 25.9638 5.2676 25.7446 5.27916C25.1643 5.31053 24.5808 5.32704 23.9929 5.32704C23.5303 5.32704 23.0704 5.31658 22.6126 5.29677C22.5519 5.34905 22.4934 5.40463 22.4377 5.46461C22.337 5.57248 22.2479 5.69079 22.1719 5.81626C22.7794 5.85038 23.3865 5.86854 23.9929 5.86854C24.6995 5.86854 25.4066 5.84488 26.1142 5.7992C26.3062 5.78655 26.4981 5.77279 26.6901 5.75683C32.1445 5.30777 37.6307 3.49944 43.078 0.357154L42.6389 0Z",
+    fill: "#7F7F8A"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "pendant-jewelry_svg__clip0"
+  }, React.createElement("rect", {
+    width: "48",
+    height: "48",
+    fill: "white"
+  }))));
+}
+
+var _default = SvgPendantJewelry;
+exports.default = _default;

package/dist/atoms/imgs/index.js

@@ -167,6 +167,12 @@ Object.defineProperty(exports, "Music", {
     return _Music.default;
   }
 });
+Object.defineProperty(exports, "PendantJewelry", {
+  enumerable: true,
+  get: function () {
+    return _PendantJewelry.default;
+  }
+});
 Object.defineProperty(exports, "Plant", {
   enumerable: true,
   get: function () {
@@ -266,6 +272,8 @@ var _Management = _interopRequireDefault(require("./Management"));
 
 var _Music = _interopRequireDefault(require("./Music"));
 
+var _PendantJewelry = _interopRequireDefault(require("./PendantJewelry"));
+
 var _Plant = _interopRequireDefault(require("./Plant"));
 
 var _Sunrise = _interopRequireDefault(require("./Sunrise"));

package/dist/organisms/Cards/PayInfo.js

@@ -79,7 +79,11 @@ CardPayInfo.Content = props => {
     customColor,
     customTextColor,
     labelTermsAndConditions,
-    handleSubmit
+    handleSubmit,
+    isDeliverable,
+    countryIso,
+    deliveryCountryIso,
+    invoiceRequested
   } = props;
   const [isCompletedPayment, setIsCompletedPayment] = (0, _react.useState)(false);
   const [cardComplete, setCardComplete] = (0, _react.useState)({
@@ -89,10 +93,11 @@ CardPayInfo.Content = props => {
   });
   const stripe = (0, _reactStripeJs.useStripe)();
   const elements = (0, _reactStripeJs.useElements)();
-  const [isNeedInvoice, setIsNeedInvoice] = (0, _react.useState)(false);
+  const [isNeedInvoice, setIsNeedInvoice] = (0, _react.useState)(invoiceRequested || false);
   const [infoState, setInfoState] = (0, _react.useState)({
     payment_method_id: '',
-    invoice_requested: false,
+    invoice_requested: isNeedInvoice || false,
+    invoice_with_same_delivery_address: !!(invoiceRequested && isDeliverable),
     alias: '',
     surname: '',
     dni: '',
@@ -102,7 +107,17 @@ CardPayInfo.Content = props => {
     cp: '',
     province: '',
     country: '',
-    country_iso: ''
+    country_iso: countryIso || '',
+    delivery_alias: '',
+    delivery_surname: '',
+    delivery_nif_cif: '',
+    delivery_email: '',
+    delivery_address: '',
+    delivery_location: '',
+    delivery_cp: '',
+    delivery_province: '',
+    delivery_country: '',
+    delivery_country_iso: deliveryCountryIso || ''
   });
   const [formValid, setFormValid] = (0, _react.useState)({
     form_valid: true
@@ -111,18 +126,16 @@ CardPayInfo.Content = props => {
     email_valid: true
   });
   (0, _react.useEffect)(() => {
-    if (!(infoState !== null && infoState !== void 0 && infoState.invoice_requested)) {
+    const emailRe = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    const deliveryValid = !isDeliverable || (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_alias) && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_alias) !== '' && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_nif_cif) && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_nif_cif) !== '' && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_email) && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_email) !== '' && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_address) && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_address) !== '' && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_location) && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_location) !== '' && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_cp) && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_cp) !== '' && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_province) && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_province) !== '' && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_country_iso) && (infoState === null || infoState === void 0 ? void 0 : infoState.delivery_country_iso) !== '';
+
+    if (!(infoState !== null && infoState !== void 0 && infoState.invoice_requested) || infoState !== null && infoState !== void 0 && infoState.invoice_with_same_delivery_address) {
       setFormValid({
-        form_valid: true
+        form_valid: !!deliveryValid
       });
     } else {
       if (infoState !== null && infoState !== void 0 && infoState.email && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== '') {
-        const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-
-        if (re.test(infoState.email)) {
-          setFormValid({
-            form_valid: true
-          });
+        if (emailRe.test(infoState.email)) {
           setEmailValid({
             email_valid: true
           });
@@ -133,15 +146,14 @@ CardPayInfo.Content = props => {
           setEmailValid({
             email_valid: false
           });
+          return;
         }
       }
 
-      if (infoState !== null && infoState !== void 0 && infoState.dni && (infoState === null || infoState === void 0 ? void 0 : infoState.dni) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.dni) !== '' && infoState !== null && infoState !== void 0 && infoState.email && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== '' && infoState !== null && infoState !== void 0 && infoState.address && (infoState === null || infoState === void 0 ? void 0 : infoState.address) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.address) !== '' && infoState !== null && infoState !== void 0 && infoState.location && (infoState === null || infoState === void 0 ? void 0 : infoState.location) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.location) !== '' && infoState !== null && infoState !== void 0 && infoState.cp && (infoState === null || infoState === void 0 ? void 0 : infoState.cp) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.cp) !== '' && infoState !== null && infoState !== void 0 && infoState.province && (infoState === null || infoState === void 0 ? void 0 : infoState.province) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.province) !== '' && infoState !== null && infoState !== void 0 && infoState.country && (infoState === null || infoState === void 0 ? void 0 : infoState.country) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.country) !== '') {
-        const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-
-        if (re.test(infoState.email)) {
+      if (infoState !== null && infoState !== void 0 && infoState.dni && (infoState === null || infoState === void 0 ? void 0 : infoState.dni) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.dni) !== '' && infoState !== null && infoState !== void 0 && infoState.email && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.email) !== '' && infoState !== null && infoState !== void 0 && infoState.address && (infoState === null || infoState === void 0 ? void 0 : infoState.address) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.address) !== '' && infoState !== null && infoState !== void 0 && infoState.location && (infoState === null || infoState === void 0 ? void 0 : infoState.location) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.location) !== '' && infoState !== null && infoState !== void 0 && infoState.cp && (infoState === null || infoState === void 0 ? void 0 : infoState.cp) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.cp) !== '' && infoState !== null && infoState !== void 0 && infoState.province && (infoState === null || infoState === void 0 ? void 0 : infoState.province) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.province) !== '' && infoState !== null && infoState !== void 0 && infoState.country_iso && (infoState === null || infoState === void 0 ? void 0 : infoState.country_iso) !== null && (infoState === null || infoState === void 0 ? void 0 : infoState.country_iso) !== '') {
+        if (emailRe.test(infoState.email)) {
           setFormValid({
-            form_valid: true
+            form_valid: !!deliveryValid
           });
           setEmailValid({
             email_valid: true
@@ -154,11 +166,13 @@ CardPayInfo.Content = props => {
             email_valid: false
           });
         }
-      } else setFormValid({
-        form_valid: false
-      });
+      } else {
+        setFormValid({
+          form_valid: false
+        });
+      }
     }
-  }, [infoState]);
+  }, [infoState, isDeliverable]);
 
   const handleCardChange = field => e => {
     const updatedCardComplete = _objectSpread(_objectSpread({}, cardComplete), {}, {
@@ -204,7 +218,10 @@ CardPayInfo.Content = props => {
     minWidth: "290px",
     position: "relative",
     width: "100%"
-  }, props), _react.default.createElement(_Layout.Box, {
+  }, props), _react.default.createElement(CardPayInfo.Delivery, (0, _extends2.default)({
+    infoState: infoState,
+    setInfoState: setInfoState
+  }, props)), _react.default.createElement(_Layout.Box, {
     padding: 3
   }, _react.default.createElement(_Layout.Flex, {
     width: "100%"
@@ -305,6 +322,7 @@ CardPayInfo.Body = props => {
   const {
     labelInvoice,
     labelNeedInvoice,
+    labelInvoiceWithSameDeliveryAddress,
     labelName,
     name,
     labelSurname,
@@ -329,8 +347,10 @@ CardPayInfo.Body = props => {
     infoState,
     setInfoState,
     labelInvoiceInfo,
-    emailValid
+    emailValid,
+    isDeliverable
   } = props;
+  const [invoiceWithSameDeliveryAddress, setInvoiceWithSameDeliveryAddress] = (0, _react.useState)(!!isDeliverable);
 
   const handleChangeInputs = (nameInput, value) => {
     setInfoState(_objectSpread(_objectSpread({}, infoState), {}, {
@@ -360,26 +380,42 @@ CardPayInfo.Body = props => {
     isDisabled: false,
     defaultChecked: isNeedInvoice,
     onClick: () => {
-      setIsNeedInvoice(!isNeedInvoice);
+      const enabling = !isNeedInvoice;
+      setIsNeedInvoice(enabling);
+      setInvoiceWithSameDeliveryAddress(!!isDeliverable);
       setInfoState(_objectSpread(_objectSpread({}, infoState), {}, {
-        invoice_requested: !isNeedInvoice,
-        alias: isNeedInvoice ? '' : infoState.alias,
-        surname: isNeedInvoice ? '' : infoState.surname,
-        dni: isNeedInvoice ? '' : infoState.dni,
-        email: isNeedInvoice ? '' : infoState.email,
-        address: isNeedInvoice ? '' : infoState.address,
-        location: isNeedInvoice ? '' : infoState.location,
-        cp: isNeedInvoice ? '' : infoState.cp,
-        province: isNeedInvoice ? '' : infoState.province,
-        country: isNeedInvoice ? '' : infoState.country,
-        country_iso: isNeedInvoice ? '' : infoState.country_iso
+        invoice_requested: enabling,
+        invoice_with_same_delivery_address: !!(enabling && isDeliverable),
+        alias: enabling ? infoState.alias : '',
+        surname: enabling ? infoState.surname : '',
+        dni: enabling ? infoState.dni : '',
+        email: enabling ? infoState.email : '',
+        address: enabling ? infoState.address : '',
+        location: enabling ? infoState.location : '',
+        cp: enabling ? infoState.cp : '',
+        province: enabling ? infoState.province : '',
+        country: enabling ? infoState.country : '',
+        country_iso: enabling ? infoState.country_iso : ''
       }));
     }
   })), isNeedInvoice && _react.default.createElement(_react.default.Fragment, null, labelInvoiceInfo ? _react.default.createElement(_Typography.Text, {
     sizeText: "display12",
     color: "black60",
     fontWeight: "bold"
-  }, labelInvoiceInfo) : null, _react.default.createElement(_Field.Field, {
+  }, labelInvoiceInfo) : null, labelInvoiceWithSameDeliveryAddress && isDeliverable && _react.default.createElement(_Layout.Box, {
+    marginX: "5px",
+    marginY: "10px"
+  }, _react.default.createElement(_Checkbox.Checkbox, {
+    label: labelInvoiceWithSameDeliveryAddress,
+    isDisabled: false,
+    defaultChecked: invoiceWithSameDeliveryAddress,
+    onClick: () => {
+      setInvoiceWithSameDeliveryAddress(!invoiceWithSameDeliveryAddress);
+      setInfoState(_objectSpread(_objectSpread({}, infoState), {}, {
+        invoice_with_same_delivery_address: !invoiceWithSameDeliveryAddress
+      }));
+    }
+  })), !invoiceWithSameDeliveryAddress && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Field.Field, {
     label: labelName,
     color: "black60",
     fontWeight: "bold"
@@ -481,13 +517,152 @@ CardPayInfo.Body = props => {
       country_iso: content.value
     })),
     sizeInput: "big",
-    defaultValue: infoState.country,
+    defaultValue: (optionsCountry === null || optionsCountry === void 0 ? void 0 : optionsCountry.find(o => o.value === infoState.country_iso)) || null,
     options: optionsCountry,
     menuPlacement: "top"
-  }))))));
+  })))))));
+};
+
+CardPayInfo.Delivery = props => {
+  var _ref2;
+
+  const {
+    isDeliverable,
+    labelDelivery,
+    labelDeliveryName,
+    labelDeliverySurname,
+    labelDeliveryDNI,
+    labelDeliveryEmail,
+    labelDeliveryAddress,
+    labelDeliveryLocation,
+    labelDeliveryCP,
+    labelDeliveryProvince,
+    labelDeliveryCountry,
+    optionsDeliveryCountry,
+    optionsCountry,
+    infoState,
+    setInfoState
+  } = props;
+  if (!isDeliverable) return null;
+
+  const handleChangeInputs = (nameInput, value) => {
+    setInfoState(_objectSpread(_objectSpread({}, infoState), {}, {
+      [nameInput]: value
+    }));
+  };
+
+  return _react.default.createElement(_Layout.Box, {
+    borderTopColor: "black12",
+    borderTopStyle: "solid",
+    borderTopWidth: "1px",
+    padding: 3,
+    paddingBottom: 0
+  }, _react.default.createElement(_Layout.Flex, {
+    width: "100%"
+  }, _react.default.createElement(_Icon.Icon, {
+    color: "orange",
+    sizeIcon: "display24"
+  }, _react.default.createElement(_Icons.IconLocationAlt, null)), _react.default.createElement(_Typography.Text, {
+    marginLeft: "10px",
+    fontWeight: "bold"
+  }, labelDelivery)), _react.default.createElement(_Field.Field, {
+    label: labelDeliveryName,
+    color: "black60",
+    fontWeight: "bold",
+    marginTop: "10px"
+  }, _react.default.createElement(_Input.Input, {
+    id: "delivery_alias",
+    sizeInput: "big",
+    name: "delivery_alias",
+    onChange: handleChangeInputs
+  })), _react.default.createElement(_Field.Field, {
+    label: labelDeliverySurname,
+    color: "black60",
+    fontWeight: "bold"
+  }, _react.default.createElement(_Input.Input, {
+    id: "delivery_surname",
+    sizeInput: "big",
+    name: "delivery_surname",
+    onChange: handleChangeInputs
+  })), _react.default.createElement(_Field.Field, {
+    label: labelDeliveryDNI,
+    color: "black60",
+    fontWeight: "bold"
+  }, _react.default.createElement(_Input.Input, {
+    id: "delivery_nif_cif",
+    sizeInput: "big",
+    name: "delivery_nif_cif",
+    onChange: handleChangeInputs
+  })), _react.default.createElement(_Field.Field, {
+    label: labelDeliveryEmail,
+    color: "black60",
+    fontWeight: "bold"
+  }, _react.default.createElement(_Input.Input, {
+    id: "delivery_email",
+    sizeInput: "big",
+    name: "delivery_email",
+    type: "email",
+    onChange: handleChangeInputs
+  })), _react.default.createElement(_Field.Field, {
+    label: labelDeliveryAddress,
+    color: "black60",
+    fontWeight: "bold"
+  }, _react.default.createElement(_Input.Input, {
+    id: "delivery_address",
+    sizeInput: "big",
+    name: "delivery_address",
+    onChange: handleChangeInputs
+  })), _react.default.createElement(_Field.Field, {
+    label: labelDeliveryLocation,
+    color: "black60",
+    fontWeight: "bold"
+  }, _react.default.createElement(_Input.Input, {
+    id: "delivery_location",
+    sizeInput: "big",
+    name: "delivery_location",
+    onChange: handleChangeInputs
+  })), _react.default.createElement(_Field.Field, {
+    label: labelDeliveryCP,
+    color: "black60",
+    fontWeight: "bold"
+  }, _react.default.createElement(_Input.Input, {
+    id: "delivery_cp",
+    sizeInput: "big",
+    name: "delivery_cp",
+    onChange: handleChangeInputs
+  })), _react.default.createElement(_Field.Field, {
+    label: labelDeliveryProvince,
+    color: "black60",
+    fontWeight: "bold"
+  }, _react.default.createElement(_Input.Input, {
+    id: "delivery_province",
+    sizeInput: "big",
+    name: "delivery_province",
+    onChange: handleChangeInputs
+  })), _react.default.createElement(_Layout.Box, {
+    marginBottom: "10px"
+  }, _react.default.createElement(_Field.Field, {
+    label: labelDeliveryCountry,
+    color: "black60",
+    fontWeight: "bold",
+    sizeText: "display16"
+  }, _react.default.createElement(_Select.SelectInput, {
+    readOnly: false,
+    isSearchable: true,
+    id: "delivery_country",
+    name: "delivery_country",
+    onChange: (id, content) => setInfoState(_objectSpread(_objectSpread({}, infoState), {}, {
+      delivery_country: content.label,
+      delivery_country_iso: content.value
+    })),
+    sizeInput: "big",
+    defaultValue: ((_ref2 = optionsDeliveryCountry || optionsCountry) === null || _ref2 === void 0 ? void 0 : _ref2.find(o => o.value === infoState.delivery_country_iso)) || null,
+    options: optionsDeliveryCountry || optionsCountry,
+    menuPlacement: "top"
+  }))));
 };
 
-CardPayInfo.Footer = _ref2 => {
+CardPayInfo.Footer = _ref3 => {
   let {
     labelButton,
     buttonDisabled,
@@ -498,7 +673,7 @@ CardPayInfo.Footer = _ref2 => {
     customTextColor,
     labelTermsAndConditions,
     isCompletedPayment
-  } = _ref2;
+  } = _ref3;
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Layout.Box, {
     padding: 3,
     borderTopColor: "black12",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lideralia/alife-uikit",
-  "version": "1.3.15",
+  "version": "1.3.17",
   "description": "Librería y documentación de componentes, basada en el Design System de Alife.",
   "homepage": "https://github.com/lideralia/alife-frontend-components#readme",
   "bugs": {