@d19n/webchat 1.0.4 → 1.0.6

package/dist/src/TwilioChat/index.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as e,__awaiter as n,__assign as t,__generator as o,__spreadArray as r}from"../../node_modules/tslib/tslib.es6.js";import a,{useContext as i,useRef as l,useState as c,useEffect as s}from"react";import{io as d}from"../../node_modules/socket.io-client/build/esm/index.js";import u from"../../_virtual/browser.js";import m from"../../node_modules/styled-components/dist/styled-components.browser.esm.js";import p from"../context/GlobalContext.js";import g from"../../node_modules/linkify-html/dist/linkify-html.js";import f from"./Chat.js";import h from"../../_virtual/moment.js";import{toastrMsg as x}from"../utils/alert.js";import v from"../NotificationBar/index.js";import{isStagingOrDevelopment as b}from"../utils/helperFn.js";import{d as w}from"../../_virtual/index.js";import y,{setConfig as I}from"../api/api.js";import S from"axios";import{useDropzone as E}from"../../node_modules/react-dropzone/dist/es/index.js";import C from"../../node_modules/uuid/dist/esm-browser/v4.js";import k from"../../node_modules/react-bootstrap/esm/Row.js";var T,N,_,A,O,M,U,D,R,L=new URL("./assets/images/svg/favicon.svg",import.meta.url),j=new URL("./assets/images/svg/chat.svg",import.meta.url),F=new URL("./assets/images/png/ico-close.png",import.meta.url),z=new URL("./assets/images/gif/loader-transparent.gif",import.meta.url),W=new URL("./assets/images/svg/youfibre-upload.svg",import.meta.url),B=new URL("./assets/images/svg/close.svg",import.meta.url),G=new URL("./assets/audio/notification.wav",import.meta.url),P=m.div(T||(T=e(["\n  width: 100%;\n  max-width: 700px;\n  height: 100%;\n  position: relative;\n  margin: 0px auto;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  \n  &.direction-column-reverse { flex-direction: column-reverse; }\n  &.content-end { justify-content: end; }\n\n"],["\n  width: 100%;\n  max-width: 700px;\n  height: 100%;\n  position: relative;\n  margin: 0px auto;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  \n  &.direction-column-reverse { flex-direction: column-reverse; }\n  &.content-end { justify-content: end; }\n\n"]))),Y=m(P)(N||(N=e(["\n  overflow-y: auto;\n"],["\n  overflow-y: auto;\n"]))),V=m.div(_||(_=e(["\n  position: fixed;\n  bottom: 40px;\n  right: 40px;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: 15px;\n"],["\n  position: fixed;\n  bottom: 40px;\n  right: 40px;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: 15px;\n"]))),H=m.div(A||(A=e(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #08DE9E;\n  width: 50px;\n  height: 50px;\n  border-radius: 100px;\n  cursor: pointer;\n  -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -webkit-user-select: none;\n  user-select: none;  \n  img {\n    position: absolute;\n    -moz-transition: all 0.3s ease;\n    transition: all 0.3s ease;\n\t\t&.icon-hover {\n      width: 15px;\n      height: 15px;\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n\t\t&.icon-default {\n      width: 20px;\n      height: 20px;\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n  }\n  &:hover {\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  }\n  &.open {\n\t\t.icon-hover {\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t.icon-default {\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n  }\n  &.fullscreen {\n    display: none;\n  }\n\n  .unread {\n    background-color: red;\n    padding: 3px;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    aspect-ratio: 1 / 1;\n    border-radius: 200px;\n    color: #ffffff;\n    position: absolute;\n    top: -4px;\n    right: -2px;\n    font-size: 0.7rem !important;\n    line-height: 0.5rem !important;\n    flex-direction: row;\n    align-content: center;\n    justify-content: center;\n    align-items: center;\n    -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    animation: pulseAnimation 1.5s infinite;\n    @keyframes pulseAnimation {\n      0% {\n        transform: scale(1);\n      }\n      50% {\n        transform: scale(1.1);\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  }\n"],["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #08DE9E;\n  width: 50px;\n  height: 50px;\n  border-radius: 100px;\n  cursor: pointer;\n  -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -webkit-user-select: none;\n  user-select: none;  \n  img {\n    position: absolute;\n    -moz-transition: all 0.3s ease;\n    transition: all 0.3s ease;\n\t\t&.icon-hover {\n      width: 15px;\n      height: 15px;\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n\t\t&.icon-default {\n      width: 20px;\n      height: 20px;\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n  }\n  &:hover {\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  }\n  &.open {\n\t\t.icon-hover {\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t.icon-default {\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n  }\n  &.fullscreen {\n    display: none;\n  }\n\n  .unread {\n    background-color: red;\n    padding: 3px;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    aspect-ratio: 1 / 1;\n    border-radius: 200px;\n    color: #ffffff;\n    position: absolute;\n    top: -4px;\n    right: -2px;\n    font-size: 0.7rem !important;\n    line-height: 0.5rem !important;\n    flex-direction: row;\n    align-content: center;\n    justify-content: center;\n    align-items: center;\n    -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    animation: pulseAnimation 1.5s infinite;\n    @keyframes pulseAnimation {\n      0% {\n        transform: scale(1);\n      }\n      50% {\n        transform: scale(1.1);\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  }\n"]))),q=m.div(O||(O=e(["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  width: 350px;\n  height: 550px;\n  border-radius: 5px;\n  -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  max-width: 0px;\n  max-height: 0px;\n  overflow: hidden;\n  transition: max-height 0.5s ease-in-out;\n  &.show {\n    max-width: 350px;\n    max-height: 540px;\n  }\n  .cover {\n    background: rgba(255, 255, 255, 0.2);\n    position: absolute;\n    z-index: 92;\n    padding: 1rem;\n    width: 100%;\n    height: calc(100% - 65px);\n    border-radius: 5px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    -webkit-user-select: none;\n    user-select: none;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    &.closed {\n      background: rgba(255, 255, 255, 0.9);\n      button { margin-top: 2rem; }\n    }\n    &.upload {\n      background: rgba(9, 222, 158, 0.9);\n      button { margin-top: 2rem; }\n    }\n    animation: showCover .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n      \n    @keyframes showCover {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n  }\n  .files {\n    margin: 0.5rem;\n    border-radius: 5px;\n    background-color: #c1f7e7;\n    padding: 0rem;\n    overlay: none;\n    display: flex;  \n    flex-direction: column;\n    justify-content: center;\n    gap: 0rem;\n    .file {\n      display: flex;\n      flex-direction: row;\n      border-radius: 3px;\n      justify-content: space-between;\n      align-items: center;\n      margin: 0.2rem;\n      padding: 0.2rem 0.5rem;\n      gap: 1rem;\n      &:hover {\n        background-color: #ffffff;\n      }\n      .fileName {\n        font-size: 0.7rem !important;\n        line-height: 0.8rem;\n        word-break: keep-all;\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .action {\n        width: 0.8rem;\n        height: 0.8rem;\n        opacity: 0.7;\n        cursor: pointer;\n        &:hover {\n          opacity: 1;\n        }\n      }\n\n    }\n  }\n  &.fullscreen {\n    max-width: 100% !important;\n    max-height: 100% !important;\n    position: fixed;\n    left: 0px;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    // @media (max-width: 768px) {\n    //   #listOfMessages {\n    //     max-height: calc(100vh - 210px);\n    //   }\n    //   .chat-content-container {\n    //     padding-bottom: 4rem;\n    //   }\n    // }\n    .cover {\n        &.closed {\n            height: 100%;\n        }\n    }\n  }\n  @media (max-width: 576px) {\n    position: fixed;\n    z-index: 100;\n    bottom: 0px;\n    right: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    &.show {\n      max-width: 100%;\n      max-height: 100%;\n    }\n    .cover {\n      &.closed, &.upload {\n        height: 100%;\n      }\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  width: 350px;\n  height: 550px;\n  border-radius: 5px;\n  -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  max-width: 0px;\n  max-height: 0px;\n  overflow: hidden;\n  transition: max-height 0.5s ease-in-out;\n  &.show {\n    max-width: 350px;\n    max-height: 540px;\n  }\n  .cover {\n    background: rgba(255, 255, 255, 0.2);\n    position: absolute;\n    z-index: 92;\n    padding: 1rem;\n    width: 100%;\n    height: calc(100% - 65px);\n    border-radius: 5px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    -webkit-user-select: none;\n    user-select: none;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    &.closed {\n      background: rgba(255, 255, 255, 0.9);\n      button { margin-top: 2rem; }\n    }\n    &.upload {\n      background: rgba(9, 222, 158, 0.9);\n      button { margin-top: 2rem; }\n    }\n    animation: showCover .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n      \n    @keyframes showCover {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n  }\n  .files {\n    margin: 0.5rem;\n    border-radius: 5px;\n    background-color: #c1f7e7;\n    padding: 0rem;\n    overlay: none;\n    display: flex;  \n    flex-direction: column;\n    justify-content: center;\n    gap: 0rem;\n    .file {\n      display: flex;\n      flex-direction: row;\n      border-radius: 3px;\n      justify-content: space-between;\n      align-items: center;\n      margin: 0.2rem;\n      padding: 0.2rem 0.5rem;\n      gap: 1rem;\n      &:hover {\n        background-color: #ffffff;\n      }\n      .fileName {\n        font-size: 0.7rem !important;\n        line-height: 0.8rem;\n        word-break: keep-all;\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .action {\n        width: 0.8rem;\n        height: 0.8rem;\n        opacity: 0.7;\n        cursor: pointer;\n        &:hover {\n          opacity: 1;\n        }\n      }\n\n    }\n  }\n  &.fullscreen {\n    max-width: 100% !important;\n    max-height: 100% !important;\n    position: fixed;\n    left: 0px;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    // @media (max-width: 768px) {\n    //   #listOfMessages {\n    //     max-height: calc(100vh - 210px);\n    //   }\n    //   .chat-content-container {\n    //     padding-bottom: 4rem;\n    //   }\n    // }\n    .cover {\n        &.closed {\n            height: 100%;\n        }\n    }\n  }\n  @media (max-width: 576px) {\n    position: fixed;\n    z-index: 100;\n    bottom: 0px;\n    right: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    &.show {\n      max-width: 100%;\n      max-height: 100%;\n    }\n    .cover {\n      &.closed, &.upload {\n        height: 100%;\n      }\n    }\n  }\n"]))),J=m.div(M||(M=e(["\n  background-color: #08DE9E;\n  width: 100%;\n  padding: 15px;\n  color: #ffffff;\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 15px;\n  -webkit-box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  z-index: 91;\n  img {\n    width: 40px;\n    height: 40px;\n    -object-fit: fill;\n    object-fit: fill;\n    padding: 7px;\n    border-radius: 200px;\n    cursor: pointer;\n    background-color: #FFFFFF;\n    &.close {\n      display: none;\n      background-color: transparent;\n    }\n  }\n  a {\n    &:hover {\n      text-decoration: none !important;\n      cursor: pointer;\n    }\n  }\n  span {\n    padding: 0px;\n  }\n  @media (max-width: 576px) {\n    img {\n      &.close {\n        display: block;\n      }\n    }\n  }\n"],["\n  background-color: #08DE9E;\n  width: 100%;\n  padding: 15px;\n  color: #ffffff;\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 15px;\n  -webkit-box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  z-index: 91;\n  img {\n    width: 40px;\n    height: 40px;\n    -object-fit: fill;\n    object-fit: fill;\n    padding: 7px;\n    border-radius: 200px;\n    cursor: pointer;\n    background-color: #FFFFFF;\n    &.close {\n      display: none;\n      background-color: transparent;\n    }\n  }\n  a {\n    &:hover {\n      text-decoration: none !important;\n      cursor: pointer;\n    }\n  }\n  span {\n    padding: 0px;\n  }\n  @media (max-width: 576px) {\n    img {\n      &.close {\n        display: block;\n      }\n    }\n  }\n"]))),K=m.div(U||(U=e(["\n  width: 100%;\n  padding: 0;\n  color: #000000;\n  flex: 1;\n  display: flex;\n  flex-direction: column-reverse;\n  overflow-x: hidden;\n  .chat-content-container {\n    padding-bottom: 1.8rem;\n  }\n  button {\n    display: block;\n    background-color: #c1f7e7;\n    flex: 0;\n    padding: 5px;\n    border-radius: 5px;\n    color: #263238;\n    font-weight: 100;\n    font-size: 1rem;\n    line-height: 1.5rem;\n    font-weight: 100;\n    min-width: 40%;\n    border: 2px solid #08DE9E;\n    cursor: pointer;\n    &:hover {\n      background-color: #08DE9E;\n    }\n  }\n  @media (max-width: 768px) {\n    overflow-y: hidden;\n    .chat-content-container {\n      overflow-y: auto;\n      // padding-bottom: 0;\n    }\n  }\n"],["\n  width: 100%;\n  padding: 0;\n  color: #000000;\n  flex: 1;\n  display: flex;\n  flex-direction: column-reverse;\n  overflow-x: hidden;\n  .chat-content-container {\n    padding-bottom: 1.8rem;\n  }\n  button {\n    display: block;\n    background-color: #c1f7e7;\n    flex: 0;\n    padding: 5px;\n    border-radius: 5px;\n    color: #263238;\n    font-weight: 100;\n    font-size: 1rem;\n    line-height: 1.5rem;\n    font-weight: 100;\n    min-width: 40%;\n    border: 2px solid #08DE9E;\n    cursor: pointer;\n    &:hover {\n      background-color: #08DE9E;\n    }\n  }\n  @media (max-width: 768px) {\n    overflow-y: hidden;\n    .chat-content-container {\n      overflow-y: auto;\n      // padding-bottom: 0;\n    }\n  }\n"]))),Z=m.form(D||(D=e(["\n  background-color: #f4f7f9;\n  width: 100%;\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  padding: 5px;\n  .action {\n    width: 1.3rem;\n    height: 1.3rem;\n    cursor: pointer;\n    opacity: 0.7;\n    -webkit-user-select: none;\n    user-select: none;\n    &:hover {\n      opacity: 0.7;\n    }\n  }\n  input {\n    background-color: rgba(0,0,0,0);\n    border: none;\n    border-bottom: 1px solid rgba(0,0,0,0);\n    outline: 0px;\n    padding: 0px;\n    margin-left: 15px;\n    font-size: 0.9rem;\n    font-weight: 100;\n    flex: 1;\n    &.invalid {\n      border-bottom: 1px solid red;\n    }\n  }\n  button {\n    min-width: 90px;\n    background-color: #09de9e;\n    flex: 0;\n    font-size: 1rem;\n    &:hover {\n      background-color: #08c98f;\n    }\n    &:disabled, &:disabled:hover {\n      background-color: rgba(0,0,0,0.05);\n      color: #aabbcc !important;\n    }\n  }\n  @media (max-width: 576px) {\n    padding: 15px;\n  }\n  // @media (max-width: 768px) {\n  //   &.form-fullscreen {\n  //     position: fixed;\n  //     bottom: 0;\n  //   }\n  // }  \n"],["\n  background-color: #f4f7f9;\n  width: 100%;\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  padding: 5px;\n  .action {\n    width: 1.3rem;\n    height: 1.3rem;\n    cursor: pointer;\n    opacity: 0.7;\n    -webkit-user-select: none;\n    user-select: none;\n    &:hover {\n      opacity: 0.7;\n    }\n  }\n  input {\n    background-color: rgba(0,0,0,0);\n    border: none;\n    border-bottom: 1px solid rgba(0,0,0,0);\n    outline: 0px;\n    padding: 0px;\n    margin-left: 15px;\n    font-size: 0.9rem;\n    font-weight: 100;\n    flex: 1;\n    &.invalid {\n      border-bottom: 1px solid red;\n    }\n  }\n  button {\n    min-width: 90px;\n    background-color: #09de9e;\n    flex: 0;\n    font-size: 1rem;\n    &:hover {\n      background-color: #08c98f;\n    }\n    &:disabled, &:disabled:hover {\n      background-color: rgba(0,0,0,0.05);\n      color: #aabbcc !important;\n    }\n  }\n  @media (max-width: 576px) {\n    padding: 15px;\n  }\n  // @media (max-width: 768px) {\n  //   &.form-fullscreen {\n  //     position: fixed;\n  //     bottom: 0;\n  //   }\n  // }  \n"]))),Q=m.div(R||(R=e(["\n  width: 100%;\n  display: flex;\n  flex-direction: row-reverse;\n  small {\n    position: absolute;\n    margin-top: -1.6rem;\n    margin-right: 1rem;\n    font-size: 0.7rem !important;\n    font-weight: 100;\n    line-height: 0.8rem;\n    color: #015e9c;\n    background-color: #ddf0fc;\n    border: 1px solid #ffffff;\n    border-radius: 100px;\n    padding: 5px 15px;\n    z-index: 50;\n  }\n"],["\n  width: 100%;\n  display: flex;\n  flex-direction: row-reverse;\n  small {\n    position: absolute;\n    margin-top: -1.6rem;\n    margin-right: 1rem;\n    font-size: 0.7rem !important;\n    font-weight: 100;\n    line-height: 0.8rem;\n    color: #015e9c;\n    background-color: #ddf0fc;\n    border: 1px solid #ffffff;\n    border-radius: 100px;\n    padding: 5px 15px;\n    z-index: 50;\n  }\n"]))),X=function(e){var m,T=e.host,N=e.clientId,_=e.clientSecret,A=e.customToken,O=e.websocketUrl;e.postcodeSchemaId,e.source;var M=e.fullscreen,U=void 0!==M&&M,D=i(p),R=l(null),X=c(!1),$=X[0],ee=X[1],ne=c(null),te=ne[0],oe=ne[1],re=c(!1),ae=re[0],ie=re[1],le=c(null);le[0];var ce=le[1],se=c(null),de=se[0],ue=se[1],me=c(null),pe=me[0],ge=me[1],fe=c(!1),he=fe[0],xe=fe[1],ve=c(!1),be=ve[0],we=ve[1],ye=c(!1),Ie=ye[0],Se=ye[1],Ee=c(U),Ce=Ee[0],ke=Ee[1],Te=c({}),Ne=Te[0],_e=Te[1],Ae=c(""),Oe=Ae[0],Me=Ae[1],Ue=c(null),De=Ue[0],Re=Ue[1],Le=c(null),je=Le[0],Fe=Le[1],ze=c(null),We=ze[0],Be=ze[1],Ge=c([]),Pe=Ge[0],Ye=Ge[1],Ve=c(!1),He=Ve[0],qe=Ve[1],Je=c(!1),Ke=Je[0],Ze=Je[1],Qe=c(null),Xe=Qe[0],$e=Qe[1],en=c(!1),nn=en[0],tn=en[1],on=c(null),rn=on[0],an=on[1],ln=c(!1),cn=ln[0],sn=ln[1],dn=c(!0),un=dn[0],mn=dn[1],pn=c(null),gn=pn[0],fn=pn[1],hn=c(!1),xn=hn[0],vn=hn[1],bn=c(-1),wn=bn[0],yn=bn[1],In=l("");l(0);var Sn=l(null),En=l(Ce),Cn=l(!0),kn=["jpg","jpeg","png","pdf","gif","txt","mp4","mp3"],Tn=w.useTime({interval:1}).seconds,Nn=c(!1),_n=Nn[0],An=Nn[1],On=l(null),Mn=[{createdAt:h(new Date).format(),message:null,fromId:"Client",senderType:"CUSTOMER",form:{type:"buttons",value:[{title:"I am the account holder",action:"old_customer"},{title:"I am not the account holder",action:"not_customer"},{title:"I am new here",action:"new_customer"}]},messageId:"1"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"Welcome to YouFibre!<br />We're going to ask you some questions to ensure we get you through to the right team, so please bear with us!<br />Are you the account holder?",form:null,messageId:"0"}],Un={SALES:"Sales",TECH_SUPPORT:"Tech Support",INSTALLS_AND_SERVICE_VISITS:"Installs & Service Visits",MANAGE_MY_ACCOUNT:"Manage My Account",BILLING:"Billing",CANCELLATION:"Cancellation",COMPLAINT:"Complaint"},Dn={NEW_CUSTOMER:"New customer",ACCOUNT_HOLDER:"Account holder",NOT_ACCOUNT_HOLDER:"Not the account holder"},Rn=c(Mn),Ln=Rn[0],jn=Rn[1],Fn=c(null),zn=Fn[0],Wn=Fn[1],Bn=l(Ln),Gn=l(null),Pn=l(null),Yn=function(){try{Gn.current&&Gn.current.scrollIntoView({behavior:"smooth"})}catch(e){}};s(function(){if("undefined"!=typeof document&&"undefined"!=typeof window){if(xn&&-1!==wn){localStorage.getItem("title")||localStorage.setItem("title","undefined"!=typeof document&&document.getElementsByTagName("title")[0].textContent||"");return Sn.current=window.setInterval(function(){var e=In.current;if(e){var n=(wn+1)%e.length;document.title=e.slice(n)+" "+e.slice(0,n),yn(n)}},200),function(){Sn.current&&clearInterval(Sn.current)}}Sn.current=null,In.current=""}},[wn]),s(function(){I(T,N,_,A),S.get("https://strapi.youfibre.com/api/information").then(function(e){D.setAppMessages(e.data)}).catch(function(e){D.setAppMessages(null)}),Jn();var e="undefined"!=typeof window?window.location.href:"",n=new MutationObserver(function(){"undefined"!=typeof window&&e!==window.location.href&&(e=window.location.href,Jn())});return"undefined"!=typeof document&&n.observe(document.body,{childList:!0,subtree:!0}),function(){return n.disconnect()}},[]),s(function(){fn(D.appMessages),mn(!qn())},[D.appMessages]),s(function(){mn(!qn())},[Tn]),s(function(){!un&&!pe&&nt()},[un]);var Vn=(new Date).toLocaleString("en-GB",{timeZone:"Europe/London",hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1}),Hn=function(e){if(e){var n=e.split(":").map(Number);return 3600*n[0]+60*n[1]+n[2]}},qn=function(){var e,n,t,o,r;if((null===(e=D.appMessages)||void 0===e?void 0:e.chat_off_mode_toggle)&&Vn&&(null===(n=D.appMessages)||void 0===n?void 0:n.chat_off_mode_start)&&(null===(t=D.appMessages)||void 0===t?void 0:t.chat_off_mode_end)){var a=Hn(Vn),i=Hn(null===(o=D.appMessages)||void 0===o?void 0:o.chat_off_mode_start),l=Hn(null===(r=D.appMessages)||void 0===r?void 0:r.chat_off_mode_end);return i<l?a>=i&&a<l:a>=i||a<l}return!1},Jn=function(){"undefined"!=typeof window&&an(new URLSearchParams(window.location.search))};s(function(){if(""===(null==rn?void 0:rn.get("youFibreChat"))){n(void 0,void 0,void 0,function(){return o(this,function(e){switch(e.label){case 0:return[4,new Promise(function(e){var n;localStorage.setItem("chatUsername",rn.get("chatUsername")),localStorage.setItem("chatUserId",rn.get("chatUserId")),localStorage.setItem("chatSessionId",rn.get("chatSessionId")),localStorage.setItem("conversationId",rn.get("conversationId")),localStorage.setItem("caseId",rn.get("caseId")),localStorage.setItem("participantId",rn.get("participantId")),Re(rn.get("participantId")),D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:t(t({},(null===(n=D.goGetRegistrationData())||void 0===n?void 0:n.twilioChat)||null),{chatUsername:rn.get("chatUsername")||null,chatSessionId:rn.get("chatSessionId")||null,chatUserId:rn.get("chatUserId")||null,conversationId:rn.get("conversationId")||null,caseId:rn.get("caseId")||null,participantId:rn.get("participantId")||null})})),e()})];case 1:return e.sent(),Kn(),[2]}})})}else rn&&0===Object.keys(rn).length&&Kn()},[rn]);var Kn=function(){n(void 0,void 0,void 0,function(){var e,n,r,a,i;return o(this,function(o){switch(o.label){case 0:if(!localStorage.getItem("conversationId"))return[3,4];o.label=1;case 1:return o.trys.push([1,3,,4]),[4,y.get("ChatModule/v1.0/gateway/conversation/".concat(localStorage.getItem("conversationId")))];case 2:return(e=o.sent())?("CLOSED"===(null===(a=null===(r=null==e?void 0:e.data)||void 0===r?void 0:r.properties)||void 0===a?void 0:a.Status)?nt():D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:t(t({},(null===(i=D.goGetRegistrationData())||void 0===i?void 0:i.twilioChat)||null),{chatUsername:localStorage.getItem("chatUsername")||null,chatSessionId:localStorage.getItem("chatSessionId")||null,chatUserId:localStorage.getItem("participantId")||null,conversationId:localStorage.getItem("conversationId")||null,caseId:localStorage.getItem("caseId")||null,participantId:localStorage.getItem("participantId")||null})})),xe(!1),[3,4]):(console.log("Can't check conversation!"),[2,null]);case 3:return n=o.sent(),console.log("Error fetching conversation status: ",n),[3,4];case 4:return[2]}})}),localStorage.removeItem("title"),ue(localStorage.getItem("conversationId")||null),ge(localStorage.getItem("caseId")||null),Re(localStorage.getItem("participantId")||null),On.current=localStorage.getItem("agentId")||null,$e(localStorage.getItem("chatSessionId")||null),localStorage.getItem("conversationId")&&localStorage.getItem("participantId")&&ie(!0),localStorage.getItem("chatUsername")&&Be(localStorage.getItem("chatUsername")),localStorage.getItem("chatUserType")&&Fe(localStorage.getItem("chatUserType")||"NEW_CUSTOMER"),_e({full_name:localStorage.getItem("chatUsername"),email:localStorage.getItem("chatEmail"),category:localStorage.getItem("chatCategory"),address:localStorage.getItem("chatAddress"),last_bill:localStorage.getItem("chatLastBill")}),localStorage.getItem("chatMessages")?jn(JSON.parse(localStorage.getItem("chatMessages")||"")):localStorage.setItem("chatMessages",JSON.stringify(Ln)),localStorage.getItem("conversationId")&&Zn(localStorage.getItem("conversationId"),"onLoad"),document.addEventListener("visibilitychange",function(){var e;"visible"===document.visibilityState?(Cn.current=!0,"undefined"!=typeof document&&En.current&&localStorage.getItem("title")&&(vn(!1),yn(-1),sn(!1),document.title=localStorage.getItem("title")||"",null===(e=document.getElementById("inputMessage"))||void 0===e||e.focus(),setTimeout(function(){return localStorage.removeItem("title")},1e3)),localStorage.getItem("conversationId")&&Zn(localStorage.getItem("conversationId"),"visibilitychange")):Cn.current=!1})},Zn=function(e,t){return n(void 0,void 0,void 0,function(){var r,a,i,l;return o(this,function(c){switch(c.label){case 0:return c.trys.push([0,6,,7]),e?[4,y.get("NotificationModule/v2.0/records/Conversation/".concat(e,'/links?targetEntities=["Message"]'))]:[3,4];case 1:return(r=c.sent())?(console.log("getAllMessages: ".concat(t),r),[4,Promise.all(null===(l=null==r?void 0:r.Message)||void 0===l?void 0:l.dbRecords.map(function(e){return n(void 0,void 0,void 0,function(){var n,t,r,a,i;return o(this,function(o){switch(o.label){case 0:return n={createdAt:null==e?void 0:e.createdAt,from:null===(t=null==e?void 0:e.properties)||void 0===t?void 0:t.From},[4,Xn(null===(r=null==e?void 0:e.properties)||void 0===r?void 0:r.Files)];case 1:return[2,(n.files=o.sent(),n.message=null===(a=null==e?void 0:e.properties)||void 0===a?void 0:a.Body,n.form=null,n.messageId=null==e?void 0:e.id,n.fromId=null===(i=null==e?void 0:e.createdBy)||void 0===i?void 0:i.id,n.senderType="EVENT"===e.type?"EVENT":e.properties.SenderType,n)]}})})}))]):[3,3];case 2:a=c.sent(),!En.current&&Object.keys(a).length>0&&sn(!0),a=a.sort(function(e,n){return new Date(n.createdAt).getTime()-new Date(e.createdAt).getTime()}),jn(a),localStorage.setItem("allMessages",JSON.stringify(a)),c.label=3;case 3:return[3,5];case 4:jn(Mn),c.label=5;case 5:return[3,7];case 6:return i=c.sent(),console.log("Error fetching messages:",i),[3,7];case 7:return[2]}})})};s(function(){"undefined"!=typeof document&&(U?(document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden"):(document.body.style.overflow="",document.documentElement.style.overflow=""))},[U]);var Qn;s(function(){var e,n,t,o;if(De){var r=Xe||C();$e(r),localStorage.setItem("chatSessionId",r),Pn.current||(Pn.current=(void 0===(o=r)&&(o=null),d("".concat(O,"/ChatWebsocketModule/TwilioChatWebsocket/v1.0"),{path:"/ws",query:{clientId:o},reconnection:!0,reconnectionAttempts:1/0,reconnectionDelay:1e3,reconnectionDelayMax:5e3,timeout:1e4}))),null===(e=Pn.current)||void 0===e||e.on("connect",function(){console.log("Connected to WebSocket server")}),null===(n=Pn.current)||void 0===n||n.on("connect_error",function(e){console.log("Connect error due to ".concat(e.message)),Pn.current=null}),null===(t=Pn.current)||void 0===t||t.on("disconnect",function(e){console.log("Disconnected: ".concat(e)),Pn.current=null})}},[De]),s(function(){n(void 0,void 0,void 0,function(){var e,t;return o(this,function(r){return Pn.current&&pe&&(Pn.current.emit("joinRoom",pe),!Pn.current.listeners("case-event-".concat(pe)).length&&(null===(e=Pn.current)||void 0===e||e.on("case-event-".concat(pe),function(e){if(e.caseId===localStorage.getItem("caseId"))switch(e.type){case"CASE_UPDATED":On.current=e.data.properties.OwnerId,localStorage.setItem("agentId",On.current||"");break;case"CONVERSATION_CLOSED":Se(!0);break;case"MESSAGE_CREATED":$n(e.data)}})),!Pn.current.listeners("web-chat-input-".concat(pe)).length&&(null===(t=Pn.current)||void 0===t||t.on("web-chat-input-".concat(pe),function(e){return n(void 0,void 0,void 0,function(){return o(this,function(n){return e.caseId===pe&&"AGENT"===e.sender&&An(!0),[2]})})}))),[2]})})},[pe]),s(function(){n(void 0,void 0,void 0,function(){return o(this,function(e){try{Qn=!!_n&&setTimeout(function(){An(!1),clearTimeout(Qn)},1500)}catch(e){console.log("Error fetching data:",e)}return[2]})})},[_n]),s(function(){Bn.current=Ln},[Ln]),s(function(){n(void 0,void 0,void 0,function(){var e;return o(this,function(n){try{Ln.length&&pe&&Pn.current&&(null===(e=Pn.current)||void 0===e||e.emit("web-chat-input",{caseId:pe,conversationId:de,message:Oe,sender:"CUSTOMER"}))}catch(e){console.log("Error fetching data:",e)}return[2]})})},[Oe]);var Xn=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n(void 0,r([],e,!0),void 0,function(e){var n,t,a;return void 0===e&&(e=null),o(this,function(o){switch(o.label){case 0:return o.trys.push([0,4,,5]),n=[],e?[4,y.get("SchemaModule/v1.0/db/File/many?ids=".concat(e))]:[3,2];case 1:return(t=o.sent())?(console.log("tmpFiles response:",t),Object.keys(t).length&&t.map(function(e){var t,o;n=r(r([],n,!0),[{id:(null==e?void 0:e.id)||"",type:(null===(t=null==e?void 0:e.properties)||void 0===t?void 0:t.Mimetype)||"",url:(null===(o=null==e?void 0:e.properties)||void 0===o?void 0:o.Url)||""}],!1)}),[2,0!==Object.keys(n).length?n:[]]):(console.log("Can't close conversation!"),[3,3]);case 2:return[2,[]];case 3:return[3,5];case 4:return a=o.sent(),console.log("Error fetching files:",a),[2,[]];case 5:return[2]}})})},$n=function(e){return n(void 0,void 0,void 0,function(){var n,t,r,a,i;return o(this,function(o){switch(o.label){case 0:if(!e||Bn.current.some(function(n){return n.messageId===e.id}))return[3,6];o.label=1;case 1:return o.trys.push([1,5,,6]),"CLOSED"===(null===(i=null===(a=null===(r=null==e?void 0:e.Conversation)||void 0===r?void 0:r.dbRecords[0])||void 0===a?void 0:a.properties)||void 0===i?void 0:i.Status)&&Se(!0),n=[],e.properties.Files?[4,Xn(e.properties.Files)]:[3,3];case 2:return n=o.sent(),0===Object.keys(n).length&&(n=null),et(e,n),[3,4];case 3:et(e,n),o.label=4;case 4:return[3,6];case 5:return t=o.sent(),console.log("Error fetching message:",t),[3,6];case 6:return[2]}})})},et=function(e,n){var t={senderType:"EVENT"!==e.type?e.properties.SenderType:e.type,createdAt:h(new Date).format(),from:"EVENT"!==e.type?e.properties.From:e.type,message:"EVENT"!==e.type?e.properties.Body:e.title,form:null,files:n,messageId:e.id,fromId:"EVENT"!==e.type?e.createdBy.id:"YouFibre"};En.current&&Cn.current||sn(!0),Wn(r(r([],zn||[],!0),[t],!1)),setTimeout(function(){Wn(null),jn(r([t],Bn.current,!0)),localStorage.setItem("chatMessages",JSON.stringify(r([t],Bn.current,!0))),xe(!1),Yn()},400)};s(function(){if("undefined"!=typeof document)if(localStorage.getItem("title")||localStorage.setItem("title","undefined"!=typeof document&&document.getElementsByTagName("title")[0].textContent||""),cn){var e=new Audio(G.toString());e.setAttribute("crossorigin","anonymous"),e.play().catch(function(e){console.log("User interaction required before playing sound")}),document.title="New message | YouFibre"}else document.title=localStorage.getItem("title")||"",Yn()},[cn]),s(function(){n(void 0,void 0,void 0,function(){var e;return o(this,function(n){try{"undefined"!=typeof window&&"undefined"!=typeof document&&(Ce?(window.innerWidth<577&&(document.body.style.overflow="hidden"),Sn.current&&clearInterval(Sn.current),localStorage.getItem("title")&&(document.title=localStorage.getItem("title")||""),vn(!1),yn(-1),sn(!1),null===(e=document.getElementById("inputMessage"))||void 0===e||e.focus(),setTimeout(function(){return localStorage.removeItem("title")},1e3)):(document.body.style.overflow="",tn(!1),Se(!1))),Yn(),En.current=Ce}catch(e){console.log("Error fetching data:",e)}return[2]})})},[Ce]);var nt=function(){Pn.current&&pe&&(Pn.current.emit("leaveRoom",pe),Pn.current.removeAllListeners()),ue(null),ge(null),Ye([]),Ze(!Ke),ee(!1),oe(null),R.current=null,localStorage.removeItem("chatEmail"),localStorage.removeItem("conversationId"),localStorage.removeItem("caseId"),localStorage.removeItem("participantId"),localStorage.removeItem("chatUsername"),localStorage.removeItem("twilio_token"),localStorage.removeItem("chatMessages"),localStorage.removeItem("chatUserType"),localStorage.removeItem("chatCategory"),localStorage.removeItem("chatAddress"),localStorage.removeItem("chatLastBill"),localStorage.removeItem("agentId"),localStorage.removeItem("chatSessionId"),Be(null),Fe(null),Re(null),_e({}),xe(!1),ie(!0),ce(null),On.current=null,Me(""),localStorage.setItem("chatMessages",JSON.stringify(Mn)),Wn(null),jn(Mn),Yn(),U&&ke(!0),D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:null}))},tt=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n(void 0,r([],e,!0),void 0,function(e){var t,r;return void 0===e&&(e=null),o(this,function(a){if(Oe.length>0||e||Object.keys(Pe).length>0){"undefined"!=typeof document&&(null===(r=document.getElementById("inputMessage"))||void 0===r||r.focus()),(t=new u).append("conversationSid",localStorage.getItem("conversationId")),t.append("message",Oe||e),t.append("from",localStorage.getItem("chatUsername")),t.append("sender","CUSTOMER"),Me(""),we(!0);try{Object.keys(Pe).length>0&&Pe.map(function(e){return n(void 0,void 0,void 0,function(){return o(this,function(n){return t.append("files",e),[2]})})})}catch(e){}try{y.post("ChatModule/v1.0/gateway/conversation/".concat(localStorage.getItem("conversationId"),"/message/send"),t,{headers:{"Content-Type":"multipart/form-data"}}).then(function(e){e?(Ye([]),ie(!0),we(!1),xe(!1)):(mn(!qn()),nt(),console.log("Conversation is closed"))}).catch(function(e){mn(!qn()),console.log("Send a Message:",e)})}catch(e){console.log("Error loading SVG:",e)}}return[2]})})},ot=function(){return n(void 0,void 0,void 0,function(){var e,r,a;return o(this,function(i){switch(i.label){case 0:return xe(!0),localStorage.setItem("chatUsername",Ne.full_name),Be(Ne.full_name),localStorage.setItem("chatEmail",Ne.email),localStorage.setItem("chatCategory",Ne.category),localStorage.setItem("chatAddress",Ne.address),localStorage.setItem("chatLastBill",Ne.last_bill),[4,(p=Ne.email,n(void 0,void 0,void 0,function(){var e;return o(this,function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),[4,y.get("ChatModule/v1.0/gateway/token?identity=".concat(p,"&source=twilio"))];case 1:return[2,n.sent()||null];case 2:return e=n.sent(),console.log("Error fetching token:",e),[3,3];case 3:return[2]}})}))];case 1:return(e=i.sent())?(localStorage.setItem("twilio_token",e),ce(e),[4,(l=Ne.full_name,c=Ne.email,s=Ne.address,d=Ne.last_bill,u=je,m=Ne.category,n(void 0,void 0,void 0,function(){var e,n;return o(this,function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,y.post("ChatModule/v1.0/gateway/conversation/create",{source:"twilio",channel:"WEB_CHAT",identifier:c||null,DpaCustomerName:l||null,DpaCustomerEmail:c||null,DpaCustomerAddress:s||null,DpaCustomerLastBill:d||null,DpaCustomerType:u||null,DpaCustomerCategory:m||null})];case 1:return(e=t.sent())?[2,e||null]:(console.log("Can't create conversation!"),mn(!1),[2,null]);case 2:return n=t.sent(),mn(!1),x(n.message.replaceAll("OdinApiError:",""),"error"),[3,3];case 3:return[2]}})}))]):[3,3];case 2:return(r=i.sent())?(ie(!0),Re(null==r?void 0:r.participantId),localStorage.setItem("conversationId",null==r?void 0:r.conversationId),localStorage.setItem("caseId",null==r?void 0:r.caseId),localStorage.setItem("participantId",null==r?void 0:r.participantId),ge(null==r?void 0:r.caseId),ue(null==r?void 0:r.conversationId),D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:t(t({},null===(a=D.goGetRegistrationData())||void 0===a?void 0:a.twilioChat),{chatUsername:Ne.full_name,chatSessionId:Xe,chatUserId:null==r?void 0:r.participantId,conversationId:null==r?void 0:r.conversationId,caseId:null==r?void 0:r.caseId,participantId:null==r?void 0:r.participantId})})),new Promise(function(e){jn(function(n){return e(),[]}),tt(R.current)}).then(function(){et({type:"EVENT",title:"Waiting for the agent to join the chat."},null)})):mn(!qn()),[3,4];case 3:xe(!1),i.label=4;case 4:return[2]}var l,c,s,d,u,m,p})})},rt=E({noClick:!0,noKeyboard:!0,onDrop:function(e){pe&&(e=(e=(e=e.filter(function(e){return e.size<10485760?e:x("Maximum file size is ".concat(10,"MB"),"error")})).filter(function(e){return kn.some(function(n){return e.name.endsWith(n)})?e:x("Unsupported File extension","error")})).filter(function(e){return 0===Object.keys(Pe.filter(function(n){return n.name===e.name})).length}),Object.keys(Pe).length+Object.keys(e).length<6?Ye(r(r([],Pe,!0),e,!0)):x("Maximum ".concat(5," files"),"warning"),qe(!1))}}),at=rt.getRootProps,it=rt.getInputProps,lt=rt.open;return a.createElement(a.Fragment,null,(void 0===process.env.GATSBY_TWILIO_CHAT_VERSION||"1"===process.env.GATSBY_TWILIO_CHAT_VERSION)&&a.createElement(V,null,a.createElement(q,t({className:"".concat(Ce?"show":""," ").concat(U?"fullscreen":"")},at(),{onDragOver:function(){return pe&&qe(!0)},onMouseLeave:function(){return qe(!1)}}),a.createElement(J,null,a.createElement(P,{className:"justify-between"},a.createElement(k,{className:"p-0 m-0 align-items-center"},a.createElement("div",null,a.createElement("img",{src:L.toString()}),a.createElement("span",null," YouFibre"))),a.createElement(k,{className:"p-0 m-0 align-items-center"},!de&&Object.keys(Ln).length>2&&a.createElement("button",{onClick:function(){return nt()},className:"small"},"Back"),de&&a.createElement("button",{onClick:function(){return tn(!0)},className:"small"},"End conversation"),!U&&a.createElement("img",{src:F.toString(),className:"close",onClick:function(){return ke(!Ce)}})))),a.createElement(v,{type:"chat"}),a.createElement(K,null,a.createElement(P,{className:"direction-column-reverse content-end chat-content-container"},a.createElement("div",{ref:Gn}),a.createElement(f,{messages:Ln,chatUsername:We,chatUserId:De,chatConversationId:de,resetFormValues:Ke,setChatForm:_e,buttonAction:function(e){if(un||pe||b())switch(e){case"new_customer":!function(){Fe("NEW_CUSTOMER"),localStorage.setItem("chatUserType","NEW_CUSTOMER");var e=r([{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:null,form:{type:"form",value:[{title:"Name",action:"full_name",placeholder:null,type:"text",required:!0},{title:"Email",action:"email",placeholder:null,type:"email",required:!0},{title:"Enter your Postcode",action:"address",placeholder:"Example: SW1 4EN",type:"zip",required:!0},{title:"What do you need help with today?",action:"category",placeholder:null,type:"select",required:!0,options:{SALES:"Sales",TECH_SUPPORT:"Tech Support",COMPLAINT:"Complaint"}},{title:"Submit",action:"submit_form",type:"button"}]},messageId:"3"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"We're so happy to hear from you! So that we can provide the best possible support, please provide us with the following information.",form:null,messageId:"2"},{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"Client",fromId:"Client",message:"I am new here",form:null,messageId:"1"}],Ln.slice(1),!0);Wn(r(r([],zn||[],!0),[e[0]],!1)),setTimeout(function(){Wn(null),jn(e)},400),localStorage.setItem("chatMessages",JSON.stringify(e))}();break;case"not_customer":!function(){Fe("NOT_ACCOUNT_HOLDER"),localStorage.setItem("chatUserType","NOT_ACCOUNT_HOLDER");var e=r([{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:null,form:{type:"form",value:[{title:"Name",action:"full_name",placeholder:null,type:"text",required:!0},{title:"Email",action:"email",placeholder:null,type:"email",required:!0},{title:"Enter your Postcode",action:"address",placeholder:"Example: SW1 4EN",type:"zip",required:!0},{title:"What do you need help with today?",action:"category",placeholder:null,type:"select",required:!0,options:{SALES:"Sales",TECH_SUPPORT:"Tech Support",COMPLAINT:"Complaint"}},{title:"Submit",action:"submit_form",type:"button"}]},messageId:"3"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"We're so happy to hear from you! So that we can provide the best possible support, please provide us with the following information.",form:null,messageId:"2"},{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"Client",fromId:"Client",message:"I am not the account holder",form:null,messageId:"1"}],Ln.slice(1),!0);Wn(r(r([],zn||[],!0),[e[0]],!1)),setTimeout(function(){Wn(null),jn(e)},400),localStorage.setItem("chatMessages",JSON.stringify(e))}();break;case"old_customer":!function(){Fe("ACCOUNT_HOLDER"),localStorage.setItem("chatUserType","ACCOUNT_HOLDER");var e=r([{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:null,form:{type:"form",value:[{title:"Name",action:"full_name",placeholder:null,type:"text",required:!0},{title:"Email",action:"email",placeholder:null,type:"email",required:!0},{title:"Enter your Postcode",action:"address",placeholder:"Example: SW1 4EN",type:"zip",required:!0},{title:"What was the total value of your last bill?",action:"last_bill",placeholder:"Total amount of your last bill",type:"number",required:!0},{title:"What do you need help with today?",action:"category",placeholder:null,type:"select",required:!0,options:{SALES:"Sales",TECH_SUPPORT:"Tech Support",INSTALLS_AND_SERVICE_VISITS:"Installs & Service Visits",MANAGE_MY_ACCOUNT:"Manage My Account",BILLING:"Billing",CANCELLATION:"Cancellation",COMPLAINT:"Complaint"}},{title:"Submit",action:"submit_form",type:"button"}]},messageId:"3"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"We're so happy to hear from you! So that we can provide the best possible support, please provide us with the following information.",form:null,messageId:"2"},{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"Client",fromId:"Client",message:"I am the account holder",form:null,messageId:"1"}],Ln.slice(1),!0);Wn(r(r([],zn||[],!0),[e[0]],!1)),setTimeout(function(){Wn(null),jn(e)},400),localStorage.setItem("chatMessages",JSON.stringify(e))}();break;case"submit_form":Ne.full_name&&Ne.address&&"/"!==Ne.address&&Ne.email&&("ACCOUNT_HOLDER"===localStorage.getItem("chatUserType")&&void 0!==Ne.last_bill||"ACCOUNT_HOLDER"!==localStorage.getItem("chatUserType"))&&Ne.category&&je&&(R.current="<b>".concat(Dn[je],"</b><br /><b>Full name</b>: ").concat(Ne.full_name,"<br /><b>Email</b>: ").concat(Ne.email,"<br /><b>Address</b>: ").concat(Ne.address,"<br />").concat(void 0!==Ne.last_bill?"<b>What was the total value of your last bill</b>: "+Ne.last_bill+"<br />":"","<b>What do you need help with today</b>: ").concat(Un[Ne.category]),n(void 0,void 0,void 0,function(){var e;return o(this,function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),xe(!0),[4,y.get("SupportModule/v1.0/Case/outage/verify?contactEmailAddress=".concat(Ne.email)).then(function(e){var n,t,o;return xe(!1),200===(null===(n=null==e?void 0:e.data)||void 0===n?void 0:n.statusCode)&&(null===(t=null==e?void 0:e.data)||void 0===t?void 0:t.data)?(ee(!0),oe(null===(o=null==e?void 0:e.data)||void 0===o?void 0:o.message),!0):(ot(),!1)}).catch(function(e){console.log("Outage Message:",e)})];case 1:return n.sent(),[3,3];case 2:return e=n.sent(),console.log("Error fetching outage: ",e),[3,3];case 3:return[2]}})}))}else nt()},newMessages:zn,chatActive:un,API:y}))),_n&&Ce&&a.createElement(Q,null,a.createElement("small",null,"Agent is typing...")),ae&&!Ie&&!(null===(m=Ln[0])||void 0===m?void 0:m.form)&&a.createElement(Z,{className:"".concat(U?"form-fullscreen":"")},a.createElement(Y,null,a.createElement("input",{id:"inputMessage",className:"",autoComplete:"off",maxLength:500,onChange:function(e){return Me(e.target.value)},value:Oe,type:"text",placeholder:"Write a reply..."}),a.createElement("input",t({},it())),a.createElement("img",{className:"action",alt:"Add attachment",src:W.toString(),onClick:function(){return lt()}}),a.createElement("button",{type:"submit",onClick:function(e){return function(e){e.preventDefault(),tt()}(e)},disabled:be||!1},be?a.createElement("img",{src:z.toString(),width:16,height:16}):"Send"))),Object.keys(Pe).length>0&&a.createElement("div",{className:"files"},Pe.map(function(e){return a.createElement("div",{className:"file",key:e.name},a.createElement("div",{className:"fileName"},e.name),a.createElement("img",{className:"action",src:B.toString(),onClick:function(){return n=e.name,t=Pe.filter(function(e){return e.name!==n}),void Ye(t);var n,t}}))})),He&&pe&&Ce&&a.createElement("div",{className:"cover upload"},a.createElement("h4",null,"Drag and drop your files here"),a.createElement("p",null,"Maximum ",5," files. Limit ",10,"MB per file."),a.createElement("p",null,"Supported files: ",kn&&kn.map(function(e,n){return!["mp4","mp3"].some(function(n){return n===e})&&(0===n?e:", ".concat(e))}))),he&&Ce&&a.createElement("div",{className:"cover"},a.createElement("img",{className:"make-it-white",src:z.toString(),width:14,height:14})),Ie&&Ce&&a.createElement("div",{className:"cover closed"},a.createElement("h4",null,"Conversation is closed"),a.createElement("span",null,"This chat has now closed. If you need any help, feel free to start a new chat.",a.createElement("br",null),"We're always happy to assist you!"),a.createElement("button",{onClick:function(){Se(!1),nt()}},"Create new")),$&&te&&a.createElement("div",{className:"cover closed"},a.createElement("h4",null,"Outage in your area"),a.createElement("span",null,te),a.createElement("button",{onClick:function(){nt()},className:"blue-bg"},"Got It - Close Chat"),a.createElement("button",{onClick:function(){ee(!1),oe(null),ot()}},"Still Need Help - Start Chat")),nn&&Ce&&a.createElement("div",{className:"cover closed"},a.createElement("h4",null,"Close conversation"),a.createElement("span",null,"Are you sure you want to end this conversation?"),a.createElement("button",{onClick:function(){tn(!1)}},"Cancel"),a.createElement("button",{onClick:function(){tn(!1),function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];n(void 0,r([],e,!0),void 0,function(e){var n;return void 0===e&&(e="CUSTOMER"),o(this,function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,y.post("ChatModule/v1.0/gateway/conversation/".concat(localStorage.getItem("conversationId"),"/close"),{closedBy:e})];case 1:return t.sent()?(nt(),[3,3]):(console.log("Can't close conversation!"),[2,null]);case 2:return n=t.sent(),console.log("Error closing conversation:",n),[3,3];case 3:return[2]}})})}("CUSTOMER"),nt()},className:"blue-bg"},"Confirm")),!un&&Ce&&!pe&&gn&&!b()&&a.createElement("div",{className:"cover closed"},a.createElement("h4",null,"Out of service"),a.createElement("span",{dangerouslySetInnerHTML:{__html:g(gn.chat_off_mode_text,{target:"_blank"}).replaceAll(/\r\n|\n/g,"<br />")}}),!U&&a.createElement("button",{onClick:function(){return ke(!1)}},"Close chat"))),a.createElement(H,{onClick:function(){return Ie&&(nt(),Se(!1)),ee(!$),void ke(!Ce)},className:"YFChat ".concat(Ce?"open":""," ").concat(U?"fullscreen":"")},a.createElement("img",{src:j.toString(),className:"icon-default"}),a.createElement("img",{src:F.toString(),className:"icon-hover"}),cn&&a.createElement("small",{className:"unread"},"1"))))};export{X as default};
+import{__makeTemplateObject as e,__awaiter as n,__assign as t,__generator as o,__spreadArray as r}from"../../node_modules/tslib/tslib.es6.js";import a,{useContext as i,useRef as l,useState as c,useEffect as s}from"react";import{io as d}from"../../node_modules/socket.io-client/build/esm/index.js";import u from"../../_virtual/browser.js";import m from"../../node_modules/styled-components/dist/styled-components.browser.esm.js";import p from"../context/GlobalContext.js";import g from"../../node_modules/linkify-html/dist/linkify-html.js";import f from"./Chat.js";import h from"../../_virtual/moment.js";import{toastrMsg as x}from"../utils/alert.js";import v from"../NotificationBar/index.js";import{isStagingOrDevelopment as b}from"../utils/helperFn.js";import{d as w}from"../../_virtual/index.js";import y,{setConfig as I}from"../api/api.js";import S from"axios";import{useDropzone as E}from"../../node_modules/react-dropzone/dist/es/index.js";import"../assets/styles/fonts.css.js";import"../assets/styles/app.scss.js";import C from"../../node_modules/uuid/dist/esm-browser/v4.js";import k from"../../node_modules/react-bootstrap/esm/Row.js";var N,T,_,A,O,M,U,D,R,L=new URL("./assets/images/svg/favicon.svg",import.meta.url),j=new URL("./assets/images/svg/chat.svg",import.meta.url),F=new URL("./assets/images/png/ico-close.png",import.meta.url),z=new URL("./assets/images/gif/loader-transparent.gif",import.meta.url),W=new URL("./assets/images/svg/youfibre-upload.svg",import.meta.url),B=new URL("./assets/images/svg/close.svg",import.meta.url),G=new URL("./assets/audio/notification.wav",import.meta.url),P=m.div(N||(N=e(["\n  width: 100%;\n  max-width: 700px;\n  height: 100%;\n  position: relative;\n  margin: 0px auto;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  \n  &.direction-column-reverse { flex-direction: column-reverse; }\n  &.content-end { justify-content: end; }\n\n"],["\n  width: 100%;\n  max-width: 700px;\n  height: 100%;\n  position: relative;\n  margin: 0px auto;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  \n  &.direction-column-reverse { flex-direction: column-reverse; }\n  &.content-end { justify-content: end; }\n\n"]))),Y=m(P)(T||(T=e(["\n  overflow-y: auto;\n"],["\n  overflow-y: auto;\n"]))),V=m.div(_||(_=e(["\n  position: fixed;\n  bottom: 40px;\n  right: 40px;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: 15px;\n"],["\n  position: fixed;\n  bottom: 40px;\n  right: 40px;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: 15px;\n"]))),H=m.div(A||(A=e(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #08DE9E;\n  width: 50px;\n  height: 50px;\n  border-radius: 100px;\n  cursor: pointer;\n  -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -webkit-user-select: none;\n  user-select: none;  \n  img {\n    position: absolute;\n    -moz-transition: all 0.3s ease;\n    transition: all 0.3s ease;\n\t\t&.icon-hover {\n      width: 15px;\n      height: 15px;\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n\t\t&.icon-default {\n      width: 20px;\n      height: 20px;\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n  }\n  &:hover {\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  }\n  &.open {\n\t\t.icon-hover {\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t.icon-default {\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n  }\n  &.fullscreen {\n    display: none;\n  }\n\n  .unread {\n    background-color: red;\n    padding: 3px;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    aspect-ratio: 1 / 1;\n    border-radius: 200px;\n    color: #ffffff;\n    position: absolute;\n    top: -4px;\n    right: -2px;\n    font-size: 11px !important;\n    line-height: 0.5rem !important;\n    flex-direction: row;\n    align-content: center;\n    justify-content: center;\n    align-items: center;\n    -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    animation: pulseAnimation 1.5s infinite;\n    @keyframes pulseAnimation {\n      0% {\n        transform: scale(1);\n      }\n      50% {\n        transform: scale(1.1);\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  }\n"],["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #08DE9E;\n  width: 50px;\n  height: 50px;\n  border-radius: 100px;\n  cursor: pointer;\n  -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -webkit-user-select: none;\n  user-select: none;  \n  img {\n    position: absolute;\n    -moz-transition: all 0.3s ease;\n    transition: all 0.3s ease;\n\t\t&.icon-hover {\n      width: 15px;\n      height: 15px;\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n\t\t&.icon-default {\n      width: 20px;\n      height: 20px;\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n  }\n  &:hover {\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  }\n  &.open {\n\t\t.icon-hover {\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t.icon-default {\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n  }\n  &.fullscreen {\n    display: none;\n  }\n\n  .unread {\n    background-color: red;\n    padding: 3px;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    aspect-ratio: 1 / 1;\n    border-radius: 200px;\n    color: #ffffff;\n    position: absolute;\n    top: -4px;\n    right: -2px;\n    font-size: 11px !important;\n    line-height: 0.5rem !important;\n    flex-direction: row;\n    align-content: center;\n    justify-content: center;\n    align-items: center;\n    -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    animation: pulseAnimation 1.5s infinite;\n    @keyframes pulseAnimation {\n      0% {\n        transform: scale(1);\n      }\n      50% {\n        transform: scale(1.1);\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  }\n"]))),q=m.div(O||(O=e(["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  width: 350px;\n  height: 550px;\n  border-radius: 5px;\n  -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  max-width: 0px;\n  max-height: 0px;\n  overflow: hidden;\n  transition: max-height 0.5s ease-in-out;\n  &.show {\n    max-width: 350px;\n    max-height: 540px;\n  }\n  .cover {\n    background: rgba(255, 255, 255, 0.2);\n    position: absolute;\n    z-index: 92;\n    padding: 14px;\n    width: calc(100% - 28px);\n    height: calc(100% - 93px);\n    border-radius: 5px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    -webkit-user-select: none;\n    user-select: none;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    &.closed {\n      background: rgba(255, 255, 255, 0.9);\n      button { margin-top: 2rem; }\n    }\n    &.upload {\n      background: rgba(9, 222, 158, 0.9);\n      button { margin-top: 2rem; }\n    }\n    animation: showCover .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n      \n    @keyframes showCover {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n  }\n  .files {\n    margin: 0.5rem;\n    border-radius: 5px;\n    background-color: #c1f7e7;\n    padding: 0rem;\n    overlay: none;\n    display: flex;  \n    flex-direction: column;\n    justify-content: center;\n    gap: 0rem;\n    .file {\n      display: flex;\n      flex-direction: row;\n      border-radius: 3px;\n      justify-content: space-between;\n      align-items: center;\n      margin: 0.2rem;\n      padding: 0.2rem 0.5rem;\n      gap: 14px;\n      &:hover {\n        background-color: #ffffff;\n      }\n      .fileName {\n        font-size: 11px !important;\n        line-height: 12px;\n        word-break: keep-all;\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .action {\n        width: 12px;\n        height: 12px;\n        opacity: 0.7;\n        cursor: pointer;\n        &:hover {\n          opacity: 1;\n        }\n      }\n\n    }\n  }\n  &.fullscreen {\n    max-width: 100% !important;\n    max-height: 100% !important;\n    position: fixed;\n    left: 0px;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    // @media (max-width: 768px) {\n    //   #listOfMessages {\n    //     max-height: calc(100vh - 210px);\n    //   }\n    //   .chat-content-container {\n    //     padding-bottom: 4rem;\n    //   }\n    // }\n    .cover {\n        &.closed {\n            height: 100%;\n        }\n    }\n  }\n  @media (max-width: 576px) {\n    position: fixed;\n    z-index: 100;\n    bottom: 0px;\n    right: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    &.show {\n      max-width: 100%;\n      max-height: 100%;\n    }\n    .cover {\n      &.closed, &.upload {\n        height: 100%;\n      }\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  width: 350px;\n  height: 550px;\n  border-radius: 5px;\n  -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  max-width: 0px;\n  max-height: 0px;\n  overflow: hidden;\n  transition: max-height 0.5s ease-in-out;\n  &.show {\n    max-width: 350px;\n    max-height: 540px;\n  }\n  .cover {\n    background: rgba(255, 255, 255, 0.2);\n    position: absolute;\n    z-index: 92;\n    padding: 14px;\n    width: calc(100% - 28px);\n    height: calc(100% - 93px);\n    border-radius: 5px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    -webkit-user-select: none;\n    user-select: none;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    &.closed {\n      background: rgba(255, 255, 255, 0.9);\n      button { margin-top: 2rem; }\n    }\n    &.upload {\n      background: rgba(9, 222, 158, 0.9);\n      button { margin-top: 2rem; }\n    }\n    animation: showCover .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n      \n    @keyframes showCover {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n  }\n  .files {\n    margin: 0.5rem;\n    border-radius: 5px;\n    background-color: #c1f7e7;\n    padding: 0rem;\n    overlay: none;\n    display: flex;  \n    flex-direction: column;\n    justify-content: center;\n    gap: 0rem;\n    .file {\n      display: flex;\n      flex-direction: row;\n      border-radius: 3px;\n      justify-content: space-between;\n      align-items: center;\n      margin: 0.2rem;\n      padding: 0.2rem 0.5rem;\n      gap: 14px;\n      &:hover {\n        background-color: #ffffff;\n      }\n      .fileName {\n        font-size: 11px !important;\n        line-height: 12px;\n        word-break: keep-all;\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .action {\n        width: 12px;\n        height: 12px;\n        opacity: 0.7;\n        cursor: pointer;\n        &:hover {\n          opacity: 1;\n        }\n      }\n\n    }\n  }\n  &.fullscreen {\n    max-width: 100% !important;\n    max-height: 100% !important;\n    position: fixed;\n    left: 0px;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    // @media (max-width: 768px) {\n    //   #listOfMessages {\n    //     max-height: calc(100vh - 210px);\n    //   }\n    //   .chat-content-container {\n    //     padding-bottom: 4rem;\n    //   }\n    // }\n    .cover {\n        &.closed {\n            height: 100%;\n        }\n    }\n  }\n  @media (max-width: 576px) {\n    position: fixed;\n    z-index: 100;\n    bottom: 0px;\n    right: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    &.show {\n      max-width: 100%;\n      max-height: 100%;\n    }\n    .cover {\n      &.closed, &.upload {\n        height: 100%;\n      }\n    }\n  }\n"]))),J=m.div(M||(M=e(["\n  background-color: #08DE9E;\n  width: calc(100% - 30px);\n  padding: 15px;\n  color: #ffffff;\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 15px;\n  -webkit-box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  z-index: 91;\n  img {\n    width: 30px;\n    height: 30px;\n    -object-fit: fill;\n    object-fit: fill;\n    padding: 7px;\n    border-radius: 200px;\n    cursor: pointer;\n    background-color: #FFFFFF;\n    &.close {\n      display: none;\n      background-color: transparent;\n    }\n  }\n  button {\n    font-size: 0.9rem;\n  }\n  a {\n    &:hover {\n      text-decoration: none !important;\n      cursor: pointer;\n    }\n  }\n  span {\n    padding: 0px;\n  }\n  @media (max-width: 576px) {\n    img {\n      &.close {\n        display: block;\n      }\n    }\n  }\n"],["\n  background-color: #08DE9E;\n  width: calc(100% - 30px);\n  padding: 15px;\n  color: #ffffff;\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 15px;\n  -webkit-box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  z-index: 91;\n  img {\n    width: 30px;\n    height: 30px;\n    -object-fit: fill;\n    object-fit: fill;\n    padding: 7px;\n    border-radius: 200px;\n    cursor: pointer;\n    background-color: #FFFFFF;\n    &.close {\n      display: none;\n      background-color: transparent;\n    }\n  }\n  button {\n    font-size: 0.9rem;\n  }\n  a {\n    &:hover {\n      text-decoration: none !important;\n      cursor: pointer;\n    }\n  }\n  span {\n    padding: 0px;\n  }\n  @media (max-width: 576px) {\n    img {\n      &.close {\n        display: block;\n      }\n    }\n  }\n"]))),K=m.div(U||(U=e(["\n  width: 100%;\n  padding: 0;\n  color: #000000;\n  flex: 1;\n  display: flex;\n  flex-direction: column-reverse;\n  overflow-x: hidden;\n  .chat-content-container {\n    padding-bottom: 1.8rem;\n  }\n  button {\n    display: block;\n    background-color: #c1f7e7;\n    flex: 0;\n    padding: 5px;\n    border-radius: 5px;\n    color: #263238;\n    font-weight: 100;\n    font-size: 1rem;\n    line-height: 18px;\n    font-weight: 100;\n    min-width: 40%;\n    border: 2px solid #08DE9E;\n    cursor: pointer;\n    &:hover {\n      background-color: #08DE9E;\n    }\n  }\n  @media (max-width: 768px) {\n    overflow-y: hidden;\n    .chat-content-container {\n      overflow-y: auto;\n      // padding-bottom: 0;\n    }\n  }\n"],["\n  width: 100%;\n  padding: 0;\n  color: #000000;\n  flex: 1;\n  display: flex;\n  flex-direction: column-reverse;\n  overflow-x: hidden;\n  .chat-content-container {\n    padding-bottom: 1.8rem;\n  }\n  button {\n    display: block;\n    background-color: #c1f7e7;\n    flex: 0;\n    padding: 5px;\n    border-radius: 5px;\n    color: #263238;\n    font-weight: 100;\n    font-size: 1rem;\n    line-height: 18px;\n    font-weight: 100;\n    min-width: 40%;\n    border: 2px solid #08DE9E;\n    cursor: pointer;\n    &:hover {\n      background-color: #08DE9E;\n    }\n  }\n  @media (max-width: 768px) {\n    overflow-y: hidden;\n    .chat-content-container {\n      overflow-y: auto;\n      // padding-bottom: 0;\n    }\n  }\n"]))),Z=m.form(D||(D=e(["\n  background-color: #f4f7f9;\n  width: calc(100% - 10px);\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  padding: 5px;\n  .action {\n    width: 1.3rem;\n    height: 1.3rem;\n    cursor: pointer;\n    opacity: 0.7;\n    -webkit-user-select: none;\n    user-select: none;\n    &:hover {\n      opacity: 0.7;\n    }\n  }\n  input {\n    background-color: rgba(0,0,0,0);\n    border: none;\n    border-bottom: 1px solid rgba(0,0,0,0);\n    outline: 0px;\n    padding: 0px;\n    margin-left: 15px;\n    font-size: 0.9rem;\n    font-weight: 100;\n    flex: 1;\n    &.invalid {\n      border-bottom: 1px solid red;\n    }\n  }\n  button {\n    min-width: 90px;\n    background-color: #09de9e;\n    flex: 0;\n    font-size: 0.9rem;\n    &:hover {\n      background-color: #08c98f;\n    }\n    &:disabled, &:disabled:hover {\n      background-color: rgba(0,0,0,0.05);\n      color: #aabbcc !important;\n    }\n  }\n"],["\n  background-color: #f4f7f9;\n  width: calc(100% - 10px);\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  padding: 5px;\n  .action {\n    width: 1.3rem;\n    height: 1.3rem;\n    cursor: pointer;\n    opacity: 0.7;\n    -webkit-user-select: none;\n    user-select: none;\n    &:hover {\n      opacity: 0.7;\n    }\n  }\n  input {\n    background-color: rgba(0,0,0,0);\n    border: none;\n    border-bottom: 1px solid rgba(0,0,0,0);\n    outline: 0px;\n    padding: 0px;\n    margin-left: 15px;\n    font-size: 0.9rem;\n    font-weight: 100;\n    flex: 1;\n    &.invalid {\n      border-bottom: 1px solid red;\n    }\n  }\n  button {\n    min-width: 90px;\n    background-color: #09de9e;\n    flex: 0;\n    font-size: 0.9rem;\n    &:hover {\n      background-color: #08c98f;\n    }\n    &:disabled, &:disabled:hover {\n      background-color: rgba(0,0,0,0.05);\n      color: #aabbcc !important;\n    }\n  }\n"]))),Q=m.div(R||(R=e(["\n  width: 100%;\n  display: flex;\n  flex-direction: row-reverse;\n  small {\n    position: absolute;\n    margin-top: -1.6rem;\n    margin-right: 14px;\n    font-size: 11px !important;\n    font-weight: 100;\n    line-height: 12px;\n    color: #015e9c;\n    background-color: #ddf0fc;\n    border: 1px solid #ffffff;\n    border-radius: 100px;\n    padding: 5px 15px;\n    z-index: 50;\n  }\n"],["\n  width: 100%;\n  display: flex;\n  flex-direction: row-reverse;\n  small {\n    position: absolute;\n    margin-top: -1.6rem;\n    margin-right: 14px;\n    font-size: 11px !important;\n    font-weight: 100;\n    line-height: 12px;\n    color: #015e9c;\n    background-color: #ddf0fc;\n    border: 1px solid #ffffff;\n    border-radius: 100px;\n    padding: 5px 15px;\n    z-index: 50;\n  }\n"]))),X=function(e){var m,N=e.host,T=e.clientId,_=e.clientSecret,A=e.customToken,O=e.websocketUrl;e.postcodeSchemaId,e.source;var M=e.fullscreen,U=void 0!==M&&M,D=i(p),R=l(null),X=c(!1),$=X[0],ee=X[1],ne=c(null),te=ne[0],oe=ne[1],re=c(!1),ae=re[0],ie=re[1],le=c(null);le[0];var ce=le[1],se=c(null),de=se[0],ue=se[1],me=c(null),pe=me[0],ge=me[1],fe=c(!1),he=fe[0],xe=fe[1],ve=c(!1),be=ve[0],we=ve[1],ye=c(!1),Ie=ye[0],Se=ye[1],Ee=c(U),Ce=Ee[0],ke=Ee[1],Ne=c({}),Te=Ne[0],_e=Ne[1],Ae=c(""),Oe=Ae[0],Me=Ae[1],Ue=c(null),De=Ue[0],Re=Ue[1],Le=c(null),je=Le[0],Fe=Le[1],ze=c(null),We=ze[0],Be=ze[1],Ge=c([]),Pe=Ge[0],Ye=Ge[1],Ve=c(!1),He=Ve[0],qe=Ve[1],Je=c(!1),Ke=Je[0],Ze=Je[1],Qe=c(null),Xe=Qe[0],$e=Qe[1],en=c(!1),nn=en[0],tn=en[1],on=c(null),rn=on[0],an=on[1],ln=c(!1),cn=ln[0],sn=ln[1],dn=c(!0),un=dn[0],mn=dn[1],pn=c(null),gn=pn[0],fn=pn[1],hn=c(!1),xn=hn[0],vn=hn[1],bn=c(-1),wn=bn[0],yn=bn[1],In=l("");l(0);var Sn=l(null),En=l(Ce),Cn=l(!0),kn=["jpg","jpeg","png","pdf","gif","txt","mp4","mp3"],Nn=w.useTime({interval:1}).seconds,Tn=c(!1),_n=Tn[0],An=Tn[1],On=l(null),Mn=[{createdAt:h(new Date).format(),message:null,fromId:"Client",senderType:"CUSTOMER",form:{type:"buttons",value:[{title:"I am the account holder",action:"old_customer"},{title:"I am not the account holder",action:"not_customer"},{title:"I am new here",action:"new_customer"}]},messageId:"1"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"Welcome to YouFibre!<br />We're going to ask you some questions to ensure we get you through to the right team, so please bear with us!<br />Are you the account holder?",form:null,messageId:"0"}],Un={SALES:"Sales",TECH_SUPPORT:"Tech Support",INSTALLS_AND_SERVICE_VISITS:"Installs & Service Visits",MANAGE_MY_ACCOUNT:"Manage My Account",BILLING:"Billing",CANCELLATION:"Cancellation",COMPLAINT:"Complaint"},Dn={NEW_CUSTOMER:"New customer",ACCOUNT_HOLDER:"Account holder",NOT_ACCOUNT_HOLDER:"Not the account holder"},Rn=c(Mn),Ln=Rn[0],jn=Rn[1],Fn=c(null),zn=Fn[0],Wn=Fn[1],Bn=l(Ln),Gn=l(null),Pn=l(null),Yn=function(){try{Gn.current&&Gn.current.scrollIntoView({behavior:"smooth"})}catch(e){}};s(function(){if("undefined"!=typeof document&&"undefined"!=typeof window){if(xn&&-1!==wn){localStorage.getItem("title")||localStorage.setItem("title","undefined"!=typeof document&&document.getElementsByTagName("title")[0].textContent||"");return Sn.current=window.setInterval(function(){var e=In.current;if(e){var n=(wn+1)%e.length;document.title=e.slice(n)+" "+e.slice(0,n),yn(n)}},200),function(){Sn.current&&clearInterval(Sn.current)}}Sn.current=null,In.current=""}},[wn]),s(function(){I(N,T,_,A),S.get("https://strapi.youfibre.com/api/information").then(function(e){D.setAppMessages(e.data)}).catch(function(e){D.setAppMessages(null)}),Jn();var e="undefined"!=typeof window?window.location.href:"",n=new MutationObserver(function(){"undefined"!=typeof window&&e!==window.location.href&&(e=window.location.href,Jn())});return"undefined"!=typeof document&&n.observe(document.body,{childList:!0,subtree:!0}),function(){return n.disconnect()}},[]),s(function(){fn(D.appMessages),mn(!qn())},[D.appMessages]),s(function(){mn(!qn())},[Nn]),s(function(){!un&&!pe&&nt()},[un]);var Vn=(new Date).toLocaleString("en-GB",{timeZone:"Europe/London",hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1}),Hn=function(e){if(e){var n=e.split(":").map(Number);return 3600*n[0]+60*n[1]+n[2]}},qn=function(){var e,n,t,o,r;if((null===(e=D.appMessages)||void 0===e?void 0:e.chat_off_mode_toggle)&&Vn&&(null===(n=D.appMessages)||void 0===n?void 0:n.chat_off_mode_start)&&(null===(t=D.appMessages)||void 0===t?void 0:t.chat_off_mode_end)){var a=Hn(Vn),i=Hn(null===(o=D.appMessages)||void 0===o?void 0:o.chat_off_mode_start),l=Hn(null===(r=D.appMessages)||void 0===r?void 0:r.chat_off_mode_end);return i<l?a>=i&&a<l:a>=i||a<l}return!1},Jn=function(){"undefined"!=typeof window&&an(new URLSearchParams(window.location.search))};s(function(){if(""===(null==rn?void 0:rn.get("youFibreChat"))){n(void 0,void 0,void 0,function(){return o(this,function(e){switch(e.label){case 0:return[4,new Promise(function(e){var n;localStorage.setItem("chatUsername",rn.get("chatUsername")),localStorage.setItem("chatUserId",rn.get("chatUserId")),localStorage.setItem("chatSessionId",rn.get("chatSessionId")),localStorage.setItem("conversationId",rn.get("conversationId")),localStorage.setItem("caseId",rn.get("caseId")),localStorage.setItem("participantId",rn.get("participantId")),Re(rn.get("participantId")),D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:t(t({},(null===(n=D.goGetRegistrationData())||void 0===n?void 0:n.twilioChat)||null),{chatUsername:rn.get("chatUsername")||null,chatSessionId:rn.get("chatSessionId")||null,chatUserId:rn.get("chatUserId")||null,conversationId:rn.get("conversationId")||null,caseId:rn.get("caseId")||null,participantId:rn.get("participantId")||null})})),e()})];case 1:return e.sent(),Kn(),[2]}})})}else rn&&0===Object.keys(rn).length&&Kn()},[rn]);var Kn=function(){n(void 0,void 0,void 0,function(){var e,n,r,a,i;return o(this,function(o){switch(o.label){case 0:if(!localStorage.getItem("conversationId"))return[3,4];o.label=1;case 1:return o.trys.push([1,3,,4]),[4,y.get("ChatModule/v1.0/gateway/conversation/".concat(localStorage.getItem("conversationId")))];case 2:return(e=o.sent())?("CLOSED"===(null===(a=null===(r=null==e?void 0:e.data)||void 0===r?void 0:r.properties)||void 0===a?void 0:a.Status)?nt():D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:t(t({},(null===(i=D.goGetRegistrationData())||void 0===i?void 0:i.twilioChat)||null),{chatUsername:localStorage.getItem("chatUsername")||null,chatSessionId:localStorage.getItem("chatSessionId")||null,chatUserId:localStorage.getItem("participantId")||null,conversationId:localStorage.getItem("conversationId")||null,caseId:localStorage.getItem("caseId")||null,participantId:localStorage.getItem("participantId")||null})})),xe(!1),[3,4]):(console.log("Can't check conversation!"),[2,null]);case 3:return n=o.sent(),console.log("Error fetching conversation status: ",n),[3,4];case 4:return[2]}})}),localStorage.removeItem("title"),ue(localStorage.getItem("conversationId")||null),ge(localStorage.getItem("caseId")||null),Re(localStorage.getItem("participantId")||null),On.current=localStorage.getItem("agentId")||null,$e(localStorage.getItem("chatSessionId")||null),localStorage.getItem("conversationId")&&localStorage.getItem("participantId")&&ie(!0),localStorage.getItem("chatUsername")&&Be(localStorage.getItem("chatUsername")),localStorage.getItem("chatUserType")&&Fe(localStorage.getItem("chatUserType")||"NEW_CUSTOMER"),_e({full_name:localStorage.getItem("chatUsername"),email:localStorage.getItem("chatEmail"),category:localStorage.getItem("chatCategory"),address:localStorage.getItem("chatAddress"),last_bill:localStorage.getItem("chatLastBill")}),localStorage.getItem("chatMessages")?jn(JSON.parse(localStorage.getItem("chatMessages")||"")):localStorage.setItem("chatMessages",JSON.stringify(Ln)),localStorage.getItem("conversationId")&&Zn(localStorage.getItem("conversationId")),document.addEventListener("visibilitychange",function(){var e;"visible"===document.visibilityState?(Cn.current=!0,"undefined"!=typeof document&&En.current&&localStorage.getItem("title")&&(vn(!1),yn(-1),sn(!1),document.title=localStorage.getItem("title")||"",null===(e=document.getElementById("inputMessage"))||void 0===e||e.focus(),setTimeout(function(){return localStorage.removeItem("title")},1e3)),localStorage.getItem("conversationId")&&Zn(localStorage.getItem("conversationId"))):Cn.current=!1})},Zn=function(e,t){return n(void 0,void 0,void 0,function(){var t,r,a,i;return o(this,function(l){switch(l.label){case 0:return l.trys.push([0,6,,7]),e?[4,y.get("NotificationModule/v2.0/records/Conversation/".concat(e,'/links?targetEntities=["Message"]'))]:[3,4];case 1:return(t=l.sent())?[4,Promise.all(null===(i=null==t?void 0:t.Message)||void 0===i?void 0:i.dbRecords.map(function(e){return n(void 0,void 0,void 0,function(){var n,t,r,a,i;return o(this,function(o){switch(o.label){case 0:return n={createdAt:null==e?void 0:e.createdAt,from:null===(t=null==e?void 0:e.properties)||void 0===t?void 0:t.From},[4,Xn(null===(r=null==e?void 0:e.properties)||void 0===r?void 0:r.Files)];case 1:return[2,(n.files=o.sent(),n.message=null===(a=null==e?void 0:e.properties)||void 0===a?void 0:a.Body,n.form=null,n.messageId=null==e?void 0:e.id,n.fromId=null===(i=null==e?void 0:e.createdBy)||void 0===i?void 0:i.id,n.senderType="EVENT"===e.type?"EVENT":e.properties.SenderType,n)]}})})}))]:[3,3];case 2:r=l.sent(),!En.current&&Object.keys(r).length>0&&sn(!0),r=r.sort(function(e,n){return new Date(n.createdAt).getTime()-new Date(e.createdAt).getTime()}),jn(r),localStorage.setItem("allMessages",JSON.stringify(r)),l.label=3;case 3:return[3,5];case 4:jn(Mn),l.label=5;case 5:return[3,7];case 6:return a=l.sent(),console.log("Error fetching messages:",a),[3,7];case 7:return[2]}})})};s(function(){"undefined"!=typeof document&&(U?(document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden"):(document.body.style.overflow="",document.documentElement.style.overflow=""))},[U]);var Qn;s(function(){var e,n,t,o;if(De){var r=Xe||C();$e(r),localStorage.setItem("chatSessionId",r),Pn.current||(Pn.current=(void 0===(o=r)&&(o=null),d("".concat(O,"/ChatWebsocketModule/TwilioChatWebsocket/v1.0"),{path:"/ws",query:{clientId:o},reconnection:!0,reconnectionAttempts:1/0,reconnectionDelay:1e3,reconnectionDelayMax:5e3,timeout:1e4}))),null===(e=Pn.current)||void 0===e||e.on("connect",function(){console.log("Connected to WebSocket server")}),null===(n=Pn.current)||void 0===n||n.on("connect_error",function(e){console.log("Connect error due to ".concat(e.message)),Pn.current=null}),null===(t=Pn.current)||void 0===t||t.on("disconnect",function(e){console.log("Disconnected: ".concat(e)),Pn.current=null})}},[De]),s(function(){n(void 0,void 0,void 0,function(){var e,t;return o(this,function(r){return Pn.current&&pe&&(Pn.current.emit("joinRoom",pe),!Pn.current.listeners("case-event-".concat(pe)).length&&(null===(e=Pn.current)||void 0===e||e.on("case-event-".concat(pe),function(e){if(e.caseId===localStorage.getItem("caseId"))switch(e.type){case"CASE_UPDATED":On.current=e.data.properties.OwnerId,localStorage.setItem("agentId",On.current||"");break;case"CONVERSATION_CLOSED":Se(!0);break;case"MESSAGE_CREATED":$n(e.data)}})),!Pn.current.listeners("web-chat-input-".concat(pe)).length&&(null===(t=Pn.current)||void 0===t||t.on("web-chat-input-".concat(pe),function(e){return n(void 0,void 0,void 0,function(){return o(this,function(n){return e.caseId===pe&&"AGENT"===e.sender&&An(!0),[2]})})}))),[2]})})},[pe]),s(function(){n(void 0,void 0,void 0,function(){return o(this,function(e){try{Qn=!!_n&&setTimeout(function(){An(!1),clearTimeout(Qn)},1500)}catch(e){console.log("Error fetching data:",e)}return[2]})})},[_n]),s(function(){Bn.current=Ln},[Ln]),s(function(){n(void 0,void 0,void 0,function(){var e;return o(this,function(n){try{Ln.length&&pe&&Pn.current&&(null===(e=Pn.current)||void 0===e||e.emit("web-chat-input",{caseId:pe,conversationId:de,message:Oe,sender:"CUSTOMER"}))}catch(e){console.log("Error fetching data:",e)}return[2]})})},[Oe]);var Xn=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n(void 0,r([],e,!0),void 0,function(e){var n,t,a;return void 0===e&&(e=null),o(this,function(o){switch(o.label){case 0:return o.trys.push([0,4,,5]),n=[],e?[4,y.get("SchemaModule/v1.0/db/File/many?ids=".concat(e))]:[3,2];case 1:return(t=o.sent())?(Object.keys(t).length&&t.map(function(e){var t,o;n=r(r([],n,!0),[{id:(null==e?void 0:e.id)||"",type:(null===(t=null==e?void 0:e.properties)||void 0===t?void 0:t.Mimetype)||"",url:(null===(o=null==e?void 0:e.properties)||void 0===o?void 0:o.Url)||""}],!1)}),[2,0!==Object.keys(n).length?n:[]]):(console.log("Can't close conversation!"),[3,3]);case 2:return[2,[]];case 3:return[3,5];case 4:return a=o.sent(),console.log("Error fetching files:",a),[2,[]];case 5:return[2]}})})},$n=function(e){return n(void 0,void 0,void 0,function(){var n,t,r,a,i;return o(this,function(o){switch(o.label){case 0:if(!e||Bn.current.some(function(n){return n.messageId===e.id}))return[3,6];o.label=1;case 1:return o.trys.push([1,5,,6]),"CLOSED"===(null===(i=null===(a=null===(r=null==e?void 0:e.Conversation)||void 0===r?void 0:r.dbRecords[0])||void 0===a?void 0:a.properties)||void 0===i?void 0:i.Status)&&Se(!0),n=[],e.properties.Files?[4,Xn(e.properties.Files)]:[3,3];case 2:return n=o.sent(),0===Object.keys(n).length&&(n=null),et(e,n),[3,4];case 3:et(e,n),o.label=4;case 4:return[3,6];case 5:return t=o.sent(),console.log("Error fetching message:",t),[3,6];case 6:return[2]}})})},et=function(e,n){var t={senderType:"EVENT"!==e.type?e.properties.SenderType:e.type,createdAt:h(new Date).format(),from:"EVENT"!==e.type?e.properties.From:e.type,message:"EVENT"!==e.type?e.properties.Body:e.title,form:null,files:n,messageId:e.id,fromId:"EVENT"!==e.type?e.createdBy.id:"YouFibre"};En.current&&Cn.current||sn(!0),Wn(r(r([],zn||[],!0),[t],!1)),setTimeout(function(){Wn(null),jn(r([t],Bn.current,!0)),localStorage.setItem("chatMessages",JSON.stringify(r([t],Bn.current,!0))),xe(!1),Yn()},400)};s(function(){if("undefined"!=typeof document)if(localStorage.getItem("title")||localStorage.setItem("title","undefined"!=typeof document&&document.getElementsByTagName("title")[0].textContent||""),cn){var e=new Audio(G.toString());e.setAttribute("crossorigin","anonymous"),e.play().catch(function(e){console.log("User interaction required before playing sound")}),document.title="New message | YouFibre"}else document.title=localStorage.getItem("title")||"",Yn()},[cn]),s(function(){n(void 0,void 0,void 0,function(){var e;return o(this,function(n){try{"undefined"!=typeof window&&"undefined"!=typeof document&&(Ce?(window.innerWidth<577&&(document.body.style.overflow="hidden"),Sn.current&&clearInterval(Sn.current),localStorage.getItem("title")&&(document.title=localStorage.getItem("title")||""),vn(!1),yn(-1),sn(!1),null===(e=document.getElementById("inputMessage"))||void 0===e||e.focus(),setTimeout(function(){return localStorage.removeItem("title")},1e3)):(document.body.style.overflow="",tn(!1),Se(!1))),Yn(),En.current=Ce}catch(e){console.log("Error fetching data:",e)}return[2]})})},[Ce]);var nt=function(){Pn.current&&pe&&(Pn.current.emit("leaveRoom",pe),Pn.current.removeAllListeners()),ue(null),ge(null),Ye([]),Ze(!Ke),ee(!1),oe(null),R.current=null,localStorage.removeItem("chatEmail"),localStorage.removeItem("conversationId"),localStorage.removeItem("caseId"),localStorage.removeItem("participantId"),localStorage.removeItem("chatUsername"),localStorage.removeItem("twilio_token"),localStorage.removeItem("chatMessages"),localStorage.removeItem("chatUserType"),localStorage.removeItem("chatCategory"),localStorage.removeItem("chatAddress"),localStorage.removeItem("chatLastBill"),localStorage.removeItem("agentId"),localStorage.removeItem("chatSessionId"),Be(null),Fe(null),Re(null),_e({}),xe(!1),ie(!0),ce(null),On.current=null,Me(""),localStorage.setItem("chatMessages",JSON.stringify(Mn)),Wn(null),jn(Mn),Yn(),U&&ke(!0),D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:null}))},tt=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n(void 0,r([],e,!0),void 0,function(e){var t,r;return void 0===e&&(e=null),o(this,function(a){if(Oe.length>0||e||Object.keys(Pe).length>0){"undefined"!=typeof document&&(null===(r=document.getElementById("inputMessage"))||void 0===r||r.focus()),(t=new u).append("conversationSid",localStorage.getItem("conversationId")),t.append("message",Oe||e),t.append("from",localStorage.getItem("chatUsername")),t.append("sender","CUSTOMER"),Me(""),we(!0);try{Object.keys(Pe).length>0&&Pe.map(function(e){return n(void 0,void 0,void 0,function(){return o(this,function(n){return t.append("files",e),[2]})})})}catch(e){}try{y.post("ChatModule/v1.0/gateway/conversation/".concat(localStorage.getItem("conversationId"),"/message/send"),t,{headers:{"Content-Type":"multipart/form-data"}}).then(function(e){e?(Ye([]),ie(!0),we(!1),xe(!1)):(mn(!qn()),nt(),console.log("Conversation is closed"))}).catch(function(e){mn(!qn()),console.log("Send a Message:",e)})}catch(e){console.log("Error loading SVG:",e)}}return[2]})})},ot=function(){return n(void 0,void 0,void 0,function(){var e,r,a;return o(this,function(i){switch(i.label){case 0:return xe(!0),localStorage.setItem("chatUsername",Te.full_name),Be(Te.full_name),localStorage.setItem("chatEmail",Te.email),localStorage.setItem("chatCategory",Te.category),localStorage.setItem("chatAddress",Te.address),localStorage.setItem("chatLastBill",Te.last_bill),[4,(p=Te.email,n(void 0,void 0,void 0,function(){var e;return o(this,function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),[4,y.get("ChatModule/v1.0/gateway/token?identity=".concat(p,"&source=twilio"))];case 1:return[2,n.sent()||null];case 2:return e=n.sent(),console.log("Error fetching token:",e),[3,3];case 3:return[2]}})}))];case 1:return(e=i.sent())?(localStorage.setItem("twilio_token",e),ce(e),[4,(l=Te.full_name,c=Te.email,s=Te.address,d=Te.last_bill,u=je,m=Te.category,n(void 0,void 0,void 0,function(){var e,n;return o(this,function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,y.post("ChatModule/v1.0/gateway/conversation/create",{source:"twilio",channel:"WEB_CHAT",identifier:c||null,DpaCustomerName:l||null,DpaCustomerEmail:c||null,DpaCustomerAddress:s||null,DpaCustomerLastBill:d||null,DpaCustomerType:u||null,DpaCustomerCategory:m||null})];case 1:return(e=t.sent())?[2,e||null]:(console.log("Can't create conversation!"),mn(!1),[2,null]);case 2:return n=t.sent(),mn(!1),x(n.message.replaceAll("OdinApiError:",""),"error"),[3,3];case 3:return[2]}})}))]):[3,3];case 2:return(r=i.sent())?(ie(!0),Re(null==r?void 0:r.participantId),localStorage.setItem("conversationId",null==r?void 0:r.conversationId),localStorage.setItem("caseId",null==r?void 0:r.caseId),localStorage.setItem("participantId",null==r?void 0:r.participantId),ge(null==r?void 0:r.caseId),ue(null==r?void 0:r.conversationId),D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:t(t({},null===(a=D.goGetRegistrationData())||void 0===a?void 0:a.twilioChat),{chatUsername:Te.full_name,chatSessionId:Xe,chatUserId:null==r?void 0:r.participantId,conversationId:null==r?void 0:r.conversationId,caseId:null==r?void 0:r.caseId,participantId:null==r?void 0:r.participantId})})),new Promise(function(e){jn(function(n){return e(),[]}),tt(R.current)}).then(function(){et({type:"EVENT",title:"Waiting for the agent to join the chat."},null)})):mn(!qn()),[3,4];case 3:xe(!1),i.label=4;case 4:return[2]}var l,c,s,d,u,m,p})})},rt=E({noClick:!0,noKeyboard:!0,onDrop:function(e){pe&&(e=(e=(e=e.filter(function(e){return e.size<10485760?e:x("Maximum file size is ".concat(10,"MB"),"error")})).filter(function(e){return kn.some(function(n){return e.name.endsWith(n)})?e:x("Unsupported File extension","error")})).filter(function(e){return 0===Object.keys(Pe.filter(function(n){return n.name===e.name})).length}),Object.keys(Pe).length+Object.keys(e).length<6?Ye(r(r([],Pe,!0),e,!0)):x("Maximum ".concat(5," files"),"warning"),qe(!1))}}),at=rt.getRootProps,it=rt.getInputProps,lt=rt.open;return a.createElement(a.Fragment,null,(void 0===process.env.GATSBY_TWILIO_CHAT_VERSION||"1"===process.env.GATSBY_TWILIO_CHAT_VERSION)&&a.createElement(V,null,a.createElement(q,t({className:"".concat(Ce?"show":""," ").concat(U?"fullscreen":"")},at(),{onDragOver:function(){return pe&&qe(!0)},onMouseLeave:function(){return qe(!1)}}),a.createElement(J,null,a.createElement(P,{className:"flex-center-justified"},a.createElement(k,{className:"p-0 m-0 flex-align-center"},a.createElement("div",{className:"flex-center-justified gap-5"},a.createElement("img",{src:L.toString(),alt:""}),a.createElement("span",{className:"dark-color"}," YouFibre"))),a.createElement(k,{className:"p-0 m-0 flex flex-align-center"},!de&&Object.keys(Ln).length>2&&a.createElement("button",{onClick:function(){return nt()},className:"small"},"Back"),de&&a.createElement("button",{onClick:function(){return tn(!0)},className:"small"},"End conversation"),!U&&a.createElement("img",{src:F.toString(),className:"close",onClick:function(){return ke(!Ce)},alt:""})))),a.createElement(v,{type:"chat"}),a.createElement(K,null,a.createElement(P,{className:"direction-column-reverse content-end chat-content-container"},a.createElement("div",{ref:Gn}),a.createElement(f,{messages:Ln,chatUsername:We,chatUserId:De,chatConversationId:de,resetFormValues:Ke,setChatForm:_e,buttonAction:function(e){if(un||pe||b())switch(e){case"new_customer":!function(){Fe("NEW_CUSTOMER"),localStorage.setItem("chatUserType","NEW_CUSTOMER");var e=r([{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:null,form:{type:"form",value:[{title:"Name",action:"full_name",placeholder:null,type:"text",required:!0},{title:"Email",action:"email",placeholder:null,type:"email",required:!0},{title:"Enter your Postcode",action:"address",placeholder:"Example: SW1 4EN",type:"zip",required:!0},{title:"What do you need help with today?",action:"category",placeholder:null,type:"select",required:!0,options:{SALES:"Sales",TECH_SUPPORT:"Tech Support",COMPLAINT:"Complaint"}},{title:"Submit",action:"submit_form",type:"button"}]},messageId:"3"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"We're so happy to hear from you! So that we can provide the best possible support, please provide us with the following information.",form:null,messageId:"2"},{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"Client",fromId:"Client",message:"I am new here",form:null,messageId:"1"}],Ln.slice(1),!0);Wn(r(r([],zn||[],!0),[e[0]],!1)),setTimeout(function(){Wn(null),jn(e)},400),localStorage.setItem("chatMessages",JSON.stringify(e))}();break;case"not_customer":!function(){Fe("NOT_ACCOUNT_HOLDER"),localStorage.setItem("chatUserType","NOT_ACCOUNT_HOLDER");var e=r([{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:null,form:{type:"form",value:[{title:"Name",action:"full_name",placeholder:null,type:"text",required:!0},{title:"Email",action:"email",placeholder:null,type:"email",required:!0},{title:"Enter your Postcode",action:"address",placeholder:"Example: SW1 4EN",type:"zip",required:!0},{title:"What do you need help with today?",action:"category",placeholder:null,type:"select",required:!0,options:{SALES:"Sales",TECH_SUPPORT:"Tech Support",COMPLAINT:"Complaint"}},{title:"Submit",action:"submit_form",type:"button"}]},messageId:"3"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"We're so happy to hear from you! So that we can provide the best possible support, please provide us with the following information.",form:null,messageId:"2"},{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"Client",fromId:"Client",message:"I am not the account holder",form:null,messageId:"1"}],Ln.slice(1),!0);Wn(r(r([],zn||[],!0),[e[0]],!1)),setTimeout(function(){Wn(null),jn(e)},400),localStorage.setItem("chatMessages",JSON.stringify(e))}();break;case"old_customer":!function(){Fe("ACCOUNT_HOLDER"),localStorage.setItem("chatUserType","ACCOUNT_HOLDER");var e=r([{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:null,form:{type:"form",value:[{title:"Name",action:"full_name",placeholder:null,type:"text",required:!0},{title:"Email",action:"email",placeholder:null,type:"email",required:!0},{title:"Enter your Postcode",action:"address",placeholder:"Example: SW1 4EN",type:"zip",required:!0},{title:"What was the total value of your last bill?",action:"last_bill",placeholder:"Total amount of your last bill",type:"number",required:!0},{title:"What do you need help with today?",action:"category",placeholder:null,type:"select",required:!0,options:{SALES:"Sales",TECH_SUPPORT:"Tech Support",INSTALLS_AND_SERVICE_VISITS:"Installs & Service Visits",MANAGE_MY_ACCOUNT:"Manage My Account",BILLING:"Billing",CANCELLATION:"Cancellation",COMPLAINT:"Complaint"}},{title:"Submit",action:"submit_form",type:"button"}]},messageId:"3"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"We're so happy to hear from you! So that we can provide the best possible support, please provide us with the following information.",form:null,messageId:"2"},{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"Client",fromId:"Client",message:"I am the account holder",form:null,messageId:"1"}],Ln.slice(1),!0);Wn(r(r([],zn||[],!0),[e[0]],!1)),setTimeout(function(){Wn(null),jn(e)},400),localStorage.setItem("chatMessages",JSON.stringify(e))}();break;case"submit_form":Te.full_name&&Te.address&&"/"!==Te.address&&Te.email&&("ACCOUNT_HOLDER"===localStorage.getItem("chatUserType")&&void 0!==Te.last_bill||"ACCOUNT_HOLDER"!==localStorage.getItem("chatUserType"))&&Te.category&&je&&(R.current="<b>".concat(Dn[je],"</b><br /><b>Full name</b>: ").concat(Te.full_name,"<br /><b>Email</b>: ").concat(Te.email,"<br /><b>Address</b>: ").concat(Te.address,"<br />").concat(void 0!==Te.last_bill?"<b>What was the total value of your last bill</b>: "+Te.last_bill+"<br />":"","<b>What do you need help with today</b>: ").concat(Un[Te.category]),n(void 0,void 0,void 0,function(){var e;return o(this,function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),xe(!0),[4,y.get("SupportModule/v1.0/Case/outage/verify?contactEmailAddress=".concat(Te.email)).then(function(e){var n,t,o;return xe(!1),200===(null===(n=null==e?void 0:e.data)||void 0===n?void 0:n.statusCode)&&(null===(t=null==e?void 0:e.data)||void 0===t?void 0:t.data)?(ee(!0),oe(null===(o=null==e?void 0:e.data)||void 0===o?void 0:o.message),!0):(ot(),!1)}).catch(function(e){console.log("Outage Message:",e)})];case 1:return n.sent(),[3,3];case 2:return e=n.sent(),console.log("Error fetching outage: ",e),[3,3];case 3:return[2]}})}))}else nt()},newMessages:zn,chatActive:un,API:y}))),_n&&Ce&&a.createElement(Q,null,a.createElement("small",null,"Agent is typing...")),ae&&!Ie&&!(null===(m=Ln[0])||void 0===m?void 0:m.form)&&a.createElement(Z,{className:"".concat(U?"form-fullscreen":"")},a.createElement(Y,null,a.createElement("input",{id:"inputMessage",className:"",autoComplete:"off",maxLength:500,onChange:function(e){return Me(e.target.value)},value:Oe,type:"text",placeholder:"Write a reply..."}),a.createElement("input",t({},it())),a.createElement("img",{className:"action",alt:"Add attachment",src:W.toString(),onClick:function(){return lt()}}),a.createElement("button",{type:"submit",onClick:function(e){return function(e){e.preventDefault(),tt()}(e)},disabled:be||!1},be?a.createElement("img",{src:z.toString(),width:16,height:16}):"Send"))),Object.keys(Pe).length>0&&a.createElement("div",{className:"files"},Pe.map(function(e){return a.createElement("div",{className:"file",key:e.name},a.createElement("div",{className:"fileName"},e.name),a.createElement("img",{className:"action",src:B.toString(),onClick:function(){return n=e.name,t=Pe.filter(function(e){return e.name!==n}),void Ye(t);var n,t},alt:""}))})),He&&pe&&Ce&&a.createElement("div",{className:"cover dark-color upload"},a.createElement("h4",{className:"mb-10"},"Drag and drop your files here"),a.createElement("p",{className:"mb-10"},"Maximum ",5," files. Limit ",10,"MB per file."),a.createElement("p",null,"Supported files: ",kn&&kn.map(function(e,n){return!["mp4","mp3"].some(function(n){return n===e})&&(0===n?e:", ".concat(e))}))),he&&Ce&&a.createElement("div",{className:"cover"},a.createElement("img",{className:"make-it-white",src:z.toString(),width:14,height:14,alt:""})),Ie&&Ce&&a.createElement("div",{className:"cover dark-color closed"},a.createElement("h4",{className:"mb-10"},"Conversation is closed"),a.createElement("span",{className:"mb-10"},"This chat has now closed. If you need any help, feel free to start a new chat.",a.createElement("br",null),"We're always happy to assist you!"),a.createElement("button",{onClick:function(){Se(!1),nt()}},"Create new")),$&&te&&a.createElement("div",{className:"cover dark-color closed"},a.createElement("h4",{className:"mb-10"},"Outage in your area"),a.createElement("span",{className:"mb-10"},te),a.createElement("button",{onClick:function(){nt()},className:"blue-bg"},"Got It - Close Chat"),a.createElement("button",{onClick:function(){ee(!1),oe(null),ot()}},"Still Need Help - Start Chat")),nn&&Ce&&a.createElement("div",{className:"cover dark-color closed"},a.createElement("h4",{className:"mb-10"},"Close conversation"),a.createElement("span",{className:"mb-10"},"Are you sure you want to end this conversation?"),a.createElement("button",{onClick:function(){tn(!1)}},"Cancel"),a.createElement("button",{onClick:function(){tn(!1),function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];n(void 0,r([],e,!0),void 0,function(e){var n;return void 0===e&&(e="CUSTOMER"),o(this,function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,y.post("ChatModule/v1.0/gateway/conversation/".concat(localStorage.getItem("conversationId"),"/close"),{closedBy:e})];case 1:return t.sent()?(nt(),[3,3]):(console.log("Can't close conversation!"),[2,null]);case 2:return n=t.sent(),console.log("Error closing conversation:",n),[3,3];case 3:return[2]}})})}("CUSTOMER"),nt()},className:"blue-bg"},"Confirm")),!un&&Ce&&!pe&&gn&&!b()&&a.createElement("div",{className:"cover dark-color closed"},a.createElement("h4",{className:"mb-10"},"Out of service"),a.createElement("span",{className:"mb-10",dangerouslySetInnerHTML:{__html:g(gn.chat_off_mode_text,{target:"_blank"}).replaceAll(/\r\n|\n/g,"<br />")}}),!U&&a.createElement("button",{onClick:function(){return ke(!1)}},"Close chat"))),a.createElement(H,{onClick:function(){return Ie&&(nt(),Se(!1)),ee(!$),void ke(!Ce)},className:"YFChat ".concat(Ce?"open":""," ").concat(U?"fullscreen":"")},a.createElement("img",{src:j.toString(),className:"icon-default",alt:""}),a.createElement("img",{src:F.toString(),className:"icon-hover",alt:""}),cn&&a.createElement("small",{className:"unread"},"1"))))};export{X as default};
 //# sourceMappingURL=index.js.map