@tonder.io/ionic-full-sdk 0.0.1

package/src/helpers/template.ts

@@ -0,0 +1,194 @@
+import { getCardType } from './utils';
+
+export type CollectorIds = {
+  holderName: string,
+  cardNumber: string,
+  expirationMonth: string,
+  expirationYear: string,
+  cvv: string,
+  tonderPayButton: string,
+  msgError: string,
+  cardsListContainer: string
+}
+
+export type Card = {
+  cardholder_name: string,
+  card_number: string,
+  expiration_month: string,
+  expiration_year: string
+}
+
+export const cardTemplate = (external: boolean, collectorIds: CollectorIds) => `
+<div class="container-tonder">
+  <div id="${collectorIds.cardsListContainer}" class="cards-list-container"></div>
+  <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>
+  <button id="${collectorIds.tonderPayButton}" class="pay-button">Pagar</button>
+</div>
+
+${external ? `` : `<style>
+.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;
+  max-height: 100vh;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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
+}
+
+.checkbox label {
+  margin-left: 10px;
+  font-size: '12px';
+  font-weight: '500';
+  color: #1D1D1D;
+  font-family: "Inter", sans-serif;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
+}
+
+.checkbox {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 100%;
+  text-align: left;
+}
+
+</style>
+`}`
+
+export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
+  
+  const cardItemsHTML = cards.reduce((total: string, card: Card) => {
+    return `${total}
+    <div class="card-item">
+      <img class="card-image" src="${getCardType(card.card_number)}" />
+      <div class="card-number">${card.card_number}</div>
+      <div class="card-expiration">${card.expiration_month}/${card.expiration_year}</div>
+    </div>`
+  }, ``);
+
+  const cardItemStyle = external ? '' : `
+    <style>
+
+      .card-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #1D1D1D;
+        gap: 30px 20px;
+      }
+
+      .card-image {
+        width: 20px;
+        height: 20px;
+      }
+
+    </style>
+  `
+  const cardItem = `
+  ${cardItemsHTML}
+  ${cardItemStyle}
+  `
+  return cardItem;
+}