@d19n/webchat 1.0.5 → 1.1.0

package/dist/assets/styles/app.scss

@@ -1,248 +1,280 @@
-* {
-    margin: 0px;
-    padding: 0px;
-    outline: 0px;
-}
 
-:root {
-  font-size: 16px;
-}
 
-body {
+.chat-body {
+
+
   width: 100%;
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 400;
-  line-height: 1.1rem;
+  line-height: 16px;
   font-family: "DM Sans";
-}
+  text-align: left;
 
-@for $i from 0 through 100 {
-  .fs-#{$i} {
-    font-size: $i * 1rem !important;
+  @for $i from 0 through 100 {
+    .fs-#{$i} { font-size: $i * 1px !important; }
+    .fw-#{$i} { font-weight: $i * 100 !important; }
+    .w-#{$i} { width: $i * 1% !important; }
+    .mt-#{$i} { margin-top: $i * 1px !important; }
+    .pt-#{$i} { padding-top: $i * 1px !important; }
+    .pb-#{$i} { padding-bottom: $i * 1px !important; }
+    .pl-#{$i} { padding-left: $i * 1px !important; }
+    .pr-#{$i} { padding-right: $i * 1px !important; }
+    .mb-#{$i} { margin-bottom: $i * 1px !important; }
+    .mv-#{$i} {
+      margin-top: $i * 1px !important;
+      margin-bottom: $i * 1px !important;
+    }
+    .mh-#{$i} {
+      margin-left: $i * 1px !important;
+      margin-right: $i * 1px !important;
+    }
+    .pv-#{$i} {
+      padding-top: $i * 1px !important;
+      padding-bottom: $i * 1px !important;
+    }
+    .ph-#{$i} {
+      padding-left: $i * 1px !important;
+      padding-right: $i * 1px !important;
+    }
+    .maxw-#{$i} { max-width: $i * 1% !important; }
+    .minw-#{$i} { min-width: $i * 1% !important; }
+    .maxh-#{$i} { max-height: $i * 1px !important; }
+    .minh-#{$i} { min-height: $i * 1px !important; }
+    .gap-#{$i} { gap: calc($i / 10) * 1rem !important; }
   }
-  .fw-#{$i} {
-    font-weight: $i * 100 !important;
+  .dark-bg { background-color: #07131e; }
+  .green-bg { background-color: #08DE9E; }
+  .white-color { color: #fff !important; }
+
+  .inline-block {
+    display: inline-block;
   }
-  .w-#{$i} {
-    width: $i * 1% !important;
+  .page-wrapper { overflow: hidden; }
+  a { text-decoration: none; }
+  .text-left { text-align: left; }
+  .text-center { text-align: center; }
+  .text-right { text-align: right; }
+
+  button {
+    border: none;
+    font-family: 'DM Sans' !important;
+    background-color: #c1f7e7;
+    color: #263238;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    padding: 4px 24px 4px 24px;
+    border-radius: 5px;
+    border: 2px solid #08DE9E;
+    transition: all 0.3s ease-in-out 0s;
+
+    span {
+      color: #07131e;
+      text-transform: uppercase;
+      font-size: 24px;
+      font-family: 'Abolition-Regular';
+    }
+
+    &.no-bg {
+        background: none !important;
+        border: none !important;
+        color: #07131e;
+        cursor: pointer;
+        padding: 0;
+        font: inherit;
+        text-decoration: none;
+        border-radius: 100px !important;
+
+        font-size: 19px !important;
+        font-weight: 500;
+        padding: 4px 24px !important;
+    }
+
+    &:hover {
+      background-color: #0ad296;
+
+      &.green-bg {
+        background-color: #000000 !important;
+        color: #ffffff !important;
+        text-transform: none !important;
+
+        &.sign-up {
+          background-color: #ffffff !important;
+          color: #07131e !important;
+          border-radius: 12px;
+        }
+      }
+
+      &.light-bg {
+        background-color: #000000 !important;
+        color: #ffffff !important;
+      }
+
+      &.no-bg {
+          background: #08DE9E !important;
+          border: #08DE9E !important;
+          color: #07131e;
+      }
+    }
+
+    &.medium-button {
+      font-size: 19px;
+      font-weight: 500;
+      min-width: 136px;
+      padding: 4px 24px 4px 24px;
+    }
+
+    &.big-button {
+      margin-right: 32px;
+      font-size: 30px;
+      padding: 0.32px 64px 0.32px 64px;
+    }
+
+    &.seeAll-button {
+      position: relative;
+      top: -48px;
+      float: right;
+    }
+
+    &.no-border {
+      border: none !important;
+    }
   }
-  .mt-#{$i} {
-    margin-top: $i * 1px !important;
+
+  .centered { 
+    position: relative;
+    margin: 0px auto;
   }
-  .pt-#{$i} {
-    padding-top: $i * 1px !important;
+  .justify-content-start { justify-content: start; }
+  .justify-content-end { justify-content: end; }
+  .justify-content-center { justify-content: center; }
+  .justify-content-space { justify-content: space-between; }
+  .flex-center-justified {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
   }
-  .pb-#{$i} {
-    padding-bottom: $i * 1px !important;
+  .flex-start-justified {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: start;
   }
-  .pl-#{$i} {
-    padding-left: $i * 1px !important;
+  .flex-end-justified {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+    align-items: center;
   }
-  .pr-#{$i} {
-    padding-right: $i * 1px !important;
+
+  .justify-center {
+    justify-content: center;
+    align-items: center;
   }
-  .mb-#{$i} {
-    margin-bottom: $i * 1px !important;
+
+  .justify-between {
+    justify-content: space-between;
+    align-self: center;
   }
-  .mv-#{$i} {
-    margin: $i * 1px  0 !important;
+
+  .align-bottom {
+    align-self: flex-end;
   }
-  .mh-#{$i} {
-    margin: 0 $i * 1px !important;
+
+  .align-center {
+    align-self: center;
   }
-  .pv-#{$i} {
-    padding: $i * 1px  0 !important;
+
+  .align-top {
+    align-items: flex-start;
   }
-  .ph-#{$i} {
-    padding: 0 $i * 1px !important;
+
+  .center-items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
   }
-  .maxw-#{$i} {
-    max-width: $i * 1% !important;
+
+
+  small { width: auto !important}
+  .position-relative { position: relative; }
+  .flex { display: flex; }
+  .flex-0 { flex: 0; }
+  .flex-1 { flex :1; }
+  .flex-auto { flex: 1 1 250px; }
+  .flex-align-center { align-items: center; }
+  .flex-column { flex-direction: column; }
+  .flexx-row { flex-direction: row; }
+  @media (max-width: 991px) {
+    .mobile-centered {
+      text-align: center !important;
+    }
+    .mobile-margin-auto {
+      margin: auto;
+    };
+    .reverse-on-mobile {
+      flex-direction: column-reverse !important;
+    }
+    .mobile-logo { display: block; }
+    .desktop-logo { display: none; }
   }
-  .minw-#{$i} {
-    min-width: $i * 1% !important;
+  @media (min-width: 992px) {
+    .mobile-logo { display: none; }
+    .desktop-logo { display: block; }
   }
-  .gap-#{$i} {
-    gap: calc($i / 10) * 1rem !important;
+  @media (max-width: 1050px) {
   }
-}
-.dark-bg { background-color: #07131e; }
-.green-bg { background-color: #08DE9E; }
-.white-color { color: #fff !important; }
-
-.inline-block {
-  display: inline-block;
-}
-.page-wrapper { overflow: hidden; }
-a { text-decoration: none; }
-.text-left { text-align: left; }
-.text-center { text-align: center; }
-.text-right { text-align: right; }
-
-button {
-  border: none;
-  font-family: 'DM Sans' !important;
-  background-color: #ffffff;
-  color: #07131e;
-  font-size: 1.2rem;
-  font-weight: 500;
-  padding: 0.25rem 1.5rem 0.25rem 1.5rem;
-  border-radius: 100px;
-  transition: all 0.3s ease-in-out 0s;
-
-  span {
-    color: #07131e;
-    text-transform: uppercase;
-    font-size: 1.5rem;
-    font-family: 'Abolition-Regular';
+  @media (min-width: 991px) {
   }
-
-  &:hover {
+  .bg-green {
     background-color: #08DE9E;
-    color: #07131e !important;
-
-    &.green-bg {
-      background-color: #000000 !important;
-      color: #ffffff !important;
-      text-transform: none !important;
-
-      &.sign-up {
-        background-color: #ffffff !important;
-        color: #07131e !important;
-        border-radius: 12px;
-      }
-    }
+  }
+  .dark-color {
+    color: #07131E !important;
+  }
+  .blue-bg {
+    background-color: #123EE0;
+    color: #fff !important;
+    border: #123EE0 !important;
 
-    &.light-bg {
-      background-color: #000000 !important;
-      color: #ffffff !important;
+    &:hover {
+      background-color: #4D6EE8;
+      color: #fff !important;
     }
   }
-
-  &.medium-button {
-    font-size: 1.2rem;
+  .bold { font-weight: 600; }
+  #filterSearch::placeholder {
+    color: #000;
+    font-size: 18px;
     font-weight: 500;
-    min-width: 136px;
-    padding: 0.25rem 1.5rem 0.25rem 1.5rem;
+    opacity: 1;
   }
 
-  &.big-button {
-    margin-right: 2rem;
-    font-size: 1.9rem;
-    padding: 0.2rem 4rem 0.2rem 4rem;
+  html, body {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0,0,0,0.3) transparent;
   }
 
-  &.seeAll-button {
-    position: relative;
-    top: -3rem;
-    float: right;
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
   }
 
-  &.no-border {
-    border: none !important;
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 3px;
   }
-}
 
-.centered { 
-  position: relative;
-  margin: 0px auto;
-}
-.justify-content-start { justify-content: start; }
-.justify-content-end { justify-content: end; }
-.justify-content-center { justify-content: center; }
-.justify-content-space { justify-content: space-between; }
-.flex-center-justified {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-}
-.flex-start-justified {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: start;
-}
-.flex-end-justified {
-  display: flex;
-  width: 100%;
-  justify-content: end;
-  align-items: center;
-}
-.position-relative { position: relative; }
-.flex { display: flex; }
-.flex-0 { flex: 0; }
-.flex-1 { flex :1; }
-.flex-auto { flex: 1 1 250px; }
-.flex-align-center { align-items: center; }
-.flex-column { flex-direction: column; }
-.flexx-row { flex-direction: row; }
-@media (max-width: 991px) {
-  .mobile-centered {
-    text-align: center !important;
-  }
-  .mobile-margin-auto {
-    margin: auto;
-  };
-  .reverse-on-mobile {
-    flex-direction: column-reverse !important;
-  }
-  .mobile-logo { display: block; }
-  .desktop-logo { display: none; }
-}
-@media (min-width: 992px) {
-  .mobile-logo { display: none; }
-  .desktop-logo { display: block; }
-}
-@media (max-width: 1050px) {
-}
-@media (min-width: 991px) {
-}
-.bg-green {
-  background-color: #08DE9E;
-}
-.dark-color {
-  color: #07131E !important;
-}
-.blue-bg {
-  background-color: #123EE0;
-  color: #fff !important;
-
-  &:hover {
-    background-color: #4D6EE8;
-    color: #fff !important;
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  @media (max-width: 1280px) {
+    span,
+    p {
+      font-size: 16px !important;
+    }
+    .mobile-centered { margin: auto; }
   }
-}
-.bold { font-weight: 600; }
-#filterSearch::placeholder {
-  color: #000;
-  font-size: 18px;
-  font-weight: 500;
-  opacity: 1;
-}
-
-html, body {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0,0,0,0.3) transparent;
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-@media (max-width: 1280px) {
-  span,
-  p {
-    font-size: 1rem !important;
-  }
-  .mobile-centered { margin: auto; }
 }

package/dist/context/ChatGlobalContext.d.ts

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+interface ChatGlobalContextType {
+    webchatData: any;
+    appMessages: any;
+    twilioChat: any;
+    twilioTimer: any;
+    twilioSettings: any;
+    showAgentBanner: boolean;
+    setShowAgentBanner: (data: boolean) => void;
+    showBusinessModal: boolean;
+    setShowBusinessModal: (data: boolean) => void;
+    goGetTwilioChat: () => any;
+    goSetTwilioChat: (twilioChat: any) => void;
+    goResetTwilioChat: () => void;
+    goSetTwilioTimer: (twilioTimer: any) => void;
+    goResetTwilioTimer: () => void;
+    goSetTwilioSettings: (twilioSettings: any) => void;
+    goResetTwilioSettings: () => void;
+    goSetWebchatData: (data: any) => void;
+    goResetWebchatData: () => void;
+    goSetRegistrationData: (registrationData: any) => void;
+    goResetRegistrationData: () => void;
+    goGetRegistrationData: () => any;
+    setAppMessages: (data: any) => void;
+}
+declare const ChatGlobalContext: React.Context<ChatGlobalContextType>;
+interface ChatGlobalProviderProps {
+    children: ReactNode;
+}
+export declare const ChatGlobalProvider: React.FC<ChatGlobalProviderProps>;
+export default ChatGlobalContext;

package/dist/index.d.ts

@@ -1,15 +1,9 @@
 import React from 'react';
 
 interface Props {
-    host: string;
-    clientId: string;
-    clientSecret: string;
-    websocketUrl: string;
-    postcodeSchemaId: string;
-    source: string;
+    side: string;
     fullscreen: boolean;
-    customToken?: string | undefined;
 }
-declare function App({ host, clientId, clientSecret, websocketUrl, postcodeSchemaId, source, fullscreen, customToken }: Props): React.JSX.Element;
+declare function App({ side, fullscreen }: Props): React.JSX.Element;
 
 export { App as default };