tonder-web-sdk 1.9.3-beta.1 → 1.11.0-beta.1

package/src/helpers/constants.js

@@ -0,0 +1,64 @@
+const PAYMENT_METHOD = Object.freeze({
+    SORIANA: "SORIANA",
+    OXXO: "OXXO",
+    SPEI: "SPEI",
+    CODI: "CODI",
+    MERCADOPAGO: "MERCADOPAGO",
+    PAYPAL: "PAYPAL",
+    COMERCIALMEXICANA: "COMERCIALMEXICANA",
+    BANCOMER: "BANCOMER",
+    WALMART: "WALMART",
+    BODEGA: "BODEGA",
+    SAMSCLUB: "SAMSCLUB",
+    SUPERAMA: "SUPERAMA",
+    CALIMAX: "CALIMAX",
+    EXTRA: "EXTRA",
+    CIRCULOK: "CIRCULOK",
+    SEVEN11: "7ELEVEN",
+    TELECOMM: "TELECOMM",
+    BANORTE: "BANORTE",
+    BENAVIDES: "BENAVIDES",
+    DELAHORRO: "DELAHORRO",
+    ELASTURIANO: "ELASTURIANO",
+    WALDOS: "WALDOS",
+    ALSUPER: "ALSUPER",
+    KIOSKO: "KIOSKO",
+    STAMARIA: "STAMARIA",
+    LAMASBARATA: "LAMASBARATA",
+    FARMROMA: "FARMROMA",
+    FARMUNION: "FARMUNION",
+    FARMATODO: "FARMATODO",
+    SFDEASIS: "SFDEASIS",
+    FARM911: "FARM911",
+    FARMECONOMICAS: "FARMECONOMICAS",
+    FARMMEDICITY: "FARMMEDICITY",
+    RIANXEIRA: "RIANXEIRA",
+    WESTERNUNION: "WESTERNUNION",
+    ZONAPAGO: "ZONAPAGO",
+    CAJALOSANDES: "CAJALOSANDES",
+    CAJAPAITA: "CAJAPAITA",
+    CAJASANTA: "CAJASANTA",
+    CAJASULLANA: "CAJASULLANA",
+    CAJATRUJILLO: "CAJATRUJILLO",
+    EDPYME: "EDPYME",
+    KASNET: "KASNET",
+    NORANDINO: "NORANDINO",
+    QAPAQ: "QAPAQ",
+    RAIZ: "RAIZ",
+    PAYSER: "PAYSER",
+    WUNION: "WUNION",
+    BANCOCONTINENTAL: "BANCOCONTINENTAL",
+    GMONEY: "GMONEY",
+    GOPAY: "GOPAY",
+    WU: "WU",
+    PUNTOSHEY: "PUNTOSHEY",
+    AMPM: "AMPM",
+    JUMBOMARKET: "JUMBOMARKET",
+    SMELPUEBLO: "SMELPUEBLO",
+    BAM: "BAM",
+    REFACIL: "REFACIL",
+    ACYVALORES: "ACYVALORES",
+  });
+  
+  export { PAYMENT_METHOD };
+  

package/src/helpers/template.js

@@ -1,6 +1,6 @@
-import { getCardType } from "./utils";
+import { getAPMType, getCardType } from "./utils";
 
-export const cardTemplate = `
+export const cardTemplate = (data) => `
 <div class="container-tonder">
   <div id="cardsListContainer" class="cards-list-container"></div>
   <div class="pay-new-card">
@@ -19,29 +19,40 @@ export const cardTemplate = `
       <div id="collectExpirationYear" class="expiration-year"></div>
       <div id="collectCvv" class="empty-div"></div>
     </div>
-    <div class="checkbox">
+    <div class="checkbox" id="save-card-container">
       <input id="save-checkout-card" type="checkbox">
       <label for="save-checkout-card">
-        Guardar tarjeta para futuros pagos
+        Guardar tarjeta para pagos futuros
       </label>
     </div>
     <div id="msgError"></div>
     <div id="msgNotification"></div>
   </div>
-  <button id="tonderPayButton" class="pay-button">Pagar</button>
+  <div id="apmsListContainer" class="apms-list-container"></div>
+  <div class="container-pay-button">
+    <button id="tonderPayButton" class="pay-button">Pagar</button>
+  </div>
 </div>
 
 <style>
+
 .container-tonder {
   background-color: #F9F9F9;
   margin: 0 auto !important;
-  padding: 30px 25px;
+  padding: 0px;
   overflow: hidden;
   transition: max-height 0.5s ease-out;
   max-width: 600px;
   border: solid 1px #e3e3e3;
-  max-height: 100vh;
   position: relative;
+  font-family: ${getFontFamily(data)};
+}
+.container-pay-button{
+  padding: ${!!data['renderPaymentButton'] ? '30px 25px':''};
+}
+
+.container-form {
+  padding: 25px 25px 0px 25px;
 }
 
 .collect-row {
@@ -100,7 +111,7 @@ export const cardTemplate = `
   border: none;
   background-color: #000;
   color: #fff;
-  margin-bottom: 10px;
+  margin-bottom: 0px;
   display: none;
 }
 
@@ -160,16 +171,22 @@ export const cardTemplate = `
   margin-top: 10px;
   margin-bottom: 20px;
   text-align: left;
-  padding: 0 10px;
+  padding: 0 8px;
 }
 
 .cards-list-container {
   display: flex;
   flex-direction: column;
-  padding: 0px 10px 0px 10px;
+  padding: 0px;
   gap: 33% 20px;
 }
 
+.apms-list-container {
+  display: flex;
+  flex-direction: column;
+  padding: ;
+  gap: 33% 20px;
+}
 .pay-new-card {
   display: flex;
   justify-content: start;
@@ -178,8 +195,7 @@ export const cardTemplate = `
   gap: 33% 15px;
   margin-top: 10px;
   margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding: 0px 30px;
   width: 100%;
   position: relative;
 }
@@ -212,7 +228,7 @@ export const cardTemplate = `
   appearance: none;
   cursor: pointer;
   border-radius: 100%;
-  border: 1px #3bc635 solid;
+  border: 1px #bababa solid;
   color: #3bc635;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -338,8 +354,8 @@ export const cardItemsTemplate = (cards) => {
         align-items: center;
         color: #1D1D1D;
         gap: 33% 20px;
-        margin-top: 10px;
-        margin-bottom: 10px;
+        margin-top: 15px;
+        margin-bottom: 15px;
         width: 100%;
       }
 
@@ -349,6 +365,8 @@ export const cardItemsTemplate = (cards) => {
         justify-content: start;
         align-items: center;
         gap: 33% 15px;
+        border-bottom: 1px solid #e2e8f0;
+        padding: 0px 30px;
       }
 
       .card-item .card-number {
@@ -383,7 +401,7 @@ export const cardItemsTemplate = (cards) => {
         appearance: none;
         cursor: pointer;
         border-radius: 100%;
-        border: 1px #3bc635 solid;
+        border: 1px #bababa solid;
         color: #3bc635;
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -465,3 +483,152 @@ export const cardItemsTemplate = (cards) => {
   `
   return cardItem;
 }
+
+export const apmItemsTemplate = (apms) => {
+  
+  const apmItemsHTML = apms.reduce((total, apm) => {
+    const apm_data = getAPMType(apm.payment_method);
+    return `${total}
+    <div class="apm-item" id="card_container-${apm.pk}">
+        <input id="${apm.pk}" class="card_selected" name="card_selected" type="radio"/>
+        <label class="apm-item-label" for="${apm.pk}">
+          <img class="apm-image" src="${apm_data.icon}" />
+          <div class="apm-name">${apm_data.label}</div>
+        </label>
+    </div>`
+  }, ``);
+
+  const apmItemStyle = `
+    <style>
+      .apm-item-label {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        color: #1D1D1D;
+        gap: 33% 10px;
+        margin-top: 15px;
+        margin-bottom: 15px;
+        width: 100%;
+      }
+
+      .apm-item {
+        position: relative;
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        gap: 33% 15px;
+        border-bottom: 1px solid #e2e8f0;
+        padding: 0px 30px;
+      }
+
+      .apm-item:first-child {
+        border-top: 1px solid #e2e8f0;
+      }
+
+      .apm-item .apm-name {
+        font-size: 16px;
+      }
+
+      .apm-image {
+        width: auto;
+        height: 30px;
+        text-align: left;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+      }
+
+      .card_selected {
+        position: relative;
+        width: 16px;
+        min-width: 16px;
+        height: 16px;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 100%;
+        border: 1px #bababa solid;
+        color: #3bc635;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:before {
+        width: 8px;
+        height: 8px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        opacity: 0;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:checked {
+        border: 1px #3bc635 solid;
+        position: relative;
+        width: 16px;
+        height: 16px;
+        min-width: 16px;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 100%;
+        color: #3bc635;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:checked:before {
+        content: "";
+        border: 1px #3bc635 solid;
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        opacity: 50;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      
+      .card_selected:hover:before {
+        width: 8px;
+        height: 8px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        background-color: #3bc635;
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        opacity: 10;
+      }
+
+    </style>
+  `
+  const apmItem = `
+  ${apmItemsHTML}
+  ${apmItemStyle}
+  `
+  return apmItem;
+}
+
+const getFontFamily = (data) => {
+  const base = data?.customStyles?.labelStyles?.base;
+  return base?.fontFamily || '"Inter", sans-serif';
+};