Buy - Outbound | chattigo-webkit Documentation

.c-form--buy-messages

scss

.c-form--buy-messages {
  .c-input {
    max-width: 324px;

    @include element('label') {
      &::first-letter {
        text-transform: uppercase;
      }
    }
  }
}

Formulario para el ingreso de presupuesto para la compra de mensajes outbound.

Example

html

<form class="c-form--buy-messages">
  <label class="c-input__label">
    Presupuesto total
  </label>
  <input type="text" class="c-input" value="US$30.000" />
  <p class="c-input__error-message">
    US$3 cada mensaje
  </p>
  
  
  <button class="c-button c-button--secondary">
    Siguiente
  </button>
</form>

.c-detailed-info

scss

.c-detailed-info {
  @include use-font('body');
  background-color: use-color('base', 'white');
  border: solid 1px use-color('grey', 'light-alt');
  border-radius: 4px;
  box-sizing: border-box;
  color: use-color('grey');
  margin-bottom: 28px;
  padding: 16px;

  @include media-breakpoint-up('tablet') {
    padding: 16px 16px 20px 44px;
  }

  @include element('list') {
    // this important is a fix for display component in the docs
    list-style: inside !important;
    margin: 4px 0 0;

    .c-list {
      @include element('item') {
        margin-bottom: 4px;

        &::first-letter {
          text-transform: uppercase;
        }
      }
    }
  }

  &::first-letter {
    text-transform: uppercase;
  }
}

Componente contenedor de la lista con las condiciones comerciales.

Example

html

<div class="c-detailed-info">
  Condiciones de los envíos salientes
  <ul class="c-list c-detailed-info__list">
    <li class="c-list__item">Los precios no incluyen IVA</li>
    <li class="c-list__item">El total de mensajes presupuestados tiene validez por (1) año</li>
    <li class="c-list__item">El total de mensajes presupuestados estará disponible una vez confirme el botón de pago</li>
  </ul>
</div>

.c-simple-message

scss

.c-simple-message {
  @include use-font('body', 'light');
  color: use-color('grey');

  @include element('image') {
    margin: 0 4px;
    vertical-align: middle;
    width: 23px;
  }
  
  @include modifier('legal') {
    color: use-color('grey', 'light');
    margin: 24px auto 12px;
    max-width: 500px;
    text-align: center;
  }

  &::first-letter {
    text-transform: uppercase;
  }

  strong {
    font-weight: bold;
  }
}

Simple parrafo de texto usado para información de mensajes y legales.

Examples

html

<p class="c-simple-message">
  Por el presupuesto ingresado en <a class="c-action-link">Chile</a> <img class="c-simple-message__image" src="https://cdn.chattigo.com/assets/img/flags/CL@1x.svg" />
  podrás enviar <b>15.000</b> mensajes
</p>

html legal version

<p class="c-simple-message c-simple-message--legal">
  (*) Al confirmar tú compra aceptas las condiciones del presupuesto ingresado y la actualización de tus datos de facturación.
</p>

.c-chart

scss

.c-chart {
  @include element('bars') {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 160px;
    margin-top: 8px;
  }

  @include element('bar-item') {
    display: flex;
    position: relative;

    &:hover,
    &:focus {
      cursor: pointer;

      .c-chart {
        @include element('tooltip') {
          display: block;
        }
      }
    }
  }

  @include element('bar') {
    align-self: flex-end;
    background-color: use-color('social', 'messenger');
    margin: 0 auto;
    width: 84px;

    @include modifier('second') {
      opacity: 0.6;
    }
    
    @include modifier('third') {
      opacity: 0.4;
    }
  }

  @include element('tooltip') {
    @include use-font('caption');
    background-color: use-color('grey', 'light-iii');
    border-radius: 4px;
    box-shadow: $box-shadow-card-lvl-2;
    display: none;
    min-width: 170px;
    opacity: 1;
    padding: 12px 8px;
    position: absolute;
    top: 0;
    width: fit-content;
    z-index: use-layer('modal');
    // z-index: 1000;

    @include modifier('last') {
      right: 0;
    }
  }

  @include element('labels') {
    border-top: solid 1px use-color('grey', 'light-i');
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  @include element('label-item') {
    @include use-font('caption', 'bold');
    color: use-color('grey');
    margin: 8px auto;
    max-width: 84px;
    text-align: center;
  }
  
  @include element('label') {
    @include use-font('caption', 'bold');
    color: use-color('grey', 'light');
    display: inline-block;
    width: 100%;
  }
}

En este componente consta de un bloque (.c-chart__bars) hecho para contener 3 items, cada item(.c-chart__bar-item) contiene la barra del gráfico(.c-chart__bar) junto a su tooltip(.c-chart__tooltip).

El alto de la barra tiene que ser especificado a traves de inline-style, en porcentaje, en el elemento c-chart__bar:

<span class="c-chart__bar" style="height: 25%;"></span>

Example

html

<div class="c-chart__bars">
  <div class="c-chart__bar-item">
    <span class="c-chart__bar" style="height: 25%;"></span>
    <div class="c-chart__tooltip">
      <b>Chile</b> (5.000 / US$150.000) <br />
      <b>Argentina</b> (2.000 / US$110.000) <br />
      <b>Venezuela</b> (1.000 / US$60.000) <br />
    </div>
  </div>

  <div class="c-chart__bar-item">
    <span class="c-chart__bar c-chart__bar--second" style="height: 100%;"></span>
    <div class="c-chart__tooltip">
      <b>Chile</b> (5.000 / US$150.000) <br />
      <b>Venezuela</b> (1.000 / US$60.000) <br />
      <b>Argentina</b> (2.000 / US$110.000) <br />
    </div>
  </div>
  
  <div class="c-chart__bar-item">
    <span class="c-chart__bar c-chart__bar--third" style="height: 75%;"></span>
    <div class="c-chart__tooltip c-chart__tooltip--last">
      <b>Venezuela</b> (1.000 / US$60.000) <br />
      <b>Argentina</b> (2.000 / US$110.000) <br />
      <b>Chile</b> (5.000 / US$150.000) <br />
    </div>
  </div>
</div>

<div class="c-chart__labels">
  <div class="c-chart__label-item">
    <span class="c-chart__label">NOV</span>
    2.000
  </div>
  <div class="c-chart__label-item">
    <span class="c-chart__label">DIC</span>
    8.000
  </div>
  <div class="c-chart__label-item">
    <span class="c-chart__label">ENE</span>
    6.000
  </div>
</div>

.c-collapsible

scss

.c-collapsible {
  @include element('content') {
    background-color: use-color('base', 'white');
    background-image: linear-gradient(151deg, hsl(0, 0%, 94%) 0%, hsl(0, 0%, 100%) 55%);
    box-shadow: $box-shadow-card-lvl-1;
    height: 0;
    overflow-y: hidden;
  }

  @include element('form') {
    padding: 24px 16px;

    @include media-breakpoint-up('tablet') {
      padding: 28px 32px;
    }

    @include modifier('two-inputs') {
      display: grid;
      grid-gap: 12px;
      grid-template-columns: 1fr;
  
      @include media-breakpoint-up('tablet') {
        grid-template-columns: 1fr 1fr;
      }
    }

    .c-button {
      margin-top: 28px;
      width: fit-content;
    }

    hr {
      border: 0;
      border-top: solid 1px use-color('grey', 'light');
      margin: 8px 0 20px;
    }
  }


  @include element('action-container') {
    margin: 20px 8px;
    width: 97%;

    @include modifier('back-next') {
      display: grid;
      grid-gap: 40px;
      grid-template-columns: repeat(2, 1fr);
      margin: 40px 4px 20px 0;
      width: 100%;
      
      .c-button {
        margin: 0;
      }
    }
  }

  @include element('header') {
    align-items: center;
    background-color: use-color('base', 'white');
    box-shadow: $box-shadow-card-lvl-1;
    box-sizing: border-box;
    color: use-color('base', 'black');
    cursor: pointer;
    display: flex;
    margin: 0;
    padding: 4px 0;
    // width: 100%;

    &-data {
      @include use-font('body', 'regular');
      
      &::first-letter() {
        text-transform: uppercase;
      }
    }

    &-hint {
      @include use-font('caption');
      color: use-color('base', 'black');
      margin: -4px 0;
      padding: 0 0 8px;
    }
  }

  @include element('icon-container') {
    margin: 0 16px;

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color('grey', 'light-alt');
      font-size: 17px;
    }
  }

  @include element('checkbox') {
    display: none;

    &:checked {
      // show content
      ~ .c-collapsible {
        @include element('content') {
          height: auto;
          overflow-y: auto;
        }
      }
    }
  }

  // // override radio behavior
  // .c-radio {
  //   @include element('info-message') {
  //     color: use-color('base', 'black');
  //     margin: -4px 0;
  //     padding: 0 0 8px;
  //   }

  //   + label {
  //     background-color: use-color('base', 'white');
  //     box-shadow: $box-shadow-card-lvl-1;
  //     box-sizing: border-box;
  //     color: use-color('base', 'black');
  //     margin: 0;
  //     padding: 4px 0 4px 48px;
  //     width: 100%;
      
  //     &::before {
  //       display: none;
  //       left: 12px;
  //     }
  
  //     &::after {
  //       display: none;
  //       left: 14px;
  //     }
  //   }

  //   &:checked {
  //     // show content
  //     ~ .c-collapsible {
  //       @include element('content') {
  //         height: auto;
  //         overflow-y: auto;
  //       }
  //     }
  //   }
  // }
}

Este componente fue creado para almacenar las distintas opciones de formulario a la hora de ingresar los datos de facturación.

El header del componente es el label de un input type="checkbox", dependiendo si esta seleccionado o no se muestra el contenido albergado en .c-collapsible__content.

Example

html

<div class="u-example-padding" style="min-height: 300px;"> <!-- this div is just for doc example -->

<div class="c-collapsible">
  <input name="option" type="checkbox" class="c-collapsible__checkbox" id="first">
  <label for="first" class="c-collapsible__header">
    <div class="c-collapsible__icon-container">
      <span class="icon-arrow-down"></span>
    </div>
  
    <div class="c-collapsible__header-data">
      facturación nacional
      
      <p class="c-collapsible__header-hint">
        (*)Solo clientes chattigo Chile
      </p>
    </div>
  </label>

  <div class="c-collapsible__content">
    <form class="c-collapsible__form">
      <label class="c-input__label">Confirma tus datos:</label>
      <input type="text" class="c-input" placeholder="Razón social (*)" />
      <input type="text" class="c-input" placeholder="RUT (*)" />
      <input type="text" class="c-input" placeholder="Giro (*)" />
      <input type="text" class="c-input" placeholder="Dirección (*)" />
      
      <div class="c-collapsible__form--two-inputs">
        <input type="text" class="c-input" placeholder="Comuna (*)" />
        <input type="text" class="c-input" placeholder="Ciudad (*)" />
      </div>
      
      <hr />
      
      <input type="text" class="c-input" placeholder="Nombre encargado (recepción factura)" />
      <input type="text" class="c-input" placeholder="Email (receptor factura)" />
      <input type="text" class="c-input" placeholder="Teléfono contacto" />

      <button class="c-button" disabled>
        guardar mis datos
      </button>
    </form>
  </div>
</div>

<div class="c-collapsible">
  <input name="option" type="checkbox" class="c-collapsible__checkbox" id="second">
  <label class="c-collapsible__header" for="second">
    <div class="c-collapsible__icon-container">
      <span class="icon-arrow-down"></span>
    </div>
  
    <div class="c-collapsible__header-data">
      facturación internacional
      
      <p class="c-collapsible__header-hint">
        (*)Solo clientes chattigo fuera de Chile
      </p>
    </div>
  </label>

  <div class="c-collapsible__content">
    <form class="c-collapsible__form">
      <label class="c-input__label">Confirma tus datos:</label>
      <input type="text" class="c-input" placeholder="Razón social (*)" />
      <input type="text" class="c-input" placeholder="Número identificador (*)" />
      <input type="text" class="c-input" placeholder="Giro (*)" />
      <input type="text" class="c-input" placeholder="Dirección (*)" />
      
      <div class="c-collapsible__form--two-inputs">
        <input type="text" class="c-input" placeholder="Ciudad (*)" />
        <input type="text" class="c-input" placeholder="País (*)" />
      </div>
      
      <hr />
      
      <input type="text" class="c-input" placeholder="Nombre encargado (recepción factura)" />
      <input type="text" class="c-input" placeholder="Email (receptor factura)" />
      <input type="text" class="c-input" placeholder="Teléfono contacto" />

      <button class="c-button">
        guardar mis datos
      </button>
    </form>
  </div>
</div>

</div>

.c-purchase-resumen

scss

.c-purchase-resumen {
  @include use-font('body');
  background-color: use-color('messages', 'sended');
  // TODO: pass to var
  background-image: linear-gradient(151deg, #f2eddd 0%, #fffdf5 55%);
  border-radius: 8px;
  box-shadow: $box-shadow-card-lvl-1;
  padding: 16px 12px;

  @include media-breakpoint-up('tablet') {
    padding: 28px 32px;
  }

  @include element('title') {
    @include use-font('body', 'bold');  
    border-bottom: solid 1px use-color('grey');
    margin: 0 0 12px;
    padding-bottom: 4px;

    &::first-letter() {
      text-transform: uppercase;
    }
  }

  @include element('item') {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    @include modifier('budget') {
      @include use-font('subheading', 'semibold');
      align-self: center;
    }

    .c-button {
      padding: 8px;
      width: 84px;
    }
  }

  @include element('billing-type') {
    display: flex;
    flex-direction: column;

    @include modifier('label') {
      @include use-font('body', 'bold');
      color: use-color('grey');

      &::first-letter {
        text-transform: capitalize;
      }
    }
    
    @include modifier('hint') {
      @include use-font('caption', 'bold');
      color: use-color('grey');
    }
  }

  @include element('success-title') {
    @include use-font('subheading', 'bold');
    color: use-color('base', 'black');
    margin: 12px 0 0;
    padding: 0;
  }
  
  @include element('success-hint') {
    @include use-font('body-alt', 'light');
    margin: 0 0 12px;
    padding: 0;
  }

  @include element('success-message') {
    @include use-font('body', 'light');
    color: use-color('base', 'dark');
    
    strong {
      @include use-font('subheading', 'semibold');
      color: use-color('base', 'black');
    }

    &::first-letter {
      text-transform: uppercase;
    }
  }

  @include modifier('success') {
    background-color: use-color('base', 'true-white');
    background-image: none;
    box-shadow: none;
    margin-bottom: 24px;
    padding: 0;
  }

  .c-list {
    li {
      overflow: hidden;
      padding-bottom: 4px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

En este componente se despliega el resumen de la compra de mensajes Outbound.

También consta con una clase modificadora para el resumen del exito de la compra.

Examples

html

<div class="u-example-padding"> <!-- this div is just for doc example -->

<div class="c-purchase-resumen">          
  <h3 class="c-purchase-resumen__title">
    presupuesto ingresado
  </h3>

  <div class="c-purchase-resumen__item">
    <span class="c-purchase-resumen__item--budget">
      US$ 30.000
    </span>

    <a class="c-button c-button--secondary">
      Editar
    </a>
  </div>

  <h3 class="c-purchase-resumen__title">  
    datos de facturación
  </h3>

  <div class="c-purchase-resumen__item">
    <div class="c-purchase-resumen__billing-type">
      <span class="c-purchase-resumen__billing-type--label">
        Facturación nacional
      </span>
      <small class="c-purchase-resumen__billing-type--hint">
        (*)Solo clientes chattigo Chile
      </small>
    </div>

    <a class="c-button c-button--secondary">
      Editar
    </a>
  </div>

  <ul class="c-list">
    <li>Razón social : Proyecta millenium S.A. - Farmanexus</li>
    <li>RUT : 76.768.946-2</li>
    <li>Giro : Prestación de ss de voz, datos y video a</li>
    <li>Dirección : Padre Mariano 82, Depto 401</li>
    <li>Comuna : Providencia</li>
    <li>Ciudad : Santiago</li>
  </ul>
</div>

</div>

html success

<div class="u-example-padding"> <!-- this div is just for doc example -->
 
 <div class="c-purchase-resumen c-purchase-resumen--success">
   <img src="https://cdn.chattigo.com/assets/img/heavy-check.svg" />
 
   <h3 class="c-purchase-resumen__success-title">
     ¡La compra se ha realizado con éxito!
   </h3>
   <span class="c-purchase-resumen__success-hint">
     (1) Esta compra se cobrará en tu próxima factura de Chattigo
   </span>
 
   <p class="c-simple-message">
     Importe facturado: <strong>US$ 30.000</strong>
   </p>
 
   <p class="c-purchase-resumen__success-message">
     Por el valor de tu compra en en <a class="c-action-link">Chile</a> <img class="c-simple-message__image" src="https://cdn.chattigo.com/assets/img/flags/CL@1x.svg" />
     podrás enviar <b>15.000</b> mensajes
   </p>
 </div>
 
 
 <p class="c-simple-message c-simple-message--legal">
   (1) La facturación está sujera a las condiciones comerciales y leyes de cada país.
 </p>
 
 <div class="c-collapsible__action-container">
   <a class="c-button c-button--secondary">
     Volver a comprar
   </a>
 </div>
 
 </div>