{
  "version": 3,
  "file": "checkout-credit-card.css",
  "sources": [
    "../../../credit-card-form.svelte",
    "../../../credit-card-list.svelte"
  ],
  "sourcesContent": [
    "{#if config.show_visual_card}\n  <section class=\"{config.id}-card-wrapper\"></section>\n{/if}\n\n<section class=\"wc-payment-form-fields\" on:input={formChanged}>\n  <p class=\"form-row form-row-wide\">\n    <label for=\"{config.id}-name\">Nome do Titular do Cartão <span class=\"required\">*</span></label>\n    <input id=\"{config.id}-name\" class=\"input-text\" type=\"text\" bind:value=\"{$cardForm.name}\" readonly={loading} maxlength=\"25\" use:dontCopy>\n  </p>\n\n  <p class=\"form-row form-row-wide\">\n    <label for=\"{config.id}-number\">Número do Cartão <span class=\"required\">*</span></label>\n    <input id=\"{config.id}-number\" class=\"input-text {!config.show_visual_card && 'wc-credit-card-form-card-number'}\" inputmode=\"numeric\" autocomplete=\"cc-number\" type=\"tel\" bind:value=\"{$cardForm.number}\" readonly={loading} use:dontCopy>\n  </p>\n\n  <p class=\"form-row form-row-first\">\n    <label for=\"{config.id}-expiry\">Validade <span class=\"required\">*</span></label>\n    <input id=\"{config.id}-expiry\" class=\"input-text {!config.show_visual_card && 'wc-credit-card-form-card-expiry'}\" inputmode=\"numeric\" autocomplete=\"cc-exp\" type=\"tel\" bind:value=\"{$cardForm.expiry}\" placeholder=\"MM / AAAA\" readonly={loading} use:dontCopy>\n  </p>\n\n  <p class=\"form-row form-row-last\">\n    <label for=\"{config.id}-cvc\">Código de Segurança <span class=\"required\">*</span></label>\n    <input id=\"{config.id}-cvc\" name=\"{config.id}-cvc\" class=\"input-text {!config.show_visual_card && 'wc-credit-card-form-card-cvc'}\" inputmode=\"numeric\" type=\"tel\" maxlength=\"4\" placeholder=\"CVC\" bind:value=\"{$cardForm.cvc}\" readonly={loading} use:dontCopy>\n  </p>\n\n  {#if Object.keys($installments).length > 0}\n    <p class=\"form-row form-row-wide\">\n      <label for=\"{config.id}-installments\">Número de parcelas</label>\n      <select id=\"{config.id}-installments\" name=\"{config.id}-installments\" class=\"input-select\">\n        {#each Object.keys($installments) as i}\n          <option value=\"{i}\">\n            {$installments[i]}\n          </option>\n        {/each}\n      </select>\n    </p>\n  {:else}\n    <input type=\"hidden\" name=\"{config.id}-installments\" value=\"1\">\n  {/if}\n\n  <input type=\"hidden\" name=\"{config.id}-checkout-mode\" value=\"form\">\n  <input type=\"hidden\" id=\"{config.id}-card-hash\" name=\"{config.id}-card-hash\" bind:value={$cardHash}>\n  <input type=\"hidden\" id=\"{config.id}-card-info\" name=\"{config.id}-card-info\" bind:value={cardId}>\n\n  {#if error}\n    <p class=\"form-row form-row-wide woocommerce-error\">\n      {error}\n    </p>\n  {/if}\n\n  {#if config.user_id != 0 && config.store_user_cards}\n    <p class=\"form-row form-row-wide save-card\">\n        <label for=\"{config.id}-save-card\">\n          <input type=\"checkbox\" id=\"{config.id}-save-card\" name=\"{config.id}-save-card\" value=\"yes\" bind:checked=\"{$cardForm.save}\">\n          Salvar este cartão para usar em futuras compras\n        </label>\n    </p>\n  {/if}\n\n  {#if config.credit_cards.length > 0}\n    <p class=\"form-row form-row-wide cancel\">\n        <button type=\"button\" class=\"button button-cancel-card\" on:click={cancel}>Cancelar</button>\n    </p>\n  {/if}\n\n</section>\n\n<script>\n  export let config;\n\n  import { installments, waitingCardValidation, cardHash, cardForm } from './stores.js';\n  import { dontCopy } from './actions.js';\n  import { createEventDispatcher } from 'svelte';\n  import { onMount, onDestroy } from 'svelte';\n  import { initCard } from '../utils/card.js';\n  import { createCardHash } from '../utils/juno-checkout.js';\n  import { getCheckoutTotal } from '../utils/get-checkout-total.js';\n  import { formatNumber } from '../utils/format-number.js';\n\n  const dispatch = createEventDispatcher();\n  let atts = {\n    cardNumber: {}\n  };\n\n  let title = 'Informe os Dados do Cartão de Crédito';\n  let error = '';\n  let cardId = ''; // card informations\n\n  if (!config.show_visual_card) {\n    atts.cardNumber.maxlength = 16;\n  }\n\n  function formChanged () {\n    $cardHash = '';\n  }\n\n  function cancel () {\n    dispatch('cancel');\n  }\n\n  function getCardBrand (number) {\n    const card = new window.Juno.Card();\n    const brand = card.getType(number);\n    return card ? brand.name : '';\n  }\n\n  $: if ($cardForm.number) {\n    let brand = getCardBrand($cardForm.number)\n\n    cardId = brand + '--' + $cardForm.number.replace(/[^0-9]/g, '').slice(-4)\n  }\n\n  $: loading = $waitingCardValidation;\n\n  $: if ($waitingCardValidation) {\n      const request = createCardHash({\n        publicToken: config.public_token,\n        sandbox: config.sandbox,\n\n        name: $cardForm.name,\n        number: $cardForm.number.replace(/[^0-9]/g, ''),\n        cvc: $cardForm.cvc,\n        expirationMonth: ($cardForm.expiry.split('/')[0] + '').trim(),\n        expirationYear: ($cardForm.expiry.split('/')[1] + '').trim(),\n      })\n\n      request.then((hash) => $cardHash = hash);\n\n      request.catch((message) => {\n        error = message\n        $cardHash = 'error'\n      });\n\n      request.finally(() => {\n        $waitingCardValidation = false\n      });\n  }\n\n  // init the visual card\n  onMount(function () {\n    cardForm.reset();\n\n    if (!config.show_visual_card) return;\n\n    initCard({\n      debug: true,\n      form: config.form,\n      container: '.' + config.id + '-card-wrapper',\n      formSelectors: {\n        nameInput: 'input#' + config.id + '-name',\n        numberInput: 'input#' + config.id + '-number',\n        expiryInput: 'input#' + config.id + '-expiry',\n        cvcInput: 'input#' + config.id + '-cvc',\n      },\n      //width: 350,\n      //formatting: true\n      messages: {\n        validDate: 'Data Válida', // optional - default 'valid\\nthru'\n        monthYear: 'Mês/Ano', // optional - default 'month/year'\n      },\n      placeholders: {\n        number: '•••• •••• •••• ••••',\n        name: 'Nome',\n        expiry: 'MM / AAAA',\n        cvc: '•••'\n      },\n    })\n  });\n</script>\n\n<style>\n  .juno-credit-card-card-wrapper {\n    width: 100%;\n    max-width: 100%;\n    margin-bottom: 32px;\n  }\n\n  .woocommerce-error {\n    padding: 1em;\n  }\n</style>\n",
    "{#each cards as card (card.value)}\n  <div class=\"{config.id}-user-card card\">\n    <p class=\"form-row form-row-wide\">\n      <label>\n        <input type='radio' bind:group={selected_card} value={card.value} name=\"{config.id}-card-info\" disabled={loading}>\n        <span class=\"card-brand card-brand-{card.brand}\">{card.brand}</span> terminado em <span class=\"card-numbers\">{card.last_numbers}</span>\n      </label>\n    </p>\n\n    {#if card.value == selected_card}\n      {#if 2 == card.version}\n        <input name=\"{config.id}-cvc\" type=\"hidden\" value=\"999\">\n        <div style=\"display: none !important;\">{$cardForm.cvc = 999}</div>\n      {:else}\n        <p class=\"form-row form-row-wide\">\n          <label for=\"{config.id}-cvc\">Código de Segurança <span class=\"required\">*</span></label>\n          <input id=\"{config.id}-cvc\" name=\"{config.id}-cvc\" class=\"input-text\" type=\"number\" maxlength=\"4\" bind:value={$cardForm.cvc} min=0 readonly={loading}>\n        </p>\n      {/if}\n    {/if}\n\n    <button class=\"button button-delete-card\" type=\"button\" id=\"{config.id}-delete-card\" title=\"Remover este cartão de crédito\" on:click={e => deleteCard(e, card.value)} disabled={loading}>&times;</button>\n  </div>\n{/each}\n\n{#if Object.keys($installments).length > 0}\n  <p class=\"form-row form-row-wide\">\n    <label for=\"{config.id}-installments\">Número de parcelas</label>\n    <select id=\"{config.id}-installments\" name=\"{config.id}-installments\" class=\"input-select\" readonly={loading}>\n      {#each Object.keys($installments) as i}\n        <option value=\"{i}\">\n          {$installments[i]}\n        </option>\n      {/each}\n    </select>\n  </p>\n{:else}\n  <input type=\"hidden\" name=\"{config.id}-installments\" value=\"1\">\n{/if}\n\n<input type=\"hidden\" name=\"{config.id}-checkout-mode\" value=\"list\">\n\n{#if error}\n  <p class=\"form-row form-row-wide woocommerce-error\">\n    {error}\n  </p>\n{/if}\n\n<button class=\"button\" on:click={() => dispatch('registerCard')} disabled={loading}>Usar outro cartão de crédito</button>\n\n<script>\n  export let config = {};\n\n  import { createEventDispatcher } from 'svelte';\n  import { onMount, onDestroy } from 'svelte';\n  import { formatNumber } from '../utils/format-number.js';\n  import { cardForm, installments, waitingCardValidation } from './stores.js'\n\n  const dispatch = createEventDispatcher();\n\n  let selected_card = '';\n  let cards = config.credit_cards;\n  let error = '';\n\n  $: if (cards.length == 0) {\n    dispatch('registerCard');\n  }\n\n  $: loading = $waitingCardValidation;\n  $: config.credit_cards = cards;\n\n  $: if (selected_card) {\n    $cardForm = {\n      selected: selected_card,\n      cvc: '',\n    };\n  }\n\n  $: if ($waitingCardValidation) {\n      const cvc = $cardForm.cvc ? $cardForm.cvc + '': '';\n      if (!selected_card) {\n        error = 'Selecione um cartão de crédito ou cadastre um novo.'\n      }\n      else if (cvc && cvc.length < 3) {\n        error = 'O código de segurança deve ter no mínimo 3 digitos.'\n      }\n      $waitingCardValidation = false\n  }\n\n  const deleteCard = (e, card_info) => {\n    const ajax_action = config.ajax.remove_user_credit_card;\n    const data = {\n      action: ajax_action.action,\n      [ajax_action.nonce.param]: ajax_action.nonce.value,\n      card_info: card_info\n    }\n    const parent = jQuery(e.target).parents('.wc-payment-form')\n\n    parent.block({\n      message: null,\n      overlayCSS: {\n        background: '#fff',\n        opacity: 0.6\n      }\n    });\n\n    if ( selected_card == card_info ) {\n      selected_card = ''\n    }\n\n    const req = jQuery.ajax({\n      url: config.ajax_url,\n      type: 'POST',\n      data,\n    });\n\n    req.always(function () {\n      parent.unblock();\n    });\n\n    req.done(function (res) {\n      if (res.success) {\n        cards = cards.filter((card) => card.value != card_info)\n      } else {\n        console.error(res)\n      }\n    });\n\n    req.fail(function () {\n      console.error(req)\n    })\n  }\n</script>\n\n<style>\n  .form-row :global(input[type=radio]) {\n    margin-right: 5px;\n  }\n\n  .card {\n    position: relative;\n  }\n\n  .button-delete-card {\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n</style>\n"
  ],
  "names": [],
  "mappings": "AA2KE,8BAA8B,cAAC,CAAC,AAC9B,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,IAAI,CACf,aAAa,CAAE,IAAI,AACrB,CAAC,AAED,kBAAkB,cAAC,CAAC,AAClB,OAAO,CAAE,GAAG,AACd,CAAC;AC5CD,uBAAS,CAAC,AAAQ,iBAAiB,AAAE,CAAC,AACpC,YAAY,CAAE,GAAG,AACnB,CAAC,AAED,KAAK,cAAC,CAAC,AACL,QAAQ,CAAE,QAAQ,AACpB,CAAC,AAED,mBAAmB,cAAC,CAAC,AACnB,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,CAAC,CACR,GAAG,CAAE,CAAC,AACR,CAAC"
}