@mirai/core 0.3.173 → 0.3.176

package/build/components/Checkout/partials/__tests__/__snapshots__/Checkout.Form.test.js.snap

@@ -39,6 +39,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-firstName"
             name="firstName"
             required=""
             type="text"
@@ -68,6 +69,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-lastName"
             name="lastName"
             required=""
             type="text"
@@ -97,6 +99,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-email"
             name="email"
             required=""
             type="email"
@@ -124,6 +127,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             </span>
             <select
               class="select empty input prefix withLabel empty"
+              id="checkout-phone"
               name="phone-prefix"
               required=""
             >
@@ -1208,6 +1212,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             </span>
             <input
               class="input input withLabel"
+              id="checkout-phone"
               maxlength="12"
               name="phone-phone"
               required=""
@@ -1234,6 +1239,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-company"
             name="company"
             type="text"
             value=""
@@ -1257,6 +1263,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
           </span>
           <textarea
             class="input input withLabel multiLine"
+            id="checkout-comments"
             name="comments"
           />
         </div>
@@ -1270,6 +1277,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
     <span
       class="text small"
       hint=""
+      id="checkout-undefined"
       label="undefined"
       name="undefined"
     >
@@ -1278,6 +1286,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-hotel_future_offers"
     >
       <div
         class="checkbox"
@@ -1298,6 +1307,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-joinClub"
     >
       <div
         class="checkbox"
@@ -1318,6 +1328,7 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-privacyPolicy"
     >
       <div
         class="checkbox"
@@ -1348,12 +1359,14 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
       class="view"
     >
       <div
-        class="pressable"
+        class="pressable disabled"
+        disabled=""
       >
         <div
           class="radio"
         >
           <input
+            checked=""
             class="input"
             name="method"
             type="radio"
@@ -1363,11 +1376,11 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
             class="checkmark"
           />
         </div>
-        <span
-          class="text bold paragraph"
+        <h3
+          class="text bold headline-3"
         >
           payments.label.card
-        </span>
+        </h3>
         <img
           alt="VISA"
           class="view"
@@ -1379,6 +1392,110 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
           src="https://static.mirai.com/payments/images/cards/mastercard.png"
         />
       </div>
+      <div
+        class="view"
+      >
+        <fieldset
+          autocomplete="off"
+        >
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_number
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-card"
+                  maxlength="19"
+                  name="card"
+                  placeholder="0000 0000 0000 0000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_name
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-name"
+                  maxlength="100"
+                  minlength="3"
+                  name="name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.expiration
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-expire"
+                  maxlength="5"
+                  name="expire"
+                  placeholder="payments.label.month_format/payments.label.year_format"
+                  required=""
+                  type="inputDate"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
     </div>
     <div
       class="view"
@@ -1412,6 +1529,118 @@ exports[`component:<Checkout> partial:<Form> inherit:className 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="pressable container overflow"
+    style="height: 768px;"
+  >
+    <div
+      class="view fit modal"
+    >
+      <div
+        class="view row header hideBack"
+      >
+        <button
+          class="pressable button small squared transparent button"
+        >
+          <span
+            class="icon headline-3 icon"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 0h24v24H0V0z"
+                fill="none"
+              />
+              <path
+                d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="scrollview vertical notIndicator"
+      >
+        <div
+          class="view"
+        >
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.payment_terms
+            </span>
+            <span
+              class="text small"
+            >
+              Prepago de 100%: Tarjeta de crédito o Amazon Pay
+            </span>
+          </div>
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.cancellation_policy
+            </span>
+            <span
+              class="text small"
+            >
+              Para que la reserva quede confirmada, es necesario el cobro por anticipado del 100% de toda la estancia reservada. Recibirá un cargo en su tarjeta por dicho importe. Sólo entonces su confirmación tendrá validez. El importe no será devuelto bajo ninguna circunstancia.
+            </span>
+          </div>
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.others_terms
+            </span>
+            <span
+              class="text small"
+            >
+              <span
+                class="text small wide"
+              >
+                Check- in a partir de las 15.00h. 
+              </span>
+              <span
+                class="text small wide"
+              >
+                Check - out hasta las 12.00h. 
+              </span>
+              <span
+                class="text small wide"
+              >
+                Los niños de 3 a 12 años podrán acceder a las instalaciones dedicadas a su uso y disfrute.
+              </span>
+              <span
+                class="text small wide"
+              >
+                En caso de alojarse con bebés, éstos no incluyen régimen alguno.
+              </span>
+              <span
+                class="text small wide"
+              >
+                Acceso spa infantil para bebés 8.50€ al día.
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
@@ -1454,6 +1683,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-firstName"
             name="firstName"
             required=""
             type="text"
@@ -1483,6 +1713,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-lastName"
             name="lastName"
             required=""
             type="text"
@@ -1512,6 +1743,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-email"
             name="email"
             required=""
             type="email"
@@ -1539,6 +1771,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             </span>
             <select
               class="select empty input prefix withLabel empty"
+              id="checkout-phone"
               name="phone-prefix"
               required=""
             >
@@ -2623,6 +2856,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             </span>
             <input
               class="input input withLabel"
+              id="checkout-phone"
               maxlength="12"
               name="phone-phone"
               required=""
@@ -2649,6 +2883,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-company"
             name="company"
             type="text"
             value=""
@@ -2672,6 +2907,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
           </span>
           <textarea
             class="input input withLabel multiLine"
+            id="checkout-comments"
             name="comments"
           />
         </div>
@@ -2685,6 +2921,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
     <span
       class="text small"
       hint=""
+      id="checkout-undefined"
       label="undefined"
       name="undefined"
     >
@@ -2693,6 +2930,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-hotel_future_offers"
     >
       <div
         class="checkbox"
@@ -2713,6 +2951,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-joinClub"
     >
       <div
         class="checkbox"
@@ -2733,6 +2972,7 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-privacyPolicy"
     >
       <div
         class="checkbox"
@@ -2763,12 +3003,14 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
       class="view"
     >
       <div
-        class="pressable"
+        class="pressable disabled"
+        disabled=""
       >
         <div
           class="radio"
         >
           <input
+            checked=""
             class="input"
             name="method"
             type="radio"
@@ -2778,11 +3020,11 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
             class="checkmark"
           />
         </div>
-        <span
-          class="text bold paragraph"
+        <h3
+          class="text bold headline-3"
         >
           payments.label.card
-        </span>
+        </h3>
         <img
           alt="VISA"
           class="view"
@@ -2794,6 +3036,110 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
           src="https://static.mirai.com/payments/images/cards/mastercard.png"
         />
       </div>
+      <div
+        class="view"
+      >
+        <fieldset
+          autocomplete="off"
+        >
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_number
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-card"
+                  maxlength="19"
+                  name="card"
+                  placeholder="0000 0000 0000 0000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_name
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-name"
+                  maxlength="100"
+                  minlength="3"
+                  name="name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.expiration
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-expire"
+                  maxlength="5"
+                  name="expire"
+                  placeholder="payments.label.month_format/payments.label.year_format"
+                  required=""
+                  type="inputDate"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
     </div>
     <div
       class="view"
@@ -2827,6 +3173,118 @@ exports[`component:<Checkout> partial:<Form> renders 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="pressable container overflow"
+    style="height: 768px;"
+  >
+    <div
+      class="view fit modal"
+    >
+      <div
+        class="view row header hideBack"
+      >
+        <button
+          class="pressable button small squared transparent button"
+        >
+          <span
+            class="icon headline-3 icon"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 0h24v24H0V0z"
+                fill="none"
+              />
+              <path
+                d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="scrollview vertical notIndicator"
+      >
+        <div
+          class="view"
+        >
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.payment_terms
+            </span>
+            <span
+              class="text small"
+            >
+              Prepago de 100%: Tarjeta de crédito o Amazon Pay
+            </span>
+          </div>
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.cancellation_policy
+            </span>
+            <span
+              class="text small"
+            >
+              Para que la reserva quede confirmada, es necesario el cobro por anticipado del 100% de toda la estancia reservada. Recibirá un cargo en su tarjeta por dicho importe. Sólo entonces su confirmación tendrá validez. El importe no será devuelto bajo ninguna circunstancia.
+            </span>
+          </div>
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.others_terms
+            </span>
+            <span
+              class="text small"
+            >
+              <span
+                class="text small wide"
+              >
+                Check- in a partir de las 15.00h. 
+              </span>
+              <span
+                class="text small wide"
+              >
+                Check - out hasta las 12.00h. 
+              </span>
+              <span
+                class="text small wide"
+              >
+                Los niños de 3 a 12 años podrán acceder a las instalaciones dedicadas a su uso y disfrute.
+              </span>
+              <span
+                class="text small wide"
+              >
+                En caso de alojarse con bebés, éstos no incluyen régimen alguno.
+              </span>
+              <span
+                class="text small wide"
+              >
+                Acceso spa infantil para bebés 8.50€ al día.
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
@@ -2870,6 +3328,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-firstName"
             name="firstName"
             required=""
             type="text"
@@ -2899,6 +3358,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-lastName"
             name="lastName"
             required=""
             type="text"
@@ -2928,6 +3388,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-email"
             name="email"
             required=""
             type="email"
@@ -2955,6 +3416,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             </span>
             <select
               class="select empty input prefix withLabel empty"
+              id="checkout-phone"
               name="phone-prefix"
               required=""
             >
@@ -4039,6 +4501,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             </span>
             <input
               class="input input withLabel"
+              id="checkout-phone"
               maxlength="12"
               name="phone-phone"
               required=""
@@ -4065,6 +4528,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-company"
             name="company"
             type="text"
             value=""
@@ -4088,6 +4552,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
           </span>
           <textarea
             class="input input withLabel multiLine"
+            id="checkout-comments"
             name="comments"
           />
         </div>
@@ -4101,6 +4566,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
     <span
       class="text small"
       hint=""
+      id="checkout-undefined"
       label="undefined"
       name="undefined"
     >
@@ -4109,6 +4575,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-hotel_future_offers"
     >
       <div
         class="checkbox"
@@ -4129,6 +4596,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-joinClub"
     >
       <div
         class="checkbox"
@@ -4149,6 +4617,7 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-privacyPolicy"
     >
       <div
         class="checkbox"
@@ -4179,12 +4648,14 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
       class="view"
     >
       <div
-        class="pressable"
+        class="pressable disabled"
+        disabled=""
       >
         <div
           class="radio"
         >
           <input
+            checked=""
             class="input"
             name="method"
             type="radio"
@@ -4194,11 +4665,11 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
             class="checkmark"
           />
         </div>
-        <span
-          class="text bold paragraph"
+        <h3
+          class="text bold headline-3"
         >
           payments.label.card
-        </span>
+        </h3>
         <img
           alt="VISA"
           class="view"
@@ -4210,6 +4681,110 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
           src="https://static.mirai.com/payments/images/cards/mastercard.png"
         />
       </div>
+      <div
+        class="view"
+      >
+        <fieldset
+          autocomplete="off"
+        >
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_number
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-card"
+                  maxlength="19"
+                  name="card"
+                  placeholder="0000 0000 0000 0000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_name
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-name"
+                  maxlength="100"
+                  minlength="3"
+                  name="name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.expiration
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-expire"
+                  maxlength="5"
+                  name="expire"
+                  placeholder="payments.label.month_format/payments.label.year_format"
+                  required=""
+                  type="inputDate"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
     </div>
     <div
       class="view"
@@ -4243,6 +4818,118 @@ exports[`component:<Checkout> partial:<Form> testID 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="pressable container overflow"
+    style="height: 768px;"
+  >
+    <div
+      class="view fit modal"
+    >
+      <div
+        class="view row header hideBack"
+      >
+        <button
+          class="pressable button small squared transparent button"
+        >
+          <span
+            class="icon headline-3 icon"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 0h24v24H0V0z"
+                fill="none"
+              />
+              <path
+                d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="scrollview vertical notIndicator"
+      >
+        <div
+          class="view"
+        >
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.payment_terms
+            </span>
+            <span
+              class="text small"
+            >
+              Prepago de 100%: Tarjeta de crédito o Amazon Pay
+            </span>
+          </div>
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.cancellation_policy
+            </span>
+            <span
+              class="text small"
+            >
+              Para que la reserva quede confirmada, es necesario el cobro por anticipado del 100% de toda la estancia reservada. Recibirá un cargo en su tarjeta por dicho importe. Sólo entonces su confirmación tendrá validez. El importe no será devuelto bajo ninguna circunstancia.
+            </span>
+          </div>
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.others_terms
+            </span>
+            <span
+              class="text small"
+            >
+              <span
+                class="text small wide"
+              >
+                Check- in a partir de las 15.00h. 
+              </span>
+              <span
+                class="text small wide"
+              >
+                Check - out hasta las 12.00h. 
+              </span>
+              <span
+                class="text small wide"
+              >
+                Los niños de 3 a 12 años podrán acceder a las instalaciones dedicadas a su uso y disfrute.
+              </span>
+              <span
+                class="text small wide"
+              >
+                En caso de alojarse con bebés, éstos no incluyen régimen alguno.
+              </span>
+              <span
+                class="text small wide"
+              >
+                Acceso spa infantil para bebés 8.50€ al día.
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
@@ -4285,6 +4972,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-firstName"
             name="firstName"
             required=""
             type="text"
@@ -4314,6 +5002,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-lastName"
             name="lastName"
             required=""
             type="text"
@@ -4343,6 +5032,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-email"
             name="email"
             required=""
             type="email"
@@ -4370,6 +5060,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             </span>
             <select
               class="select empty input prefix withLabel empty"
+              id="checkout-phone"
               name="phone-prefix"
               required=""
             >
@@ -5454,6 +6145,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             </span>
             <input
               class="input input withLabel"
+              id="checkout-phone"
               maxlength="12"
               name="phone-phone"
               required=""
@@ -5480,6 +6172,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
           </span>
           <input
             class="input input withLabel"
+            id="checkout-company"
             name="company"
             type="text"
             value=""
@@ -5503,6 +6196,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
           </span>
           <textarea
             class="input input withLabel multiLine"
+            id="checkout-comments"
             name="comments"
           />
         </div>
@@ -5516,6 +6210,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
     <span
       class="text small"
       hint=""
+      id="checkout-undefined"
       label="undefined"
       name="undefined"
     >
@@ -5524,6 +6219,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-hotel_future_offers"
     >
       <div
         class="checkbox"
@@ -5544,6 +6240,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-joinClub"
     >
       <div
         class="checkbox"
@@ -5564,6 +6261,7 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
     <div
       class="pressable inputOption"
       hint=""
+      id="checkout-privacyPolicy"
     >
       <div
         class="checkbox"
@@ -5594,12 +6292,14 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
       class="view"
     >
       <div
-        class="pressable"
+        class="pressable disabled"
+        disabled=""
       >
         <div
           class="radio"
         >
           <input
+            checked=""
             class="input"
             name="method"
             type="radio"
@@ -5609,11 +6309,11 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
             class="checkmark"
           />
         </div>
-        <span
-          class="text bold paragraph"
+        <h3
+          class="text bold headline-3"
         >
           payments.label.card
-        </span>
+        </h3>
         <img
           alt="VISA"
           class="view"
@@ -5625,6 +6325,110 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
           src="https://static.mirai.com/payments/images/cards/mastercard.png"
         />
       </div>
+      <div
+        class="view"
+      >
+        <fieldset
+          autocomplete="off"
+        >
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_number
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-card"
+                  maxlength="19"
+                  name="card"
+                  placeholder="0000 0000 0000 0000"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.card_name
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-name"
+                  maxlength="100"
+                  minlength="3"
+                  name="name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="view inputContainer"
+          >
+            <div
+              class="view row inputBorder"
+            >
+              <div
+                class="view wide content"
+              >
+                <span
+                  class="text paragraph text label"
+                >
+                  payments.label.expiration
+                  <span
+                    class="required"
+                  >
+                     *
+                  </span>
+                </span>
+                <input
+                  class="input input withLabel"
+                  id="checkout-expire"
+                  maxlength="5"
+                  name="expire"
+                  placeholder="payments.label.month_format/payments.label.year_format"
+                  required=""
+                  type="inputDate"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
     </div>
     <div
       class="view"
@@ -5658,5 +6462,117 @@ exports[`component:<Checkout> partial:<Form> with a store 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="pressable container overflow"
+    style="height: 768px;"
+  >
+    <div
+      class="view fit modal"
+    >
+      <div
+        class="view row header hideBack"
+      >
+        <button
+          class="pressable button small squared transparent button"
+        >
+          <span
+            class="icon headline-3 icon"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 0h24v24H0V0z"
+                fill="none"
+              />
+              <path
+                d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+      <div
+        class="scrollview vertical notIndicator"
+      >
+        <div
+          class="view"
+        >
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.payment_terms
+            </span>
+            <span
+              class="text small"
+            >
+              Prepago de 100%: Tarjeta de crédito o Amazon Pay
+            </span>
+          </div>
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.cancellation_policy
+            </span>
+            <span
+              class="text small"
+            >
+              Para que la reserva quede confirmada, es necesario el cobro por anticipado del 100% de toda la estancia reservada. Recibirá un cargo en su tarjeta por dicho importe. Sólo entonces su confirmación tendrá validez. El importe no será devuelto bajo ninguna circunstancia.
+            </span>
+          </div>
+          <div
+            class="view"
+          >
+            <span
+              class="text bold small"
+            >
+              common.label.others_terms
+            </span>
+            <span
+              class="text small"
+            >
+              <span
+                class="text small wide"
+              >
+                Check- in a partir de las 15.00h. 
+              </span>
+              <span
+                class="text small wide"
+              >
+                Check - out hasta las 12.00h. 
+              </span>
+              <span
+                class="text small wide"
+              >
+                Los niños de 3 a 12 años podrán acceder a las instalaciones dedicadas a su uso y disfrute.
+              </span>
+              <span
+                class="text small wide"
+              >
+                En caso de alojarse con bebés, éstos no incluyen régimen alguno.
+              </span>
+              <span
+                class="text small wide"
+              >
+                Acceso spa infantil para bebés 8.50€ al día.
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;