Pagamento

Reviewed

HTML
View
Context
Info
Notes


        
        <!-- Error rendering component -->
<!-- Could not render component '@cart--flights' - component not found. -->
<!-- Error: Could not render component '@cart--flights' - component not found.
    at Object.render (/Users/antoniomatera/Sites/adb/node_modules/@frctl/handlebars/src/helpers/render.js:23:19)
    at Object.helperWrapper (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/index.js:130:23)
    at Object.<anonymous> (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/lib/utils.js:29:28)
    at Object.wrapper (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
    at eval (eval at createFunctionContext (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:11:102)
    at Object.prog (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/runtime.js:268:12)
    at Object.prepareAndResolveMarkers (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/index.js:92:17)
    at Object.fn (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/lib/utils.js:29:28)
    at fn (/Users/antoniomatera/Sites/adb/node_modules/handlebars-layouts/index.js:41:17)
    at Object.applyAction (/Users/antoniomatera/Sites/adb/node_modules/handlebars-layouts/index.js:54:11)
    at Array.reduce (<anonymous>)
    at Object.block (/Users/antoniomatera/Sites/adb/node_modules/handlebars-layouts/index.js:171:43)
    at Object.helperWrapper (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/index.js:130:23)
    at Object.<anonymous> (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/lib/utils.js:29:28)
    at Object.wrapper (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
    at Object.eval [as main] (eval at createFunctionContext (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:15:104) -->


        {{#extend "@template-master--checkout"}}

  {{!-- HEADER --}}
  {{#content "header"}}
    {{ render "@header--progress" header merge=true }}
  {{/content}}

  {{!-- FOOTER --}}
  {{#content "footer"}}
  {{/content}}

  {{!-- MAIN --}}
	{{#content "main"}}

    <div grid="grid" class="u-pt-space-64 o-sticky-container">
      <div grid="4@lg offset-8@lg last@lg" class="o-sticky--mobile">
        {{ render "@cart--flights" cart merge=true }}
      </div>
      
      <div grid="6@lg">
        <div class="o-flexgrid o-flexgrid--antipodes">
          <div class="o-flexgrid__item">
            <h1 class="u-typo-level-6 u-color-night-100">Inserisci i dati di pagamento</h1>
          </div>
          <div class="o-flexgrid__item">
            <p class="u-typo-level-1 u-color-night-80"><sup>*</sup>campi obbligatori</p>
          </div>
        </div>

        <form class="c-form u-mt-space-32 u-mt-space-64@md">
          
          <div>{{> @radiobutton radio-payment-1 }}</div>
          <div class="u-mt-space-8">{{> @radiobutton radio-payment-2 }}</div>

          {{!-- DATI ACQUIRENTE --}}
          <fieldset class="u-mt-space-32">
            <legend>Dati dell'acquirente</legend>
            <div grid="grid">
              <div grid="6@sm">{{ render "@select" select-title merge=true }}</div>
            </div>
            <div grid="grid 6@sm">
              <div>{{> @input input-name }}</div>
              <div>{{> @input input-surname }}</div>
            </div>
            <div grid="grid 6@sm 4@md">
              <div>{{> @input input-phone }}</div>
              <div>{{ render "@select" select-nationality merge=true }}</div>
              <div>{{ render "@select" select-nation merge=true }}</div>
            </div>
            <div grid="grid">
              <div grid="12">{{> @input input-fiscal-code }}</div>
              <div grid="12">{{> @input input-address }}</div>
            </div>
            <div grid="grid">
              <div grid="6@sm 4@md">{{ render "@select" select-region merge=true }}</div>
              <div grid="6@sm">{{ render "@select" select-town merge=true }}</div>
              <div grid="6@sm 2@md">{{> @input input-cap }}</div>
            </div>
          </fieldset>

          {{!-- METODO DI PAGAMENTO --}}
          <div class="u-mt-space-32 u-mt-space-56@md">
            <h2 class="u-typo-level-6 u-color-night-100">Metodo di pagamento</h2>
            <div class="u-mt-space-24" grid="grid 6@sm 4@md">
              {{#each payment-methods }}
              {{> @selection }}
              {{/each}}
            </div>

            <div grid="grid" class="u-mt-space-36">
              <div grid="12">{{> @input input-credit-card-number }}</div>
              <div grid="12">{{> @input input-credit-card-owner }}</div>
              <div grid="6@sm">{{> @input--date input-credit-card-expiration }}</div>
              <div grid="6@sm">{{> @input input-cvc }}</div>
            </div>
          </div>

          <div class="u-mt-space-24">
            {{> @tip tip }}
          </div>

          <div class="u-mt-space-32 u-mt-space-56@md">
            <h2 class="u-typo-level-6 u-color-night-100 u-mb-space-24">Condizioni generali</h2>
            {{> @checkbox checkbox-general-conditions }}
          </div>

          <div class="u-mt-space-48 u-mt-space-64@md">
            {{> @button btn-proceed }}
          </div>

        </form>
      </div>
    </div>
	{{/content}}

  {{!-- SCRIPTS JS --}}
  {{#content "scripts" mode="append"}}
    <script src="{{ path '/js/footer.min.js' }}"></script>
    <script>
      flatpickr.localize(flatpickr.l10ns.it);

      flatpickr(".js-flatpickr", {      
        plugins: [
          new monthSelectPlugin({
            shorthand: false, //defaults to false
            dateFormat: "m / Y", //defaults to "F Y"
          })
        ]
      });
    </script>
  {{/content}}

{{/extend}}


        
            
            {
  "template-main-class": "",
  "header": {
    "toolbarProgress": {
      "showUser": true,
      "moleculeProgress": {
        "current-step": 3,
        "steps": [
          {
            "text": "Scegli il volo",
            "status": "data-step-complete"
          },
          {
            "text": "Dati dei passeggeri",
            "status": "data-step-complete"
          },
          {
            "text": "Dati di pagamento",
            "status": "data-step-current"
          },
          {
            "text": "Preventivo",
            "status": "data-step-incomplete"
          },
          {
            "text": "Ricevi conferma",
            "status": "data-step-incomplete"
          }
        ]
      }
    }
  },
  "cart": {
    "cartCta": {
      "show": false
    }
  },
  "radio-payment-1": {
    "id": "private-payment",
    "name": "payment-type",
    "value": "private-payment",
    "text": "Pagamento come privato"
  },
  "radio-payment-2": {
    "id": "company-payment",
    "name": "payment-type",
    "value": "company-payment",
    "text": "Pagamento come azienda / libero professionista"
  },
  "select-title": {
    "label_id": "select-title",
    "label_message": "Titolo",
    "atom-select": {
      "id": "select-title",
      "required": true,
      "hasNote": true,
      "describedby": "select-title-note",
      "placeholder": null
    },
    "note_id": "select-title-note",
    "note_message": "Seleziona il titolo",
    "note_class": null
  },
  "input-name": {
    "label_id": "input-name",
    "label_message": "Nome",
    "label_class": "",
    "atom-input": {
      "id": "input-name",
      "type": "text",
      "required": true,
      "hasNote": true,
      "describedby": "input-name-note"
    },
    "note_id": "input-name-note",
    "note_message": "Inserisci il nome"
  },
  "input-surname": {
    "label_id": "input-surname",
    "label_message": "Cognome",
    "label_class": "",
    "atom-input": {
      "id": "input-surname",
      "type": "text",
      "required": true,
      "hasNote": true,
      "describedby": "input-surname-note"
    },
    "note_id": "input-surname-note",
    "note_message": "Inserisci il cognome"
  },
  "input-phone": {
    "label_id": "phone-field",
    "label_message": "Numero di telefono",
    "label_class": "",
    "atom-input": {
      "id": "phone-field",
      "type": "phone",
      "required": true,
      "hasNote": true,
      "describedby": "phone-note"
    },
    "note_id": "phone-note",
    "note_message": "Aggiungi prefisso internazionale "
  },
  "select-nationality": {
    "label_id": "select-nationality",
    "label_message": "Nazionalità",
    "atom-select": {
      "id": "select-nationality",
      "required": true,
      "hasNote": true,
      "describedby": "select-nationality-note",
      "placeholder": null
    },
    "note_id": "select-nationality-note",
    "note_message": "Seleziona la tua nazione",
    "note_class": null
  },
  "select-nation": {
    "label_id": "select-nation",
    "label_message": "Nazione",
    "atom-select": {
      "id": "select-nation",
      "required": true,
      "hasNote": true,
      "describedby": "select-nation-note",
      "placeholder": null
    },
    "note_id": "select-nation-note",
    "note_message": "Seleziona la tua nazione",
    "note_class": null
  },
  "input-fiscal-code": {
    "label_id": "fiscal-code-field",
    "label_message": "Codice fiscale",
    "label_class": "",
    "atom-input": {
      "id": "fiscal-code-field",
      "type": "text",
      "required": true,
      "hasNote": true,
      "describedby": "fiscal-code-note"
    },
    "note_id": "fiscal-code-note",
    "note_message": "Se non conosci il tuo codice fiscale, <a href=\"#\">costruiscilo qua</a>"
  },
  "input-address": {
    "label_id": "address-field",
    "label_message": "Indirizzo e numero civico",
    "label_class": "",
    "atom-input": {
      "id": "address-field",
      "type": "text",
      "required": true,
      "hasNote": true,
      "describedby": "address-note"
    },
    "note_id": "address-note",
    "note_message": "Scrivi il tuo indirizzo per esteso"
  },
  "select-region": {
    "label_id": "select-region",
    "label_message": "Provincia",
    "atom-select": {
      "id": "select-region",
      "required": true,
      "hasNote": true,
      "describedby": "select-region-note",
      "placeholder": null
    },
    "note_id": "select-region-note",
    "note_message": "Seleziona la tua provincia",
    "note_class": null
  },
  "select-town": {
    "label_id": "select-town",
    "label_message": "Comune",
    "atom-select": {
      "id": "select-town",
      "required": true,
      "hasNote": true,
      "describedby": "select-town-note",
      "placeholder": null
    },
    "note_id": "select-town-note",
    "note_message": "Seleziona il tuo comune",
    "note_class": null
  },
  "input-cap": {
    "label_id": "cap-field",
    "label_message": "CAP",
    "label_class": "",
    "atom-input": {
      "id": "cap-field",
      "type": "text",
      "required": true,
      "hasNote": true,
      "describedby": "cap-note"
    },
    "note_id": "cap-note",
    "note_message": "CAP di residenza"
  },
  "payment-methods": [
    {
      "modifier": "c-selection",
      "text": "Visa",
      "img": {
        "src": "/images/svgs/visa.svg",
        "alt": "Visa"
      },
      "input": {
        "id": "payment-method-1",
        "name": "payment-method"
      }
    },
    {
      "modifier": "c-selection",
      "text": "Master Card",
      "img": {
        "src": "/images/svgs/mastercard.svg",
        "alt": "Master Card"
      },
      "input": {
        "id": "payment-method-2",
        "name": "payment-method"
      }
    },
    {
      "modifier": "c-selection",
      "text": "American Express",
      "img": {
        "src": "/images/svgs/amex.svg",
        "alt": "American Express"
      },
      "input": {
        "id": "payment-method-3",
        "name": "payment-method"
      }
    }
  ],
  "input-credit-card-number": {
    "label_id": "credit-card-number-field",
    "label_message": "Numero carta",
    "label_class": "",
    "atom-input": {
      "id": "credit-card-number-field",
      "type": "text",
      "required": true,
      "hasNote": true,
      "describedby": "credit-card-number-note"
    },
    "note_id": "credit-card-number-note",
    "note_message": "Inserisci il numero della carta"
  },
  "input-credit-card-owner": {
    "label_id": "credit-card-owner-field",
    "label_message": "Intestata a",
    "label_class": "",
    "atom-input": {
      "id": "credit-card-owner-field",
      "type": "text",
      "required": true,
      "hasNote": true,
      "describedby": "credit-card-owner-note"
    },
    "note_id": "credit-card-owner-note",
    "note_message": "Inserisci il nome e cognome dell’intestatario/a della carta"
  },
  "input-credit-card-expiration": {
    "label_id": "credit-card-expiration-field",
    "label_message": "Data di scadenza",
    "label_class": "is-datepicker",
    "atom-input": {
      "id": "credit-card-expiration-field",
      "type": "date",
      "class": "js-flatpickr flatpickr-input",
      "required": true,
      "hasNote": true,
      "describedby": "credit-card-expiration-note"
    },
    "note_id": "credit-card-expiration-note",
    "note_message": "Inserisci la data di scadenza"
  },
  "input-cvc": {
    "label_id": "cvc-field",
    "label_message": "CVC",
    "label_class": "",
    "atom-input": {
      "id": "cvc-field",
      "type": "text",
      "required": true,
      "hasNote": true,
      "describedby": "cvc-note"
    },
    "note_id": "cvc-note",
    "note_message": "codice numerico di 3 o 4 cifre che si trova sul retro della carta"
  },
  "tip": {
    "text": "Importante: Per garantirti maggior sicurezza durante i tuoi pagamenti online e nel rispetto di quanto richiesto dalla normativa “Strong Customer Authentication e PSD2”, al prossimo step potrebbe essere richiesta la validazione 3D-secure della carta di credito scelta."
  },
  "checkbox-general-conditions": {
    "id": "general-conditions",
    "name": "general-conditions",
    "text": "Ho letto e accetto le condizioni generali di contratto e, vista l'informativa della privacy, presto il consenso al trattamento dei miei dati personali (ex art. 23 del d.lgs. n.196/03)",
    "required": "true"
  },
  "btn-proceed": {
    "modifier": "c-button--submit c-button--elastic",
    "type": "submit",
    "text": "Prosegui con il preventivo"
  }
}

Handle: @page-flights-payment
Preview:
- With layout
- Component only
Filesystem Path: src/views/05-pages/06-flights/_04-funnel-flights/04-page-flights-payment/page-flights-payment.hbs
References (10): @template-master--checkout, @header--progress, @radiobutton, @select, @input, @selection, @input--date, @tip, @checkbox, @button

No notes defined.