@tonder.io/ionic-full-sdk 0.0.11-beta → 0.0.13-beta

package/src/helpers/template.ts

@@ -1,296 +1,308 @@
-import { getCardType } from './utils';
-
-export type CollectorIds = {
-  holderName: string,
-  cardNumber: string,
-  expirationMonth: string,
-  expirationYear: string,
-  cvv: string,
-  tonderPayButton: string,
-  msgError: string,
-  msgNotification: string,
-  cardsListContainer: string
-}
-
-export type Card = {
-  card_scheme: string,
-  cardholder_name: string,
-  card_number: string,
-  expiration_month: string,
-  expiration_year: string,
-  skyflow_id: string
-}
-
-export const cardTemplate = (external: boolean, collectorIds: CollectorIds) => `
-<div class="container-tonder">
-  <div id="${collectorIds.cardsListContainer}" class="cards-list-container"></div>
-  <div class="pay-new-card">
-    <input checked id="new" name="card_selected" type="radio"/>
-    <label class="card-item-label-new" for="new">
-      <img class="card-image" src="${getCardType("XXXX")}" />
-      <div class="card-number">Pagar con tarjeta</div>
-    </label>
-  </div>
-  <div class="container-form">
-    <div id="${collectorIds.holderName}" class="empty-div"></div>
-    <div id="${collectorIds.cardNumber}" class="empty-div"></div>
-    <div class="collect-row">
-      <div id="${collectorIds.expirationMonth}" class="empty-div"></div>
-      <div id="${collectorIds.expirationYear}" class="expiration-year"></div>
-      <div id="${collectorIds.cvv}" class="empty-div"></div>
-    </div>
-    <div class="checkbox">
-      <input id="save-checkout-card" type="checkbox">
-      <label for="save-checkout-card">
-        Guardar tarjeta para futuros pagos
-      </label>
-    </div>
-    <div id="${collectorIds.msgError}"></div>
-    <div id="${collectorIds.msgNotification}"></div>
-  </div>
-  <button id="${collectorIds.tonderPayButton}" class="pay-button">Pagar</button>
-</div>
-
-${external ? `` : `<style>
-
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
-
-.container-tonder {
-  background-color: #F9F9F9;
-  margin: 0 auto !important;
-  padding: 30px 10px 30px 10px;
-  overflow: hidden;
-  transition: max-height 0.5s ease-out;
-  max-width: 600px;
-  border: solid 1px #e3e3e3;
-}
-
-.collect-row {
-  display: flex !important;
-  justify-content: space-between !important;
-  width: 100% !important;
-}
-
-.collect-row > :first-child {
-  min-width: 120px; !important
-}
-
-.expiration-year {
-  padding-top: 25px !important;
-}
-
-.empty-div {
-  height: 80px !important;
-  margin-top: 2px;
-  margin-bottom: 4px;
-  margin-left: 10px !important;
-  margin-right: 10px !important;
-}
-
-.error-container{
-  color: red !important;
-  background-color: #FFDBDB !important;
-  margin-bottom: 13px !important;
-  font-size: 80% !important;
-  padding: 8px 10px !important;
-  border-radius: 10px !important;
-  text-align: left !important;
-}
-
-.message-container{
-  color: green !important;
-  background-color: #DAFCE4 !important;
-  margin-bottom: 13px !important;
-  font-size: 80% !important;
-  padding: 8px 10px !important;
-  border-radius: 10px !important;
-  text-align: left !important;
-}
-
-.pay-button {
-  font-size: 16px;
-  font-weight: bold;
-  min-height: 2.3rem;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  width: 100%;
-  padding: 1rem;
-  text-align: center;
-  border: none;
-  background-color: #000;
-  color: #fff;
-  margin-bottom: 10px;
-  display: none;
-  font-family: "Inter", sans-serif !important;
-}
-
-.pay-button:disabled, pay-button[disabled] {
-  background-color: #B9B9B9;
-}
-
-.lds-dual-ring {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-}
-
-.lds-dual-ring:after {
-  content: " ";
-  display: block;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: 6px solid #fff;
-  border-color: #fff transparent #fff transparent;
-  animation: lds-dual-ring 1.2s linear infinite;
-}
-
-@keyframes lds-dual-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .payment_method_zplit {
-    font-size: 16px !important;
-    width: 100% !important;
-  }
-
-  .payment_method_zplit  label img {
-    display: none !important;
-  }
-}
-
-.cards-list-container {
-  display: flex;
-  flex-direction: column;
-  padding: 0px 10px 0px 10px;
-  gap: 33% 20px;
-}
-
-.checkbox label {
-  margin-left: 10px;
-  font-size: '12px';
-  font-weight: '500';
-  color: #1D1D1D;
-  font-family: "Inter", sans-serif !important;
-}
-
-.checkbox {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  width: 100%;
-  text-align: left;
-}
-
-.pay-new-card {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  color: #1D1D1D;
-  gap: 33% 20px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 90%;
-}
-
-.pay-new-card .card-number {
-  font-size: 16px;
-  font-family: "Inter", sans-serif !important;
-}
-
-.card-image {
-  width: 39px;
-  height: 24px;
-  text-align: left;
-}
-
-.card-item-label-new {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  color: #1D1D1D;
-  gap: 33% 20px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  width: 90%;
-}
-
-</style>
-`}`
-
-export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
-  
-  const cardItemsHTML = cards.reduce((total: string, card: Card) => {
-    return `${total}
-    <div class="card-item">
-        <input id="${card.skyflow_id}" name="card_selected" type="radio"/>
-        <label class="card-item-label" for="${card.skyflow_id}">
-          <img class="card-image" src="${getCardType(card.card_scheme)}" />
-          <div class="card-number">${card.card_number}</div>
-          <div class="card-expiration">Exp. ${card.expiration_month}/${card.expiration_year}</div>
-        </label>
-    </div>`
-  }, ``);
-
-  const cardItemStyle = external ? '' : `
-    <style>
-
-      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
-
-      .card-item-label {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        color: #1D1D1D;
-        gap: 33% 20px;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        padding-left: 10px;
-        padding-right: 10px;
-        width: 90%;
-      }
-
-      .card_selected {
-        width: 10%;
-      }
-
-      .card-item {
-        display: flex;
-        justify-content: start;
-        align-items: center;
-        gap: 33% 20px;
-      }
-
-      .card-item .card-number {
-        font-size: 16px;
-        font-family: "Inter", sans-serif !important;
-      }
-
-      .card-item .card-expiration {
-        font-size: 16px;
-        font-family: "Inter", sans-serif !important;
-      }
-
-      .card-image {
-        width: 39px;
-        height: 24px;
-        text-align: left;
-      }
-
-    </style>
-  `
-  const cardItem = `
-  ${cardItemsHTML}
-  ${cardItemStyle}
-  `
-  return cardItem;
+import { getCardType } from './utils';
+
+export type CollectorIds = {
+  holderName: string,
+  cardNumber: string,
+  expirationMonth: string,
+  expirationYear: string,
+  cvv: string,
+  tonderPayButton: string,
+  msgError: string,
+  msgNotification: string,
+  cardsListContainer: string
+}
+
+export type Card = {
+  card_scheme: string,
+  cardholder_name: string,
+  card_number: string,
+  expiration_month: string,
+  expiration_year: string,
+  skyflow_id: string
+}
+
+export const cardTemplate = (external: boolean, collectorIds: CollectorIds) => `
+<div class="container-tonder">
+  <div id="${collectorIds.cardsListContainer}" class="cards-list-container"></div>
+  <div class="pay-new-card">
+    <input checked id="new" name="card_selected" type="radio"/>
+    <label class="card-item-label-new" for="new">
+      <img class="card-image" src="${getCardType("XXXX")}" />
+      <div class="card-number">Pagar con tarjeta</div>
+    </label>
+  </div>
+  <div class="container-form">
+    <div id="${collectorIds.holderName}" class="empty-div"></div>
+    <div id="${collectorIds.cardNumber}" class="empty-div"></div>
+    <div class="collect-row">
+      <div id="${collectorIds.expirationMonth}" class="empty-div"></div>
+      <div id="${collectorIds.expirationYear}" class="expiration-year"></div>
+      <div id="${collectorIds.cvv}" class="empty-div"></div>
+    </div>
+    <div class="checkbox">
+      <input id="save-checkout-card" type="checkbox">
+      <label for="save-checkout-card">
+        Guardar tarjeta para futuros pagos
+      </label>
+    </div>
+    <div id="${collectorIds.msgError}"></div>
+    <div id="${collectorIds.msgNotification}"></div>
+  </div>
+  <button id="${collectorIds.tonderPayButton}" class="pay-button">Pagar</button>
+</div>
+
+${external ? `` : `<style>
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
+
+.container-tonder {
+  background-color: #F9F9F9;
+  margin: 0 auto !important;
+  padding: 30px 10px 30px 10px;
+  overflow: hidden;
+  transition: max-height 0.5s ease-out;
+  max-width: 600px;
+  border: solid 1px #e3e3e3;
+}
+
+.collect-row {
+  display: flex !important;
+  justify-content: space-between !important;
+  width: 100% !important;
+}
+
+.collect-row > :first-child {
+  min-width: 120px; !important
+}
+
+.expiration-year {
+  padding-top: 25px !important;
+}
+
+.empty-div {
+  height: 80px !important;
+  margin-top: 2px;
+  margin-bottom: 4px;
+  margin-left: 10px !important;
+  margin-right: 10px !important;
+}
+
+.error-container{
+  color: red !important;
+  background-color: #FFDBDB !important;
+  margin-bottom: 13px !important;
+  font-size: 80% !important;
+  padding: 8px 10px !important;
+  border-radius: 10px !important;
+  text-align: left !important;
+}
+
+.message-container{
+  color: green !important;
+  background-color: #DAFCE4 !important;
+  margin-bottom: 13px !important;
+  font-size: 80% !important;
+  padding: 8px 10px !important;
+  border-radius: 10px !important;
+  text-align: left !important;
+}
+
+.pay-button {
+  font-size: 16px;
+  font-weight: bold;
+  min-height: 2.3rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  width: 100%;
+  padding: 1rem;
+  text-align: center;
+  border: none;
+  background-color: #000;
+  color: #fff;
+  margin-bottom: 10px;
+  display: none;
+  font-family: "Inter", sans-serif !important;
+}
+
+.pay-button:disabled, pay-button[disabled] {
+  background-color: #B9B9B9;
+}
+
+.lds-dual-ring {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+}
+
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 6px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .payment_method_zplit {
+    font-size: 16px !important;
+    width: 100% !important;
+  }
+
+  .payment_method_zplit  label img {
+    display: none !important;
+  }
+}
+
+.cards-list-container {
+  display: flex;
+  flex-direction: column;
+  padding: 0px 10px 0px 10px;
+  gap: 33% 20px;
+}
+
+.checkbox label {
+  margin-left: 10px;
+  font-size: '12px';
+  font-weight: '500';
+  color: #1D1D1D;
+  font-family: "Inter", sans-serif !important;
+}
+
+.checkbox {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 100%;
+  text-align: left;
+}
+
+.pay-new-card {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #1D1D1D;
+  gap: 33% 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 90%;
+}
+
+.pay-new-card .card-number {
+  font-size: 16px;
+  font-family: "Inter", sans-serif !important;
+}
+
+.card-image {
+  width: 39px;
+  height: 24px;
+  text-align: left;
+}
+
+.card-item-label-new {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #1D1D1D;
+  gap: 33% 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 90%;
+}
+
+</style>
+`}`
+
+export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
+  
+  const cardItemsHTML = cards.reduce((total: string, card: Card) => {
+    return `${total}
+    <div class="card-item">
+        <input id="${card.skyflow_id}" name="card_selected" type="radio"/>
+        <label class="card-item-label" for="${card.skyflow_id}">
+          <img class="card-image" src="${getCardType(card.card_scheme)}" />
+          <div class="card-number">${card.card_number}</div>
+          <div class="card-expiration">Exp. ${card.expiration_month}/${card.expiration_year}</div>
+          <div class="card-delete-icon">
+            <button id="delete_button_${card.skyflow_id}" class="card-delete-button">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M12.663 1.5h-1.326c-1.069 0-1.49.09-1.921.27-.432.181-.792.453-1.084.82-.292.365-.493.746-.784 1.774L7.368 5H5a1 1 0 0 0 0 2h.563l.703 11.25c.082 1.32.123 1.98.407 2.481a2.5 2.5 0 0 0 1.083 1.017C8.273 22 8.935 22 10.258 22h3.484c1.323 0 1.985 0 2.502-.252a2.5 2.5 0 0 0 1.083-1.017c.284-.5.325-1.16.407-2.482L18.437 7H19a1 1 0 1 0 0-2h-2.367l-.18-.636c-.292-1.028-.493-1.409-.785-1.775a2.694 2.694 0 0 0-1.084-.819c-.431-.18-.852-.27-1.92-.27zm1.89 3.5-.025-.09c-.203-.717-.29-.905-.424-1.074a.696.696 0 0 0-.292-.221c-.2-.084-.404-.115-1.149-.115h-1.326c-.745 0-.95.031-1.149.115a.696.696 0 0 0-.292.221c-.135.169-.221.357-.424 1.074L9.446 5h5.108zM9.61 8.506a.75.75 0 0 0-.724.776l.297 8.495a.75.75 0 0 0 1.499-.053l-.297-8.494a.75.75 0 0 0-.775-.724zm4.008.724a.75.75 0 0 1 1.499.052l-.297 8.495a.75.75 0 0 1-1.499-.053l.297-8.494z" fill="currentColor"/>
+              </svg>
+            </button>
+          </div>
+        </label>
+    </div>`
+  }, ``);
+
+  const cardItemStyle = external ? '' : `
+    <style>
+
+      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
+
+      .card-item-label {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #1D1D1D;
+        gap: 33% 20px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
+        width: 90%;
+      }
+
+      .card_selected {
+        width: 10%;
+      }
+
+      .card-item {
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        gap: 33% 20px;
+      }
+
+      .card-item .card-number {
+        font-size: 16px;
+        font-family: "Inter", sans-serif !important;
+      }
+
+      .card-item .card-expiration {
+        font-size: 16px;
+        font-family: "Inter", sans-serif !important;
+      }
+
+      .card-image {
+        width: 39px;
+        height: 24px;
+        text-align: left;
+      }
+
+      .card-delete-button {
+        background-color: transparent !important;
+        color: #D91C1C !important;
+      }
+
+    </style>
+  `
+  const cardItem = `
+  ${cardItemsHTML}
+  ${cardItemStyle}
+  `
+  return cardItem;
 }