@tonder.io/ionic-full-sdk 0.0.48-beta.DEV-1610.1 → 0.0.48-beta.DEV-1610.2

package/src/helpers/template.ts

@@ -16,7 +16,9 @@ export type CollectorIds = {
   msgNotification: string,
   cardsListContainer: string,
   apmsListContainer?: string,
+  msgErrorText?: string,
   tdsIframe?: string
+  msgNotificationText?: string;
 }
 
 export type Card = {
@@ -30,6 +32,7 @@ export type Card = {
 
 export const cardTemplate = (data: {
   renderPaymentButton?: boolean;
+  renderSaveCardButton?: boolean;
   customization?: IInlineCustomizationOptions;
   collectorIds: CollectorIds;
   isEnrollmentCard?: boolean;
@@ -66,17 +69,22 @@ export const cardTemplate = (data: {
         </label>
       </div>
     `:``}
-    <div id="${data.collectorIds.msgError}"></div>
-    <div id="${data.collectorIds.msgNotification}"></div>
+    ${buttonAndMessagesTemplate({
+    showButton: !data.isEnrollmentCard ? data.renderPaymentButton || false:data.renderSaveCardButton || false,
+    classContainerButton: "container-pay-button",
+    tonderButtonId: !data.isEnrollmentCard ? data.collectorIds.tonderPayButton:data.collectorIds.tonderSaveCardButton!,
+    classButton: !data.isEnrollmentCard ? "tndr-button pay-button hidden":"tndr-button save-card-button",
+    msgErrorId: data.collectorIds.msgError,
+    msgErrorTextId: data.collectorIds.msgErrorText!,
+    msgNotificationId: data.collectorIds.msgNotification,
+    msgNotificationTextId: data.collectorIds.msgNotificationText!,
+    buttonText: !data.isEnrollmentCard ? data.customization?.paymentButton?.text!: "Guardar",
+  })}
   </div>
   ${!data.isEnrollmentCard ? `
     <div id="apmsListContainer" class="apms-list-container"></div>
   `:``}
-  <div class="container-pay-button">
-    <button id="${data.collectorIds.tonderPayButton}" class="pay-button hidden">${data.customization?.paymentButton?.text}</button>
-  ${data.isEnrollmentCard ? `
-    <button id="${data.collectorIds.tonderSaveCardButton ? data.collectorIds.tonderSaveCardButton:''}" class="save-card-button">Guardar</button>
-  `:``}  </div>
+  
   <iframe class="tds-iframe" allowtransparency="true" id="${data.collectorIds.tdsIframe}"></iframe>
 </div>
 
@@ -137,7 +145,8 @@ export const cardTemplate = (data: {
 }
 
 .container-pay-button{
-  padding: ${!!data['renderPaymentButton'] ? '30px 30px':''};
+  padding-top: ${!!data['renderPaymentButton'] ? '10px':''};
+  padding-bottom: ${!!data['renderPaymentButton'] ? '10px':''};
 }
 
 .collect-row {
@@ -165,25 +174,36 @@ export const cardTemplate = (data: {
     height: 80px !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;
+    display: none;
+    color: #832828 !important;
+    background-color: #FDE7E7 !important;
+    margin-bottom: 13px !important;
+    font-size: 14px !important;
+    padding: 10px 10px !important;
+    border-radius: 5px !important;
+    text-align: left !important;
+    align-items: center;
+    gap: 8px;
+    margin-top: 5px;
 }
 
 .message-container{
-  color: #3bc635 !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;
+    display: none;
+    color: #28832C !important;
+    background-color: #ECFDE7 !important;
+    margin-bottom: 13px !important;
+    font-size: 14px !important;
+    padding: 10px 10px !important;
+    border-radius: 5px !important;
+    text-align: left !important;
+    align-items: center;
+    gap: 8px;
+    margin-top: ${data.renderPaymentButton || data.renderSaveCardButton ? "0px" : "5px"};
+}
+.error-container p,
+.message-container p {
+  margin: 0;
 }
-
 .pay-button {
   font-size: 16px;
   font-weight: bold;
@@ -458,7 +478,6 @@ export const cardItemsTemplate = (data: {
   cards: Card[];
   collectorIds:CollectorIds;
   renderPaymentButton: boolean;
-  acId: string;
   customStyles: any;
   customization?: IInlineCustomizationOptions;
 }) => {
@@ -467,9 +486,9 @@ export const cardItemsTemplate = (data: {
     const { cvvLabel } = getCardFormLabels(data.customStyles).labels;
 
     return `${total}
-    <div class="ac" id="card_container-${card.skyflow_id}">
+    <div class="ac" id="option_container-${card.skyflow_id}">
       <div class="card-item">
-          <input id="${card.skyflow_id}" class="card_selected" name="card_selected" type="radio"/>
+          <input id="${card.skyflow_id}" class="cards card_selected" 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>
@@ -484,7 +503,7 @@ export const cardItemsTemplate = (data: {
           </label>
       </div>
       <div class="ac-panel">
-        <div class="ac-card-panel-container" id="acContainer${card.skyflow_id}">
+        <div class="ac-option-panel-container" id="acContainer${card.skyflow_id}">
         
            <div class="cvvContainer" id="cvvContainer${card.skyflow_id}">
              <label class="tndr-form-label label-cvv-cards">${cvvLabel}</label>
@@ -521,12 +540,17 @@ export const cardItemsTemplate = (data: {
               
               </div>
            </div>
-           ${ data?.renderPaymentButton ?
-              `<div class="container-card-pay-button">
-                      <button id="${data.collectorIds.tonderPayButton ? data.collectorIds.tonderPayButton:''}${card.skyflow_id}" class="card-pay-button pay-button">${data.customization?.paymentButton?.text}</button>
-                     </div> `
-              :``
-          }
+           ${buttonAndMessagesTemplate({
+              showButton: data.renderPaymentButton || false,
+              classContainerButton: "container-pay-button",
+              tonderButtonId: `${data.collectorIds.tonderPayButton}${card.skyflow_id}`,
+              classButton: "tndr-button card-pay-button pay-button",
+              msgErrorId: `${data.collectorIds.msgError}${card.skyflow_id}`,
+              msgErrorTextId: `${data.collectorIds.msgErrorText}${card.skyflow_id}`,
+              msgNotificationId: `${data.collectorIds.msgNotification}${card.skyflow_id}`,
+              msgNotificationTextId: `${data.collectorIds.msgNotificationText}${card.skyflow_id}`,
+              buttonText: data.customization?.paymentButton?.text!
+            })}
         </div>
       </div>
     </div>`
@@ -542,7 +566,7 @@ export const cardItemsTemplate = (data: {
         margin-bottom: 0;
         border-bottom: 1px solid #e2e8f0;
       }
-      .ac-card-panel-container{
+      .ac-option-panel-container{
         padding: ${data?.renderPaymentButton ? '20px 32px 0px 32px':'20px 32px 20px 32px'};
       }
       .cvvContainer{
@@ -566,7 +590,7 @@ export const cardItemsTemplate = (data: {
         transition-delay: 0.3s;
       }
       .cvvContainer.show .cvvIcon,
-      .ac-card-panel-container.show .card-pay-button {
+      .ac-option-panel-container.show .card-pay-button {
         opacity: 1;
         transform: translateY(0);
         transition-delay: 0.3s;
@@ -787,7 +811,7 @@ export const cardItemsTemplate = (data: {
     </style>
   `
   const cardItem = `
-  <div class="accordion-container${data.acId}">
+  <div class="accordion-container">
     ${cardItemsHTML}
   </div>
   ${cardItemStyle}
@@ -795,21 +819,39 @@ export const cardItemsTemplate = (data: {
   return cardItem;
 }
 
-export const apmItemsTemplate = (external: boolean, apms: ITonderPaymentMethod[]) => {
-  const apmItemsHTML = apms.reduce((total, apm) => {
+export const apmItemsTemplate = (data:{apms: ITonderPaymentMethod[]; collectorIds:CollectorIds; renderPaymentButton?: boolean;  customization?: IInlineCustomizationOptions;} ) => {
+  const apmItemsHTML = data.apms.reduce((total, apm) => {
     const apm_data = getPaymentMethodDetails(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}">
-          <div class="apm-image">
-            <div class="apm-image-border"></div>
-            <img src="${apm_data.icon}" />
-          </div>
-          <div class="apm-name">${apm_data.label}</div>
-        </label>
-    </div>`
+    <div class="ac ac-paymentMethods" id="option_container-${apm.pk}">
+      <div class="apm-item">
+          <input id="${apm.pk}" class="paymentMethods card_selected" name="card_selected" type="radio"/>
+          <label class="apm-item-label" for="${apm.pk}">
+            <div class="apm-image">
+              <div class="apm-image-border"></div>
+              <img src="${apm_data.icon}" />
+            </div>
+            <div class="apm-name">${apm_data.label}</div>
+          </label>
+      </div>
+      <div class="ac-panel">
+        <div class="ac-option-panel-container tndr-pm-item-container" id="acContainer${apm.pk}">
+         ${buttonAndMessagesTemplate({
+          showButton: data.renderPaymentButton || false,
+          classContainerButton: "container-pay-button",
+          tonderButtonId: `${data.collectorIds.tonderPayButton}${apm.pk}`,
+          classButton: "tndr-button card-pay-button pay-button",
+          msgErrorId: `${data.collectorIds.msgError}${apm.pk}`,
+          msgErrorTextId: `${data.collectorIds.msgErrorText}${apm.pk}`,
+          msgNotificationId: `${data.collectorIds.msgNotification}${apm.pk}`,
+          msgNotificationTextId: `${data.collectorIds.msgNotificationText}${apm.pk}`,
+          buttonText: data.customization?.paymentButton?.text!
+        })}
+        </div>
+      </div>
+    </div>
+`
   }, ``);
 
   const apmItemStyle = `
@@ -824,14 +866,15 @@ export const apmItemsTemplate = (external: boolean, apms: ITonderPaymentMethod[]
         margin-bottom: 15px;
         width: 100%;
       }
-
+      .ac-option-panel-container.tndr-pm-item-container{
+        padding-top: 0;
+      }
       .apm-item {
         position: relative;
         display: flex;
         justify-content: start;
         align-items: center;
         gap: 33% 15px;
-        border-bottom: 1px solid #e2e8f0;
         padding: 0px 30px;
       }
 
@@ -949,8 +992,46 @@ export const apmItemsTemplate = (external: boolean, apms: ITonderPaymentMethod[]
     </style>
   `
   const apmItem = `
-  ${apmItemsHTML}
+  <div class="accordion-container-apm">
+    ${apmItemsHTML}
+  </div>
   ${apmItemStyle}
   `
   return apmItem;
-}
+}
+
+const buttonAndMessagesTemplate = (data: {
+  showButton: boolean;
+  classContainerButton: string;
+  tonderButtonId: string;
+  classButton: string;
+  msgErrorId: string;
+  msgNotificationId: string;
+  msgNotificationTextId: string;
+  msgErrorTextId: string;
+  buttonText: string;
+}) => {
+  return `
+      ${
+      data.showButton
+          ? `
+         <div class="${data.classContainerButton}">
+          <button id="${data.tonderButtonId}" class="${data.classButton}">${data.buttonText}</button>
+        </div>
+        `
+          : ``
+  }
+        <div id="${data.msgErrorId}" class="error-container">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 28.25 27.828">
+              <path id="Cancel_Icon" data-name="Cancel Icon" d="M89.04-859.129l5.085-5.009,5.085,5.009,1.978-1.948L96.1-866.086l5.085-5.009-1.978-1.948-5.085,5.009-5.085-5.009L87.063-871.1l5.085,5.009-5.085,5.009Zm5.085,6.957a13.935,13.935,0,0,1-5.509-1.1,14.276,14.276,0,0,1-4.485-2.974,14.04,14.04,0,0,1-3.019-4.418A13.375,13.375,0,0,1,80-866.086a13.374,13.374,0,0,1,1.112-5.426,14.041,14.041,0,0,1,3.019-4.418,14.277,14.277,0,0,1,4.485-2.974,13.932,13.932,0,0,1,5.509-1.1,13.933,13.933,0,0,1,5.509,1.1,14.278,14.278,0,0,1,4.485,2.974,14.041,14.041,0,0,1,3.019,4.418,13.374,13.374,0,0,1,1.112,5.426,13.375,13.375,0,0,1-1.112,5.426,14.04,14.04,0,0,1-3.019,4.418,14.276,14.276,0,0,1-4.485,2.974A13.935,13.935,0,0,1,94.125-852.172Z" transform="translate(-80 880)" fill="#832828"/>
+            </svg>
+            <p id="${data.msgErrorTextId}"></p>
+          </div>
+          <div id="${data.msgNotificationId}" class="message-container">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 28.25 27.828">
+              <path id="Check_Circle_Icon" data-name="Check Circle Icon" d="M92.147-859.686l9.958-9.809-1.977-1.948-7.981,7.861-4.026-3.965L86.144-865.6Zm1.978,7.513a13.935,13.935,0,0,1-5.509-1.1,14.278,14.278,0,0,1-4.485-2.974,14.041,14.041,0,0,1-3.019-4.418A13.374,13.374,0,0,1,80-866.086a13.374,13.374,0,0,1,1.112-5.426,14.041,14.041,0,0,1,3.019-4.418,14.278,14.278,0,0,1,4.485-2.974,13.935,13.935,0,0,1,5.509-1.1,13.935,13.935,0,0,1,5.509,1.1,14.278,14.278,0,0,1,4.485,2.974,14.041,14.041,0,0,1,3.019,4.418,13.374,13.374,0,0,1,1.112,5.426,13.374,13.374,0,0,1-1.112,5.426,14.041,14.041,0,0,1-3.019,4.418,14.278,14.278,0,0,1-4.485,2.974A13.935,13.935,0,0,1,94.125-852.172Z" transform="translate(-80 880)" fill="#28832c"/>
+            </svg>
+            <p id="${data.msgNotificationTextId}"></p>
+          </div> 
+  `;
+};

package/src/helpers/utils.ts

@@ -46,31 +46,55 @@ export function toCurrency(value: string | number) {
   return typeof value === "number" && formatter.format(value);
 }
 
-export function showError(message: string, containerId: string, payButtonId: string) {
-  const msgErrorDiv: any = document.getElementById(`${containerId}`);
-  if(msgErrorDiv) {
-    msgErrorDiv.classList.add("error-container");
-    msgErrorDiv.innerHTML = message;
+export function showError(
+    message: string,
+    selectedId:string | null=null,
+    containerId: string = "msgError",
+    containerTextId: string = "msgErrorText",
+    ) {
+  try{
+    const existSelectedId = selectedId && selectedId !== "new";
+    let msgErrorDiv = document.getElementById(`${containerId}${existSelectedId ? selectedId : ""}`);
+    let msgErrorText = document.getElementById(
+        `${containerTextId}${existSelectedId ? selectedId : ""}`,
+    );
+    msgErrorText!.innerHTML = "";
+    msgErrorText!.innerHTML = message;
+    msgErrorDiv!.style.display = "flex";
+    console.log("msgErrorDiv", msgErrorDiv)
     setTimeout(function () {
-      try {
-        const selector: any = document.querySelector(`#${payButtonId}`)
-        selector.disabled = false;
-      } catch (error) {}
-      msgErrorDiv.classList.remove("error-container");
-      msgErrorDiv.innerHTML = "";
-    }, 3000);
+      msgErrorDiv!.style.display = "none";
+      msgErrorText!.innerHTML = "";
+    }, 30000);
+  }catch (error) {
+    console.warn("Error showing message error", error);
   }
+
 }
 
-export function showMessage(message: string, containerId: string) {
-  const msgDiv: any = document.getElementById(`${containerId}`);
-  if(msgDiv) {
-    msgDiv.classList.add("message-container");
-    msgDiv.innerHTML = message;
-    setTimeout(function () {
-      msgDiv.classList.remove("message-container");
-      msgDiv.innerHTML = "";
-    }, 3000);
+export function showMessage(
+    message: string,
+    selectedId: string | null = null,
+    containerId = "msgNotification",
+    containerTextId = "msgNotificationText",
+) {
+  try {
+    const existSelectedId = selectedId && selectedId !== "new";
+    const msgDiv = document.getElementById(`${containerId}${existSelectedId ? selectedId : ""}`);
+    if (msgDiv) {
+      let msgText = document.getElementById(
+          `${containerTextId}${existSelectedId ? selectedId : ""}`,
+      );
+      msgDiv.style.display = "flex";
+      msgText!.innerHTML = "";
+      msgText!.innerHTML = message;
+      setTimeout(function () {
+        msgDiv.style.display = "none";
+        msgText!.innerHTML = "";
+      }, 30000);
+    }
+  } catch (error) {
+    console.error("Error showing message", error);
   }
 }
 
@@ -213,6 +237,14 @@ export const getPaymentMethodDetails = (scheme_data: string): {icon: string; lab
       label: "Círculo K",
       icon: "https://d35a75syrgujp0.cloudfront.net/payment_methods/circulo_k.png",
     },
+    [PAYMENT_METHOD.MERCADOPAGO]: {
+      label: "Mercado Pago",
+      icon: "https://d35a75syrgujp0.cloudfront.net/payment_methods/mercadopago.png",
+    },
+    [PAYMENT_METHOD.OXXOPAY]: {
+      label: "Oxxo Pay",
+      icon: "https://d35a75syrgujp0.cloudfront.net/payment_methods/oxxopay.png",
+    },
     [PAYMENT_METHOD.SEVEN11]: {
       label: "7 Eleven",
       icon: "https://d35a75syrgujp0.cloudfront.net/payment_methods/7_eleven.png",

package/src/index.ts

@@ -1,7 +1,5 @@
-import { Checkout } from './classes/checkout'
 import { InlineCheckout } from './classes/inlineCheckout'
 
 export {
-    Checkout,
     InlineCheckout
 }

package/src/shared/enums/AccordionType.ts

@@ -0,0 +1 @@
+type AccordionType = "cards" | "paymentMethods";

package/dist/classes/checkout.d.ts

@@ -1,31 +0,0 @@
-import { CheckoutType } from "../types/commons";
-export declare class Checkout {
-    url: string;
-    apiKey?: string;
-    type: string;
-    backgroundColor: string;
-    color: string;
-    params: string;
-    order: any;
-    buttonText: string;
-    cb: (params: any) => void;
-    tonderButton: any;
-    constructor({ apiKey, type, backgroundColor, color, cb, url }: CheckoutType);
-    generateButton: (buttonText: string) => void;
-    getButton: ({ buttonText }: {
-        buttonText: string;
-    }) => any;
-    mountButton: ({ buttonText }: {
-        buttonText: string;
-    }) => void;
-    stylishButton: (element: HTMLElement) => void;
-    setOrder: ({ products, email, shippingCost }: {
-        products: any;
-        email: string;
-        shippingCost: string;
-    }) => any;
-    openTabListener: (tab: any, button: HTMLButtonElement) => void;
-    openCheckout: () => void;
-    getUrlParams: () => string;
-    receiveMessage(event: any): void;
-}

package/src/classes/checkout.ts

@@ -1,139 +0,0 @@
-import { AES } from "crypto-js";
-import {CheckoutType} from "../types/commons";
-
-export class Checkout {
-  url: string;
-  apiKey?: string;
-  type: string;
-  backgroundColor: string;
-  color: string;
-  params: string;
-  order: any;
-  buttonText: string;
-  cb: (params: any) => void;
-  tonderButton: any;
-
-  constructor({
-    apiKey,
-    type = "payment",
-    backgroundColor="#141414",
-    color="#EBEBEB",
-    cb=()=>{},
-    url="http://checkout.tonder.io/#/"
-  }: CheckoutType) {
-    this.url = url
-    this.apiKey = apiKey
-    this.type = type
-    this.backgroundColor = backgroundColor
-    this.color = color
-    this.params = ""
-    this.order = {}
-    this.buttonText = "Proceder al pago"
-    this.cb = cb
-
-    window.addEventListener("message", this.receiveMessage.bind(this), false);
-  }
-  generateButton = (buttonText: string) => {
-    this.buttonText = buttonText ? buttonText : this.buttonText
-    this.tonderButton = document.createElement('button');
-    this.tonderButton.innerHTML = this.buttonText;
-    this.stylishButton(this.tonderButton)
-    this.tonderButton.onclick = this.openCheckout
-  }
-  getButton = ({ buttonText }: { buttonText: string }) => {
-    this.generateButton(buttonText)
-    return this.tonderButton
-  }
-  mountButton = ({ buttonText }: { buttonText: string }) => {
-    this.generateButton(buttonText)
-    const entryPoint: HTMLElement | null = document.getElementById("tonder-checkout")
-    try {
-      if(entryPoint) {
-        entryPoint.innerHTML = ""
-        entryPoint.append(this.tonderButton)
-      }
-    } catch(error) {
-      console.error(error)
-    }
-  }
-  stylishButton = (element: HTMLElement) => {
-    element.style.backgroundColor = this.backgroundColor
-    element.style.color = this.color
-    element.style.display = 'flex'
-    element.style.justifyContent = 'center'
-    element.style.border = 'none'
-    element.style.padding = '1rem'
-    element.style.borderRadius = '10px'
-    element.style.fontSize = '1rem'
-    element.style.width = '100%'
-    element.style.boxShadow = '0 3px 6px 0 rgba(0,0,0,0.16)'
-  }
-  setOrder = ({ products, email, shippingCost }: { products: any, email: string, shippingCost: string }) => {
-    let _order: any = {}
-    if (products) _order.products = products 
-    if (email) _order.email = email 
-    if (shippingCost) _order.shippingCost = shippingCost
-    this.order = {...this.order, ..._order}
-    return this.order
-  }
-  openTabListener = (tab: any, button: HTMLButtonElement) => {
-    const tabInterval = setInterval(() => {
-      if (tab.closed) {
-        clearInterval(tabInterval);
-        button.disabled = false
-        button.innerHTML = this.buttonText
-      }
-    }, 500)
-  }
-  openCheckout = () => {
-    const queryString = this.getUrlParams()
-    const encrypted = AES.encrypt(queryString, 'url-params-encrypt').toString()
-    const encodedURL = encodeURIComponent(encrypted);
-    this.params = "?" + encodedURL;
-    const newWindow = window.open(this.url + this.params, '_blank', `width=1200,height=$800,left=0,top=0`);
-    this.tonderButton.disabled = true
-    this.tonderButton.innerHTML = `
-      <div class="loader"></div>
-      <style>
-      .loader {
-        border: 4px solid ${this.color};
-        border-radius: 50%;
-        border-top: 4px solid ${this.backgroundColor};
-        width: 0.625rem;
-        height: 0.625rem;
-        -webkit-animation: spin 2s linear infinite; /* Safari */
-          animation: spin 2s linear infinite;
-      }
-
-    /* Safari */
-      @-webkit-keyframes spin {
-        0% { -webkit-transform: rotate(0deg); }
-        100% { -webkit-transform: rotate(360deg); }
-      }
-
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-      </style>
-      `
-    this.openTabListener(newWindow, this.tonderButton)
-  }
-  getUrlParams = () => {
-    const params = { apiKey: this.apiKey, ...this.order, type: this.type}
-    if (params.products) {
-      params.products = JSON.stringify(params.products)
-    }
-    const queryString = new URLSearchParams(params).toString();
-    return queryString
-  }
-  receiveMessage(event: any) {
-    // Parse data if it is possible, in case of error it will return the raw data.
-    try {
-      const data = JSON.parse(event.data)
-      this.cb(data)
-    } catch(error) {
-      this.cb(event.data)
-    }
-  }
-}