@tonder.io/ionic-full-sdk 0.0.46-beta.9 → 0.0.47-beta.DEV1406.3a5debd

package/src/helpers/template.ts

@@ -1,6 +1,7 @@
-import { getCardType, getPaymentMethodDetails } from './utils';
+import {getCardFormLabels, getCardType, getPaymentMethodDetails} from './utils';
 import {ITonderPaymentMethod} from "@tonder.io/ionic-lite-sdk/dist/types/paymentMethod";
 import {CustomizationOptions} from "@tonder.io/ionic-lite-sdk/dist/types/commons";
+import {defaultStyles} from "./styles";
 
 export type CollectorIds = {
   holderName: string,
@@ -26,13 +27,20 @@ export type Card = {
   skyflow_id: string
 }
 
-export const cardTemplate = (external: boolean, collectorIds: CollectorIds, isEnrollmentCard: boolean = false, data: {renderPaymentButton?: boolean; customization?: CustomizationOptions} = {}) => `
+export const cardTemplate = (data: {
+  renderPaymentButton?: boolean;
+  customization?: CustomizationOptions;
+  collectorIds: CollectorIds;
+  isEnrollmentCard?: boolean;
+  customStyles?: any;
+} = {isEnrollmentCard: false, collectorIds: {} as CollectorIds}) => {
+  return `
 <div class="container-tonder">
-  ${ data.customization?.saveCards?.showSaved ? 
-    `<div id="${collectorIds.cardsListContainer}" class="cards-list-container"></div>`
-    :``
+  ${ data.customization?.saveCards?.showSaved ?
+      `<div id="${data.collectorIds!.cardsListContainer}" class="cards-list-container"></div>`
+      :``
   }
-  ${!isEnrollmentCard ? `
+  ${!data.isEnrollmentCard ? `
     <div class="pay-new-card">
       <input checked id="new" class="card_selected" name="card_selected" type="radio"/>
       <label class="card-item-label-new" for="new">
@@ -42,14 +50,14 @@ export const cardTemplate = (external: boolean, collectorIds: CollectorIds, isEn
     </div>
   `:``}
   <div class="container-form">
-    <div id="${collectorIds.holderName}" class="empty-div"></div>
-    <div id="${collectorIds.cardNumber}" class="empty-div"></div>
+    <div id="${data.collectorIds.holderName}" class="empty-div empty-div-card"></div>
+    <div id="${data.collectorIds.cardNumber}" class="empty-div empty-div-card"></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 id="${data.collectorIds.expirationMonth}" class="empty-div empty-div-card"></div>
+      <div id="${data.collectorIds.expirationYear}" class="expiration-year"></div>
+      <div id="${data.collectorIds.cvv}" class="empty-div empty-div-card"></div>
     </div>
-    ${!isEnrollmentCard && !!data.customization?.saveCards?.showSaveCardOption ? `
+    ${!data.isEnrollmentCard && !!data.customization?.saveCards?.showSaveCardOption ? `
       <div class="checkbox">
         <input id="save-checkout-card" type="checkbox">
         <label for="save-checkout-card">
@@ -57,21 +65,21 @@ export const cardTemplate = (external: boolean, collectorIds: CollectorIds, isEn
         </label>
       </div>
     `:``}
-    <div id="${collectorIds.msgError}"></div>
-    <div id="${collectorIds.msgNotification}"></div>
+    <div id="${data.collectorIds.msgError}"></div>
+    <div id="${data.collectorIds.msgNotification}"></div>
   </div>
-  ${!isEnrollmentCard ? `
+  ${!data.isEnrollmentCard ? `
     <div id="apmsListContainer" class="apms-list-container"></div>
   `:``}
   <div class="container-pay-button">
-    <button id="${collectorIds.tonderPayButton}" class="pay-button">Pagar</button>
-  ${isEnrollmentCard ? `
-    <button id="${collectorIds.tonderSaveCardButton ? collectorIds.tonderSaveCardButton:''}" class="save-card-button">Guardar</button>
+    <button id="${data.collectorIds.tonderPayButton}" class="pay-button hidden">Pagar</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="${collectorIds.tdsIframe}"></iframe>
+  <iframe class="tds-iframe" allowtransparency="true" id="${data.collectorIds.tdsIframe}"></iframe>
 </div>
 
-${external ? `` : `<style>
+<style>
 
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
 
@@ -95,10 +103,10 @@ ${external ? `` : `<style>
 }
 
 .container-form {
-  padding: 25px 21px 0px 21px;
+  padding: 25px 30px 0px 30px;
 }
 
-#${collectorIds.tdsIframe} {
+#${data.collectorIds.tdsIframe} {
   display: none;
   position: fixed;
   width: 100vw;
@@ -135,6 +143,7 @@ ${external ? `` : `<style>
   display: flex !important;
   justify-content: space-between !important;
   width: 100% !important;
+  gap: 16px;
 }
 
 .collect-row > :first-child {
@@ -148,13 +157,12 @@ ${external ? `` : `<style>
 
 .empty-div {
   position: relative;
-  height: 80px !important;
   margin-top: 2px;
   margin-bottom: 4px;
-  margin-left: 10px !important;
-  margin-right: 10px !important;
 }
-
+.empty-div-card {
+    height: 80px !important;
+}
 .error-container{
   color: red !important;
   background-color: #FFDBDB !important;
@@ -188,10 +196,11 @@ ${external ? `` : `<style>
   background-color: #000;
   color: #fff;
   margin-bottom: 10px;
-  display: none;
   font-family: "Inter", sans-serif !important;
 }
-
+.hidden{
+  display: none;
+}
 .pay-button:disabled, pay-button[disabled] {
   background-color: #B9B9B9;
 }
@@ -218,6 +227,44 @@ ${external ? `` : `<style>
   background-color: #B9B9B9;
 }
 
+  .tndr-simulate-input-cvv-container{
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      pointer-events: none;
+      
+  }
+  .tndr-simulate-input-cvv {
+      width: 100%;
+      pointer-events: none;
+      position: relative;
+  }
+  .tndr-simulate-input-cvv-container label{
+    line-height: ${data?.customStyles?.labelStyles?.base?.lineHeight ? data?.customStyles?.labelStyles?.base?.lineHeight : ""};
+    color: transparent;
+    font-size: ${data?.customStyles?.labelStyles?.base?.fontSize ? data?.customStyles?.labelStyles?.base?.fontSize : defaultStyles.labelStyles.base.fontSize};
+    font-family: ${data?.customStyles?.labelStyles?.base?.fontFamily ? data?.customStyles?.labelStyles?.base?.fontFamily : defaultStyles.labelStyles.base.fontFamily};
+    font-weight: ${data?.customStyles?.labelStyles?.base?.fontWeight ? data?.customStyles?.labelStyles?.base?.fontWeight : defaultStyles.labelStyles.base.fontWeight};
+    text-align: ${data?.customStyles?.labelStyles?.base?.textAlign ? data?.customStyles?.labelStyles?.base?.textAlign : defaultStyles.labelStyles.base.textAlign};
+    pointer-events: none;
+  }
+  .tndr-simulate-input-cvv input {
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      min-height: 44px;
+      background-color: transparent;
+      pointer-events: none;
+  }
+  .tndr-form-label{
+    line-height: ${data?.customStyles?.labelStyles?.base?.lineHeight ? data?.customStyles?.labelStyles?.base?.lineHeight : "22px"};
+    color: ${data?.customStyles?.labelStyles?.base?.color ? data?.customStyles?.labelStyles?.base?.color : defaultStyles.labelStyles.base.color};
+    font-size: ${data?.customStyles?.labelStyles?.base?.fontSize ? data?.customStyles?.labelStyles?.base?.fontSize : defaultStyles.labelStyles.base.fontSize};
+    font-family: ${data?.customStyles?.labelStyles?.base?.fontFamily ? data?.customStyles?.labelStyles?.base?.fontFamily : defaultStyles.labelStyles.base.fontFamily};
+    font-weight: ${data?.customStyles?.labelStyles?.base?.fontWeight ? data?.customStyles?.labelStyles?.base?.fontWeight : defaultStyles.labelStyles.base.fontWeight};
+    text-align: ${data?.customStyles?.labelStyles?.base?.textAlign ? data?.customStyles?.labelStyles?.base?.textAlign : defaultStyles.labelStyles.base.textAlign};
+  }
 .lds-dual-ring {
   display: inline-block;
   width: 14px;
@@ -403,34 +450,202 @@ ${external ? `` : `<style>
 }
 
 </style>
-`}`
+`
+}
 
-export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
+export const cardItemsTemplate = (data: {
+  cards: Card[];
+  collectorIds:CollectorIds;
+  renderPaymentButton: boolean;
+  acId: string;
+  customStyles: any;
+}) => {
   
-  const cardItemsHTML = cards.reduce((total: string, card: Card) => {
+  const cardItemsHTML = data.cards.reduce((total: string, card: Card) => {
+    const { cvvLabel } = getCardFormLabels(data.customStyles).labels;
+
     return `${total}
-    <div class="card-item" id="card_container-${card.skyflow_id}">
-        <input id="${card.skyflow_id}" class="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>
-          <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 xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
-                <path fill="currentColor" d="M292.309-140.001q-30.308 0-51.308-21t-21-51.308V-720h-40v-59.999H360v-35.384h240v35.384h179.999V-720h-40v507.691q0 30.308-21 51.308t-51.308 21H292.309ZM376.155-280h59.999v-360h-59.999v360Zm147.691 0h59.999v-360h-59.999v360Z"/>
-              </svg>
-            </button>
-          </div>
-        </label>
+    <div class="ac" id="card_container-${card.skyflow_id}">
+      <div class="card-item">
+          <input id="${card.skyflow_id}" class="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>
+            <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 xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+                  <path fill="currentColor" d="M292.309-140.001q-30.308 0-51.308-21t-21-51.308V-720h-40v-59.999H360v-35.384h240v35.384h179.999V-720h-40v507.691q0 30.308-21 51.308t-51.308 21H292.309ZM376.155-280h59.999v-360h-59.999v360Zm147.691 0h59.999v-360h-59.999v360Z"/>
+                </svg>
+              </button>
+            </div>
+          </label>
+      </div>
+      <div class="ac-panel">
+        <div class="ac-card-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>
+              <div id="${data.collectorIds.cvv}${card.skyflow_id}" class="empty-div">
+                <div class="tndr-simulate-input-cvv-container">
+                   <div class="tndr-simulate-input-cvv">
+                      <svg class="cvvIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="24" viewBox="0 0 270 178">
+                        <defs>
+                          <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+                            <stop offset="0" stop-color="#386bbf"/>
+                            <stop offset="1" stop-color="#032ea3"/>
+                          </linearGradient>
+                          <linearGradient id="linear-gradient-2" x1="0.5" y1="0.115" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+                            <stop offset="0" stop-color="#1c1c1c"/>
+                            <stop offset="1" stop-color="#151515"/>
+                          </linearGradient>
+                        </defs>
+                        <g id="Grupo_3" data-name="Grupo 3" transform="translate(-69 -312)">
+                          <g id="Grupo_2" data-name="Grupo 2">
+                            <rect id="Rectángulo_58" data-name="Rectángulo 58" width="253" height="165" rx="25" transform="translate(69 312)" fill="url(#linear-gradient)"/>
+                            <rect id="Rectángulo_61" data-name="Rectángulo 61" width="68" height="8" rx="4" transform="translate(86 437)" fill="#fff" opacity="0.877"/>
+                            <rect id="Rectángulo_66" data-name="Rectángulo 66" width="253" height="24" transform="translate(69 347)" fill="url(#linear-gradient-2)"/>
+                            <g id="Elipse_4" data-name="Elipse 4" transform="translate(221 374)" fill="#fff" stroke="#191919" stroke-width="1">
+                              <ellipse cx="59" cy="58" rx="59" ry="58" stroke="none"/>
+                              <ellipse cx="59" cy="58" rx="58.5" ry="57.5" fill="none"/>
+                            </g>
+                          </g>
+                          <text id="_123" data-name="123" transform="translate(240 448)" font-size="45" font-family="Menlo-Regular, Menlo"><tspan x="0" y="0">123</tspan></text>
+                        </g>
+                      </svg>
+                      <input tabindex="-1"/>
+                   </div>
+                 </div>
+              
+              </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">Pagar</button>
+                     </div> `
+              :``
+          }
+        </div>
+      </div>
     </div>`
   }, ``);
 
-  const cardItemStyle = external ? '' : `
+  const cardItemStyle = `
     <style>
-
       @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
-
+      .ac {
+        border: none;
+        background-color: transparent;
+        box-sizing: border-box;
+        margin-bottom: 0;
+        border-bottom: 1px solid #e2e8f0;
+      }
+      .ac-card-panel-container{
+        padding: ${data?.renderPaymentButton ? '20px 32px 0px 32px':'20px 32px 20px 32px'};
+      }
+      .cvvContainer{
+       max-width: 60%; 
+       position: relative;
+       padding: 0 0 0 29px;
+      }
+      .cvvIcon {
+        position: absolute;
+        right: 8px;
+        top: 12px;
+        opacity: 0;
+        transform: translateY(10px);
+        transition: opacity 0.3s ease, transform 0.3s ease;
+      }
+      .label-cvv-cards {
+        opacity: 0;
+      }
+      .cvvContainer.show .label-cvv-cards{
+        opacity: 1;
+        transition-delay: 0.3s;
+      }
+      .cvvContainer.show .cvvIcon,
+      .ac-card-panel-container.show .card-pay-button {
+        opacity: 1;
+        transform: translateY(0);
+        transition-delay: 0.3s;
+      }
+      .error-custom-inputs-tonder-cards{
+        bottom: 2px !important;
+      }
+      .container-card-pay-button{
+        margin: 20px 0px;
+      }
+      .card-pay-button{
+        display: block;
+        opacity: 0;
+        transform: translateY(10px);
+        transition: opacity 0.3s ease, transform 0.3s ease;
+      }
+      
+      .ac .ac-header {
+        margin: 0;
+        padding: 0;
+      }
+      
+      .ac .ac-trigger {
+        font:
+          bold 16px "Arial",
+          sans-serif;
+        color: var(--color-black);
+        text-align: left;
+        width: 100%;
+        padding: 8px 32px 8px 8px;
+        display: block;
+        cursor: pointer;
+        background-color: transparent;
+        transition: color 0.25s ease;
+        position: relative;
+        text-decoration: none;
+        margin: 0;
+        border: 0;
+      }
+      
+      .ac .ac-trigger::after {
+        content: "+";
+        text-align: center;
+        width: 15px;
+        transform: translate(0, -50%);
+        position: absolute;
+        right: 10px;
+        top: 50%;
+      }
+      
+      .ac .ac-trigger:focus {
+        color: var(--color-grey);
+      }
+      
+      .ac .ac-panel {
+        overflow: hidden;
+        transition-property: height, visibility;
+        transition-timing-function: ease;
+      }
+      
+      .ac .ac-panel .ac-text {
+        font:
+          15px/24px "Arial",
+          sans-serif;
+        color: var(--color-black);
+        padding: 8px;
+        margin: 0;
+      }
+      
+      .ac.js-enabled .ac-panel {
+        visibility: hidden;
+      }
+      
+      .ac.is-active .ac-panel {
+        visibility: visible;
+      }
+      
+      .ac.is-active > .ac-header .ac-trigger::after {
+        content: "\\2013";
+      }
+      
       .card-item-label {
         display: flex;
         justify-content: space-between;
@@ -448,7 +663,6 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
         justify-content: start;
         align-items: center;
         gap: 33% 15px;
-        border-bottom: 1px solid #e2e8f0;
         padding: 0px 30px;
       }
 
@@ -557,11 +771,23 @@ export const cardItemsTemplate = (external: boolean, cards: Card[]) => {
         transition-duration: 150ms;
         opacity: 10;
       }
-
+      @media screen and (max-width: 768px) {
+        .cvvContainer {
+          max-width: 70%;
+        }
+      }
+    
+      @media screen and (max-width: 480px) {
+        .cvvContainer {
+          max-width: 100%;
+        }
+      }
     </style>
   `
   const cardItem = `
-  ${cardItemsHTML}
+  <div class="accordion-container${data.acId}">
+    ${cardItemsHTML}
+  </div>
   ${cardItemStyle}
   `
   return cardItem;
@@ -584,7 +810,7 @@ export const apmItemsTemplate = (external: boolean, apms: ITonderPaymentMethod[]
     </div>`
   }, ``);
 
-  const apmItemStyle = external ? '' :`
+  const apmItemStyle = `
     <style>
       .apm-item-label {
         display: flex;

package/src/helpers/utils.ts

@@ -1,6 +1,7 @@
 import { PAYMENT_METHOD } from "./constants";
 import { Card } from "./template";
-import {ICard} from "@tonder.io/ionic-lite-sdk/dist/types/card";
+import get from "lodash.get";
+import {defaultStyles} from "./styles";
 
 export async function addScripts() {
   try {
@@ -400,4 +401,58 @@ export const getPaymentMethodDetails = (scheme_data: string): {icon: string; lab
 
 const clearSpace = (text: string) => {
   return text.trim().replace(/\s+/g, '');
-}
+}
+
+export function generateRandomString(length: number) {
+  const characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; // Letras en minúscula y mayúscula
+  let result = "";
+
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length);
+    result += characters[randomIndex];
+  }
+
+  return result;
+}
+
+export function getCardFormLabels(customStyles: any) {
+  return {
+    labels: {
+      nameLabel: get(customStyles, "labels.nameLabel", defaultStyles.labels.nameLabel),
+      cardLabel: get(customStyles, "labels.cardLabel", defaultStyles.labels.cardLabel),
+      cvvLabel: get(customStyles, "labels.cvvLabel", defaultStyles.labels.cvvLabel),
+      expiryDateLabel: get(
+          customStyles,
+          "labels.expiryDateLabel",
+          defaultStyles.labels.expiryDateLabel,
+      ),
+    },
+    placeholders: {
+      namePlaceholder: get(
+          customStyles,
+          "placeholders.namePlaceholder",
+          defaultStyles.placeholders.namePlaceholder,
+      ),
+      cardPlaceholder: get(
+          customStyles,
+          "placeholders.cardPlaceholder",
+          defaultStyles.placeholders.cardPlaceholder,
+      ),
+      cvvPlaceholder: get(
+          customStyles,
+          "placeholders.cvvPlaceholder",
+          defaultStyles.placeholders.cvvPlaceholder,
+      ),
+      expiryMonthPlaceholder: get(
+          customStyles,
+          "placeholders.expiryMonthPlaceholder",
+          defaultStyles.placeholders.expiryMonthPlaceholder,
+      ),
+      expiryYearPlaceholder: get(
+          customStyles,
+          "placeholders.expiryYearPlaceholder",
+          defaultStyles.placeholders.expiryYearPlaceholder,
+      ),
+    },
+  };
+}

package/src/types/inlineCheckout.ts

@@ -63,6 +63,8 @@ export interface IInlineCheckout {
     removeCheckout(): void;
 
     /**
+     * @deprecated This method is deprecated and will be removed in a future release.
+     * It is no longer necessary to use this method; you can now pass all payment data directly in the configureCheckout function.
      * Set the payment data, such as customer, cart, and metadata. This is useful when using the default Tonder payment button.
      * @returns {void}
      * @public