@d19n/webchat 1.0.3 → 1.0.5

package/dist/assets/images/svg/youfibre-upload.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<title>paperclip-vertical</title>
+<path d="M23.113 7.748h-0.002c-0 0-0.001 0-0.001 0-0.413 0-0.748 0.335-0.749 0.748v0l-0.029 14.197c0.004 0.084 0.006 0.183 0.006 0.282 0 1.812-0.755 3.448-1.967 4.611l-0.002 0.002c-1.134 1.011-2.639 1.629-4.287 1.629-0.030 0-0.059-0-0.088-0.001l0.004 0h-0.015c-0.028 0-0.061 0.001-0.094 0.001-1.64 0-3.136-0.611-4.275-1.618l0.007 0.006c-1.225-1.165-1.988-2.808-1.988-4.629 0-0.090 0.002-0.18 0.006-0.269l-0 0.013v-15.516c-0.003-0.056-0.004-0.122-0.004-0.188 0-2.341 1.898-4.239 4.239-4.239 0.066 0 0.131 0.002 0.196 0.004l-0.009-0c0.056-0.003 0.122-0.004 0.188-0.004 2.341 0 4.238 1.897 4.238 4.238 0 0.065-0.002 0.131-0.004 0.195l0-0.009-0.057 14.276c0.002 0.045 0.003 0.097 0.003 0.15 0 0.85-0.311 1.628-0.826 2.225l0.004-0.004c-0.411 0.439-0.994 0.712-1.641 0.713h-0.020c-0.654-0.006-1.241-0.29-1.648-0.74l-0.002-0.002c-0.489-0.586-0.785-1.347-0.785-2.178 0-0.076 0.002-0.151 0.007-0.225l-0.001 0.010v-10.344c0-0.414-0.336-0.75-0.75-0.75s-0.75 0.336-0.75 0.75v0 10.338c-0.018 0.146-0.029 0.315-0.029 0.486 0 2.221 1.741 4.035 3.932 4.152l0.010 0 0.034 0.002c0.001 0 0.003 0 0.005 0 1.073 0 2.040-0.452 2.721-1.176l0.002-0.002c0.766-0.858 1.235-1.996 1.235-3.244 0-0.053-0.001-0.107-0.003-0.16l0 0.008 0.057-14.283c0-7.775-11.844-7.775-11.844 0v15.518c-0.004 0.097-0.007 0.21-0.007 0.324 0 4.237 3.435 7.672 7.672 7.672 0.063 0 0.127-0.001 0.19-0.002l-0.009 0h0.017c0.024 0 0.053 0 0.082 0 2.038 0 3.898-0.767 5.305-2.029l-0.008 0.007c1.514-1.432 2.457-3.456 2.457-5.699 0-0.106-0.002-0.212-0.006-0.318l0 0.015 0.029-14.193c0-0.001 0-0.001 0-0.002 0-0.414-0.335-0.749-0.748-0.75h-0z"></path>
+</svg>

package/dist/assets/styles/app.scss

@@ -0,0 +1,248 @@
+* {
+    margin: 0px;
+    padding: 0px;
+    outline: 0px;
+}
+
+:root {
+  font-size: 16px;
+}
+
+body {
+  width: 100%;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.1rem;
+  font-family: "DM Sans";
+}
+
+@for $i from 0 through 100 {
+  .fs-#{$i} {
+    font-size: $i * 1rem !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: $i * 1px  0 !important;
+  }
+  .mh-#{$i} {
+    margin: 0 $i * 1px !important;
+  }
+  .pv-#{$i} {
+    padding: $i * 1px  0 !important;
+  }
+  .ph-#{$i} {
+    padding: 0 $i * 1px !important;
+  }
+  .maxw-#{$i} {
+    max-width: $i * 1% !important;
+  }
+  .minw-#{$i} {
+    min-width: $i * 1% !important;
+  }
+  .gap-#{$i} {
+    gap: calc($i / 10) * 1rem !important;
+  }
+}
+.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';
+  }
+
+  &:hover {
+    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;
+      }
+    }
+
+    &.light-bg {
+      background-color: #000000 !important;
+      color: #ffffff !important;
+    }
+  }
+
+  &.medium-button {
+    font-size: 1.2rem;
+    font-weight: 500;
+    min-width: 136px;
+    padding: 0.25rem 1.5rem 0.25rem 1.5rem;
+  }
+
+  &.big-button {
+    margin-right: 2rem;
+    font-size: 1.9rem;
+    padding: 0.2rem 4rem 0.2rem 4rem;
+  }
+
+  &.seeAll-button {
+    position: relative;
+    top: -3rem;
+    float: right;
+  }
+
+  &.no-border {
+    border: none !important;
+  }
+}
+
+.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;
+  }
+}
+.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/assets/styles/fonts.css

@@ -0,0 +1,107 @@
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Fp2ywxg089UriCZa4ET-DNl0.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Fp2ywxg089UriCZa4Hz-D.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZaw7ByWB3wTyCg.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZaw7ByWCXwT.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZawpBqWB3wTyCg.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZawpBqWCXwT.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBamC2QX.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBimCw.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBamC2QX.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBimCw.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/dist/assets/styles/variables.d.ts

@@ -0,0 +1,58 @@
+export declare const variables: {
+    primary: string;
+    secondary: string;
+    black: string;
+    white: string;
+    green: string;
+    grey: string;
+    blue: string;
+    darkBlue: string;
+    lightGreen: string;
+    lightBlue: string;
+    brightGreen: string;
+    textPrimary: string;
+    textSecondary: string;
+    lightGrey: string;
+    buttonPrimary: string;
+    transparentWhite: string;
+    transparentBlack: string;
+    buttonPrimaryGradient: string;
+    buttonPrimaryGradientHover: string;
+    fontFamilyPrimary: string;
+    fontFamilySecondary: string;
+    textSize: string;
+    textMenu: string;
+    textSizeNormal: string;
+    textSize16: string;
+    textSizeSmall: string;
+    textSizeSmallL: string;
+    textSizeMedium: string;
+    textSizeLarge: string;
+    textSizeExtraLarge: string;
+    h1Size: string;
+    h1SizeMobile: string;
+    h2Size: string;
+    h3Size: string;
+    h4Size: string;
+    h5Size: string;
+    h6Size: string;
+    h7Size: string;
+    maxWidth: string;
+};
+export declare const devices: {
+    mobileS: string;
+    mobileM: string;
+    mobileL: string;
+    tablet: string;
+    laptop: string;
+    laptopL: string;
+    desktop: string;
+    desktopL: string;
+    mobileSmall: string;
+    mobileOnly: string;
+    tabletOnly: string;
+    laptopMOnly: string;
+    laptopOnly: string;
+    breakpoint: string;
+    middleSizeOnly: string;
+};

package/dist/assets/styles/variables.tsx

@@ -0,0 +1,74 @@
+export const variables = {
+    primary: '#07131E',
+    secondary: '#08DE9E',
+    black: '#000000',
+    white: '#FFFFFF',
+    green: "#83EECE",
+    grey: '#6A7178',
+    blue: '#0011AC',
+    darkBlue: '#123EE0',
+    lightGreen: "#82EECE",
+    lightBlue: '#E6FCF5',
+    brightGreen: "#C2F7E7",
+    textPrimary: '#07131E',
+    textSecondary: '#fff',
+    lightGrey: '#E6E7E8',
+    buttonPrimary: '#123EE0',
+    transparentWhite: 'rgba(255,255,255,0.2)',
+    transparentBlack: 'rgba(0,0,0,0.2)',
+    buttonPrimaryGradient: 'linear-gradient(180deg, #123EE0 30%, #017cf5 100%)',
+    buttonPrimaryGradientHover: 'linear-gradient(180deg, #415ee4 30%, #9bb9f1 100%)',
+    fontFamilyPrimary: 'DM Sans',
+    fontFamilySecondary: 'Abolition-Regular',
+    textSize: '18px',
+    textMenu: '14px',
+    textSizeNormal: '18px',
+    textSize16: '16px',
+    textSizeSmall: '10px',
+    textSizeSmallL: '12px',
+    textSizeMedium: '21px',
+    textSizeLarge: '20px',
+    textSizeExtraLarge: '25px',
+    h1Size: '110px',
+    h1SizeMobile: '100px',
+    h2Size: '80px ',
+    h3Size: '55px',
+    h4Size: '38px',
+    h5Size: '25px ',
+    h6Size: '20px',
+    h7Size: '16px',
+    maxWidth: '1338px',
+}
+
+const screenSize = {
+    mobileS: '320px',
+    mobileM: '375px',
+    mobileL: '425px',
+    tablet: '768px',
+    laptop: '991px',
+    laptopStart: '992px',
+    laptopM: '1280px',
+    laptopL: '1510px',
+    desktop: '1921px',
+    desktopL: '2561px',
+    breakpoint: '1440px'
+}
+
+export const devices = {
+    mobileS: `(min-width: ${screenSize.mobileS})`,
+    mobileM: `(min-width: ${screenSize.mobileM})`,
+    mobileL: `(min-width: ${screenSize.mobileL})`,
+    tablet: `(min-width: ${screenSize.tablet})`,
+    laptop: `(min-width: ${screenSize.laptopStart})`,
+    laptopL: `(min-width: ${screenSize.laptopL})`,
+    desktop: `(min-width: ${screenSize.desktop})`,
+    desktopL: `(min-width: ${screenSize.desktopL})`,
+
+    mobileSmall: `(max-width: ${screenSize.mobileL})`,
+    mobileOnly: `(max-width: ${screenSize.tablet})`,
+    tabletOnly: `(max-width: ${screenSize.laptop})`,
+    laptopMOnly: `(max-width: ${screenSize.laptopM})`,
+    laptopOnly: `(max-width: ${screenSize.desktop})`,
+    breakpoint: `(max-width: ${screenSize.breakpoint})`,
+    middleSizeOnly: `(min-width: ${screenSize.tablet}) and (max-width: ${screenSize.laptopL})`
+};

package/dist/context/GlobalContext.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+interface GlobalContextType {
+    webchatData: any;
+    appMessages: any;
+    goSetWebchatData: (data: any) => void;
+    goResetWebchatData: () => void;
+    goSetRegistrationData: (registrationData: any) => void;
+    goResetRegistrationData: () => void;
+    goGetRegistrationData: () => any;
+    setAppMessages: React.Dispatch<React.SetStateAction<any>>;
+}
+declare const GlobalContext: React.Context<GlobalContextType>;
+interface GlobalProviderProps {
+    children: ReactNode;
+}
+export declare const GlobalProvider: React.FC<GlobalProviderProps>;
+export declare const useGlobalContext: () => GlobalContextType;
+export default GlobalContext;

package/dist/context/types.d.ts

@@ -0,0 +1,60 @@
+export type TRegistrationData = {
+    checkoutStep: number;
+    customerType: 'residential';
+    contractType: 'MONTHLY' | 'CONTRACT';
+    currentContractType: 'IN_CONTRACT' | 'OUT_OF_CONTRACT' | 'DONT_KNOW';
+    orderItems: TDbRecordEntityTransform[];
+    offer: TDbRecordEntityTransform | undefined;
+    addressId: string | undefined;
+    contactId: string | undefined;
+    leadId: string | undefined;
+    accessibilityRequirements: boolean;
+    LOAAuthorized: boolean;
+    phoneTransfer1: string;
+    phoneTransfer2: string;
+    phoneTransfer3: string;
+    currentProvider: string | undefined;
+    addonPrices: {
+        title: string;
+        price: string;
+    }[];
+    orderSummary: {
+        TotalPrice: string;
+        Subtotal: string;
+        TotalDiscounts: string;
+        TotalTaxAmount: string;
+    };
+    personalData: {
+        firstName: string;
+        lastName: string;
+        email: string;
+        phone: string;
+    };
+    selectedDate: {
+        Date: string | undefined;
+        Time: 'AM' | 'PM' | undefined;
+    };
+    searchPremiseResults: {
+        title: string;
+        properties: {
+            UDPRN: string;
+            FullAddress: string;
+            PostalCode: string;
+            SalesStatus: string;
+        };
+    };
+};
+export type TDbRecordEntityTransform = {
+    Product?: any;
+    id: string;
+    entity?: string;
+    schemaId?: string | null;
+    schemaAssociationId?: string | null;
+    dbRecordAssociation?: any;
+    relationType?: string;
+    properties: {
+        [key: string]: any;
+    };
+    groups?: any[];
+    isArchived?: boolean;
+};

package/dist/index.d.ts

@@ -1,8 +1,15 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
 
-type Props = {
-    name?: string;
-};
-declare const TwilioChat: ({ name }: Props) => react_jsx_runtime.JSX.Element;
+interface Props {
+    host: string;
+    clientId: string;
+    clientSecret: string;
+    websocketUrl: string;
+    postcodeSchemaId: string;
+    source: string;
+    fullscreen: boolean;
+    customToken?: string | undefined;
+}
+declare function App({ host, clientId, clientSecret, websocketUrl, postcodeSchemaId, source, fullscreen, customToken }: Props): React.JSX.Element;
 
-export { TwilioChat as default };
+export { App as default };