@textback/notification-widget 2.0.1-110396 → 2.0.1-13997

package/src/widget/components/tb-nw-wahunter/styles.scss

@@ -1,471 +0,0 @@
-$base-class-name: tb-nw-wahunter;
-$font-family: 'Montserrat',
-'Open Sans',
-'Droid Sans',
-Arial,
-sans-serif;
-
-$color-green: #25D366;
-$color-light-gray: #F2F2F2;
-$color-dark-gray: darken($color-light-gray, 5%);
-
-tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inner tb-nw-wahunter {
-  font-size: 12px;
-  font-family: $font-family;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  // TODO: Move reset to level of entire widget. Now I’m not sure that this will not break anything in normal notif widget
-  a,
-  label,
-  button,
-  input {
-    margin: 0;
-    padding: 0;
-    border: none;
-    box-shadow: none;
-    outline: none;
-    font-family: inherit;
-    font-size: inherit;
-    color: inherit;
-    background: transparent;
-  }
-
-  button,
-  label {
-    cursor: pointer;
-  }
-}
-
-
-tb-notification-widget #tb-notification-widget-inner.tb-notification-widget-inner .tb-nw-wahunter {
-
-  /**** All modes ****/
-  &__headline {
-    font-weight: 600;
-    line-height: 1.3;
-  }
-
-  &__text-content {
-    margin-bottom: 1.4em;
-  }
-
-
-
-  /**** Popup mode only ****/
-  &__top-img {
-    padding: 20% 0;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    border-radius: 4px 4px 0px 0px;
-  }
-
-  &__img {
-    display: none;
-    align-items: center;
-    width: 280px;
-    flex-shrink: 0;
-
-    img {
-      width: 100%;
-    }
-  }
-
-  &__main-content {
-    padding: 1.4em 10%;
-    padding-bottom: 4em;
-  }
-
-  &__description {
-    font-size: 1.3em;
-    line-height: 1.5;
-  }
-
-  &_without-image {
-
-    .#{$base-class-name}__top-img,
-    .#{$base-class-name}__img {
-      display: none;
-    }
-
-    .#{$base-class-name}__main-content {
-      padding-top: 3em;
-    }
-  }
-
-  &_mode_popup {
-    .#{$base-class-name}__headline {
-      font-size: 1.9em;
-      margin-bottom: 0.4em;
-    }
-  }
-
-
-
-  /**** Inline mode only ****/
-  &_mode_inline {
-    display: flex;
-
-    .#{$base-class-name}__submit-form {
-      margin: 0;
-    }
-
-    #tb-notification-brand-badge {
-      display: none;
-      font-size: 9px;
-      margin-top: 1.2em;
-    }
-  }
-
-  &_inline-mode-align_left {
-    justify-content: flex-start;
-  }
-
-  &_inline-mode-align_right {
-    justify-content: flex-end;
-  }
-
-  &_inline-mode-align_center {
-    justify-content: center;
-  }
-
-
-
-  /**** Corner-popup mode only ****/
-  &_mode_corner-popup {
-    .#{$base-class-name}__headline {
-      font-size: 1.7em;
-      margin-bottom: 0.4em;
-    }
-  }
-
-
-
-  /**** Submit-form ****/
-  &__submit-form {
-    padding: 0;
-    width: 100%;
-    max-width: 100%;
-    margin: auto;
-  }
-
-  &__phone-input,
-  &__submit-button {
-    height: 44px;
-    width: 100%;
-    border-radius: 22px;
-    padding: 0 40px !important;
-  }
-
-  &__phone-input {
-    font-size: 14px;
-    margin-bottom: 12px;
-    background: #F2F2F2;
-    border: 1px solid $color-dark-gray;
-    letter-spacing: 1px;
-    color: #333;
-
-    &:invalid {
-      letter-spacing: 0px;
-    }
-  }
-
-  &__submit-button {
-    position: relative;
-    background: $color-green;
-    color: #fff;
-    font-size: 9px;
-    font-weight: bold;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-    transition: background ease 0.25s;
-  }
-
-  &__submit-button-icon {
-    position: absolute;
-    right: 13px;
-    top: 0;
-    height: 100%;
-    width: 20px;
-
-    svg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: auto;
-    }
-  }
-
-  &__submit-form-footer {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 5px;
-    font-size: 12px;
-    margin-top: 10px;
-  }
-
-  &__agreement {
-    display: flex;
-    align-items: center;
-  }
-
-  &__agreement input[type="checkbox"] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -o-appearance: none;
-    appearance: none;
-    position: relative;
-    height: 14px;
-    width: 14px;
-    border: 1px solid rgb(207, 207, 207);
-    border-radius: 4px;
-    outline: none;
-    cursor: pointer;
-
-    &:checked {
-      background: $color-green;
-      border: none;
-    }
-
-    &:checked::before {
-      content: '\2714';
-      display: block;
-      text-align: center;
-      color: #fff;
-      position: absolute;
-      left: 3.5px;
-      top: 2px;
-      font-size: 9px;
-    }
-  }
-
-  &__agreement-text {
-    margin-left: 5px;
-  }
-
-  &__agreement-wa-icon {
-    display: inline-block;
-    position: relative;
-    width: 18px;
-    height: 14px;
-    vertical-align: middle;
-
-    svg {
-      position: absolute;
-      top: -7px;
-      left: -3px;
-      width: 25px;
-    }
-  }
-
-  &__state-report {
-    display: none;
-    flex-direction: column;
-    align-items: center;
-    line-height: 1.5;
-  }
-
-  &__state-report-emoji {
-    font-size: 40px;
-    margin-bottom: 10px;
-  }
-
-  &__state-report-message-container {
-    text-align: center;
-  }
-
-  &__state-report-message {
-    font-size: 18px;
-    font-weight: bold;
-  }
-
-  &__try-again-button {
-    display: none;
-    padding: 0;
-    margin: 0;
-    margin-top: 20px;
-    font-size: 16px;
-  }
-
-  &__try-again-button {
-    font-weight: bold;
-    text-decoration: underline;
-  }
-
-
-
-  /**** Submit-form state management ****/
-  &__submit-form:not([data-state="initial"]) {
-    .#{$base-class-name}__submit-form-controls {
-      display: none;
-    }
-
-    .#{$base-class-name}__state-report {
-      display: flex;
-    }
-  }
-
-  &__submit-form[data-state="success"] {
-    #tb-notification-brand-badge {
-      display: inline-flex;
-    }
-  }
-
-  &__submit-form[data-state="error"],
-  &__submit-form[data-state="notFound"] {
-
-    .#{$base-class-name}__state-report-message {
-      font-weight: normal;
-    }
-
-    .#{$base-class-name}__try-again-button {
-      display: inline-block;
-    }
-  }
-
-
-
-  @media only screen and (min-device-width: 481px) {
-    font-size: 13px;
-
-    &:not(.tb-nw-wahunter_mode_corner-popup) {
-      .#{$base-class-name}__phone-input-container {
-        padding: 5px;
-        background: #F2F2F2;
-        border-radius: 22px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .#{$base-class-name}__phone-input,
-      .#{$base-class-name}__submit-button {
-        height: auto;
-        width: auto;
-        flex-grow: 1;
-      }
-
-      .#{$base-class-name}__phone-input {
-        background: transparent;
-        border-radius: 0;
-        padding-left: 15px !important;
-        padding-right: 10px !important;
-        min-width: 150px;
-        margin: 0;
-        border: none;
-      }
-
-      .#{$base-class-name}__submit-button {
-        padding-top: 15px !important;
-        padding-bottom: 15px !important;
-        min-width: 49%;
-      }
-
-      .#{$base-class-name}__submit-form-footer {
-        margin-top: 6px;
-      }
-    }
-
-    &_mode_popup,
-    &_mode_inline {
-      .#{$base-class-name}__submit-form {
-        width: max-content;
-      }
-    }
-
-    &_mode_popup {
-      .#{$base-class-name}__submit-form {
-        min-width: 370px;
-      }
-    }
-
-    &_mode_inline {
-      .#{$base-class-name}__submit-form {
-        min-width: 420px;
-      }
-    }
-  }
-
-
-
-  @media only screen and (min-device-width: 768px) {
-    font-size: 14px;
-
-    &_image-align_right,
-    &_image-align_left {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      text-align: left;
-      padding: 7em 2.5em;
-
-      .#{$base-class-name}__submit-form {
-        min-width: unset;
-        width: 100%;
-      }
-
-      .#{$base-class-name}__top-img {
-        display: none;
-      }
-
-      .#{$base-class-name}__img {
-        display: flex;
-      }
-
-      .#{$base-class-name}__main-content {
-        padding: 0;
-      }
-
-      .#{$base-class-name}__state-report {
-        flex-direction: row;
-      }
-
-      .#{$base-class-name}__state-report-message-container {
-        text-align: left;
-      }
-
-      .#{$base-class-name}__state-report-emoji {
-        margin-bottom: 0;
-        margin-right: 10px;
-      }
-
-      .#{$base-class-name}__submit-form[data-state="notFound"],
-      .#{$base-class-name}__submit-form[data-state="error"] {
-        .#{$base-class-name}__state-report {
-          align-items: flex-start;
-        }
-      }
-    }
-
-    &_image-align_top,
-    &_without-image {
-      .#{$base-class-name}__submit-form {
-        min-width: 420px;
-      }
-    }
-
-    &_image-align_top {
-      .#{$base-class-name}__main-content {
-        padding-bottom: 6em;
-      }
-    }
-
-    &_image-align_right {
-      .#{$base-class-name}__img {
-        margin-left: 3em;
-        order: 1;
-      }
-    }
-
-    &_image-align_left {
-      .#{$base-class-name}__img {
-        margin-right: 3em;
-      }
-    }
-  }
-}

package/src/widget/icons/icon_chat_window.svg

@@ -1 +0,0 @@
-<svg class="tb-icon-chat-window" style="fill:#ffffff;" width="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.6 17.5"><desc>Write</desc><path d="M3.7 17.5v-4.8H2c-1.1 0-2-.9-2-2V2C0 .9.9 0 2 0h14.6c1.1 0 2 .9 2 2v8.8c0 1.1-.9 2-2 2H9l-5.3 4.7zM2 1c-.6 0-1 .4-1 1v8.8c0 .5.4 1 1 1h2.8v3.5l3.8-3.5h8c.5 0 1-.4 1-1V2c0-.5-.4-1-1-1H2z"></path></svg>

package/src/widget/icons/icon_close.svg

@@ -1 +0,0 @@
-<svg class="tb-icon-close" width="16px" height="16px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Close</desc> <g stroke="none" stroke-width="1" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg>

package/src/widget/icons/icon_whatsapp_hollow.svg

@@ -1,128 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   class="tb-icon-whatsapp-hollow"
-   xmlns:figma="http://www.figma.com/figma/ns"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="52"
-   height="52"
-   viewBox="0 0 52 52"
-   version="2.0"
-   id="svg3780"
-   sodipodi:docname="icon_whatsapp_my_fill_empty.svg"
-   inkscape:version="0.92.1 r15371">
-  <metadata
-     id="metadata3784">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Group.svg</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     id="namedview3782"
-     showgrid="true"
-     showguides="false"
-     inkscape:zoom="11.313709"
-     inkscape:cx="5.5565263"
-     inkscape:cy="32.501721"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g59">
-    <inkscape:grid
-       type="xygrid"
-       id="grid3786" />
-  </sodipodi:namedview>
-  <title
-     id="title3755">Group.svg</title>
-  <desc
-     id="desc3757">Created using Figma 0.90</desc>
-  <g
-     id="Canvas"
-     transform="matrix(1.590909,0,0,1.590909,151.68181,-4.2272709)"
-     figma:type="canvas">
-    <g
-       id="Group"
-       style="mix-blend-mode:normal"
-       figma:type="frame"
-       transform="translate(29.734454,-2.8865086)">
-      <g
-         id="g59">
-        <g
-           id="g4565">
-          <g
-             id="Vector"
-             style="mix-blend-mode:normal;fill:#ffffff;fill-opacity:1"
-             figma:type="vector"
-             transform="translate(-30.034444,1.6579773)">
-            <use
-               xlink:href="#path1_fill"
-               transform="translate(-90,8)"
-               style="mix-blend-mode:normal;fill:#ffffff;fill-opacity:1"
-               id="use3762"
-               x="0"
-               y="0"
-               width="100%"
-               height="100%" />
-          </g>
-          <g
-             id="g3770"
-             style="mix-blend-mode:normal;fill:#ffffff;fill-opacity:1"
-             figma:type="vector"
-             transform="translate(-30.034444,1.6579773)">
-            <use
-               xlink:href="#path3_fill"
-               transform="translate(-84.534,13.8663)"
-               style="mix-blend-mode:normal;fill:#ffffff;fill-opacity:1"
-               id="use3768"
-               x="0"
-               y="0"
-               width="100%"
-               height="100%" />
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-  <defs
-     id="defs3778">
-    <path
-       id="path0_fill"
-       d="m 20.2189,10.0642 c 0,5.5583 -4.5261,10.0642 -10.1094,10.0642 -1.91642,0 -5.23529,-1.4529 -5.23529,-1.4529 L 0.242388,20.1284 1.77789,15.133 C 1.77789,15.133 0,12.1983 0,10.0642 0,4.5059 4.52616,0 10.1095,0 15.6928,0 20.2189,4.5059 20.2189,10.0642 Z"
-       inkscape:connector-curvature="0" />
-    <path
-       id="path1_fill"
-       d="M -6.06014e-8,22 1.55433,16.3511 C 0.595736,14.6977 0.0917074,12.8222 0.0924295,10.901 0.0945958,4.89013 5.00852,-1.26145e-7 11.0464,-1.26145e-7 13.9767,0.00107818 16.7268,1.13654 18.7949,3.19682 20.863,5.25747 22.0014,7.99673 22,10.9096 21.9975,16.9201 17.0832,21.8109 11.046,21.8109 H 11.0413 C 9.20792,21.8099 7.40699,21.3527 5.8068,20.4839 Z M 5.8068,19.4103 c 1.39728,0.8256 3.60547,1.4136 5.2392,1.4144 5.0179,0 9.952,-4.4736 9.954,-9.9237 C 21.001,8.25482 19.719,5.71235 18,4 16.281,2.28765 13.4734,1.00108 11.0413,1 6.0191,1 1,5.5 1,10.901 0.999639,12.613 1.5887,14.5572 2.5,16 l -1.23032,4.8247 z"
-       inkscape:connector-curvature="0" />
-    <path
-       id="path2_fill"
-       d="M 20,10 C 20,15.5228 15.5228,20 10,20 4.47715,20 0,15.5228 0,10 0,4.47715 4.47715,0 10,0 15.5228,0 20,4.47715 20,10 Z"
-       inkscape:connector-curvature="0" />
-    <path
-       id="path3_fill"
-       d="M 2.82812,0.477351 C 2.62341,0.0237427 2.40714,0.0143968 2.21253,0.00648926 2.05294,-6.99463e-4 1.87025,2.0221e-5 1.68792,2.0221e-5 1.50559,2.0221e-5 1.2088,0.0679529 0.958232,0.340765 0.70694,0.613217 -2.42406e-7,1.27278 -2.42406e-7,2.61312 -2.42406e-7,3.95382 0.980979,5.24922 1.11782,5.4311 1.25466,5.61297 3.01118,8.4518 5.79308,9.5434 8.10526,10.4513 8.57571,10.2709 9.07758,10.2253 9.57944,10.18 10.6969,9.56641 10.9251,8.92985 11.1529,8.29365 11.1529,7.74838 11.0847,7.63444 11.0161,7.52086 10.8334,7.45257 10.5601,7.31598 10.2864,7.17975 8.94074,6.52091 8.68981,6.42961 8.43888,6.33867 8.25654,6.29374 8.07349,6.56656 7.89152,6.83901 7.36691,7.45257 7.20733,7.63444 7.04774,7.81632 6.88816,7.8386 6.61448,7.70237 6.34044,7.56579 5.45911,7.2786 4.41314,6.35018 3.59969,5.62807 3.05017,4.73595 2.89058,4.46314 2.731,4.19068 2.87362,4.04332 3.01081,3.90745 3.13357,3.78524 3.28449,3.58899 3.42133,3.43012 3.55781,3.27125 3.6033,3.15731 3.69465,2.97543 3.78599,2.79356 3.74014,2.63469 3.6719,2.4981 3.60366,2.36367 3.07183,1.01615 2.82812,0.477351 Z"
-       inkscape:connector-curvature="0"
-       style="fill-rule:evenodd" />
-  </defs>
-</svg>