@bikdotai/bik-widgets 1.0.0 → 1.0.1

package/src/components/EmailInput/emailInputBox.tsx

@@ -1,95 +0,0 @@
-import React, { useContext, useCallback, useMemo } from 'react';
-import { STWContext } from '../../widgets/STW/context';
-import useIsMobile from '../../hooks/useIsMobile';
-import { LanguageUtils } from '../../utilities/languageUtilities';
-import { LANGUAGE_VALUES } from '@bikdotai/bik-models/dm';
-import { InputBox } from '../inputComponents/InputBox';
-
-interface EmailInputBoxProps {
-  onChangeHandle: (
-    value: string,
-    key: 'isWhatsapp' | 'isSms' | 'isEmail',
-  ) => void;
-  value: string;
-  error: string;
-  title?: string;
-  id?: string;
-  fontColour: string;
-  onFocusColour?: string;
-  widgetLanguage: LANGUAGE_VALUES;
-}
-
-const EmailInputBox: React.FC<EmailInputBoxProps> = ({
-  onChangeHandle,
-  value,
-  title,
-  error,
-  id,
-  fontColour,
-  onFocusColour,
-  widgetLanguage,
-}) => {
-  const { preview, isMobile } = useContext(STWContext);
-  const isMobileDevice = useIsMobile();
-  const languageUtilities = useMemo(() => new LanguageUtils(), []);
-
-  const handleChange = useCallback(
-    (newValue: string) => {
-      onChangeHandle(newValue, 'isEmail');
-    },
-    [onChangeHandle],
-  );
-
-  const labelText =
-    title ?? languageUtilities.getEmailPlaceholder(widgetLanguage, true);
-
-  const containerStyle = useMemo(() => {
-    const fontSize = preview ? (isMobile ? '12px' : '10px') : '14px';
-
-    return {
-      fontFamily: 'inherit',
-      color: fontColour,
-      fontSize,
-      marginTop: preview ? 4 : 12,
-    } as React.CSSProperties;
-  }, [preview, isMobile, fontColour]);
-
-  const inputBoxStyle = useMemo(
-    () =>
-      ({
-        '--bik-inputBox-text-color': fontColour,
-        '--bik-inputBox-label-color': fontColour,
-        '--bik-inputBox-border-color': error ? '#b92321' : '#e0e0e0',
-        '--bik-inputBox-error-border-color': '#b92321',
-      }) as React.CSSProperties & Record<string, string>,
-    [fontColour, onFocusColour, error],
-  );
-
-  const inputHeight = useMemo(() => {
-    if (preview) {
-      return isMobile ? 22 : 18;
-    }
-    return isMobileDevice ? 48 : 56;
-  }, [preview, isMobile, isMobileDevice]);
-
-  return (
-    <div style={containerStyle}>
-      <div style={inputBoxStyle}>
-        <InputBox
-          id={id}
-          value={value || ''}
-          onChange={handleChange}
-          inputType="email"
-          labelText={labelText}
-          errorMessage={error}
-          isRequired={false}
-          inputHeight={inputHeight}
-          fontColour={fontColour}
-          isPreview={preview}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default EmailInputBox;

package/src/components/Fab/index.tsx

@@ -1,224 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import 'utilities/global.css';
-import previewStyle from './preview.module.css';
-import style from './style.module.css';
-import SVG from 'react-inlinesvg';
-import {
-  ANIMATION_RUN,
-  IRedirectWidgetCustomisation,
-  WidgetSchema,
-  LANGUAGE_VALUES,
-  LANGUAGE_ISO_CODES,
-} from '@bikdotai/bik-models/dm';
-import useIsMobile from '../../hooks/useIsMobile';
-import { LanguageUtils } from 'utilities/languageUtilities';
-
-export interface IFab extends WidgetSchema {
-  icon: any;
-  onClick: () => void;
-  preview?: boolean;
-  isMobile?: boolean;
-  buttonStyle?: React.CSSProperties;
-  id?: string;
-}
-
-const AnimationElement: React.FC<{
-  item: string;
-  animationRun: ANIMATION_RUN;
-  lottieName: string;
-}> = ({ item, animationRun, lottieName }) => {
-  const loopValue = {
-    [ANIMATION_RUN.ONCE]: 0,
-    [ANIMATION_RUN.THREE_TIMES]: 2,
-    [ANIMATION_RUN.TEN_TIMES]: 9,
-    [ANIMATION_RUN.IN_A_LOOP]: true,
-  };
-  useEffect(() => {
-    if (item) {
-      import('lottie-web/build/player/lottie_light').then(module => {
-        const lottie = module.default;
-        const containerDiv = document.getElementById(
-          `lottie-container-${lottieName}`,
-        );
-        containerDiv.innerHTML = '';
-        lottie.loadAnimation({
-          container: containerDiv,
-          path: item,
-          renderer: 'svg',
-          loop: loopValue[animationRun],
-          autoplay: true,
-        });
-      });
-    }
-  }, [item, animationRun]);
-  return <></>;
-};
-
-export const IconSvg: React.FC<{
-  item: string;
-  iconColor: string;
-  size: number;
-}> = ({ item, iconColor, size }) => {
-  return (
-    <SVG
-      key={iconColor}
-      src={item}
-      width={size}
-      height={size}
-      preProcessor={code => code.replace(/fill=".*?"/g, `fill="${iconColor}"`)}
-    />
-  );
-};
-
-const Fab = (props: IFab) => {
-  const widgetCustomisation =
-    props.widgetCustomisation as IRedirectWidgetCustomisation;
-  const languageUtils = new LanguageUtils();
-  const [widgetLanguage, setWidgetLanguage] = useState(LANGUAGE_VALUES.ENGLISH);
-  const { top, bottom, left, right } = widgetCustomisation?.fabPositioner ?? {};
-  const transform = widgetCustomisation?.fabTransform;
-  const [fabText, setFabText] = useState(
-    widgetCustomisation?.multiLingualConfigurations?.[widgetLanguage]
-      ?.fabText ?? widgetCustomisation?.fabText,
-  );
-  const fabIconLink = widgetCustomisation.fabIconLink;
-  const fabImage = widgetCustomisation.fabImage;
-  const fabLottie = widgetCustomisation.fabLottie;
-  const isMobile = props.isMobile || screen.width < 768;
-  const fabSize = isMobile
-    ? widgetCustomisation?.fabMobileSize
-    : widgetCustomisation?.fabWebSize;
-  const fSize = fabSize ?? 75;
-  let currentStyle;
-  if (props?.preview) {
-    currentStyle = previewStyle;
-  } else {
-    currentStyle = style;
-  }
-
-  const getElementsByIdPrefix = prefix => {
-    let elements = document.querySelectorAll("[id^='" + prefix + "']");
-    return Array.from(elements);
-  };
-
-  useEffect(() => {
-    const isBikURL =
-      window.location.href?.includes('https://dashboard.bik.ai/') ||
-      window.location.href?.includes('https://staging.dashboard.bik.ai/');
-    const previewLanguage = props?.widgetCustomisation?.previewLanguage;
-    const storeLanguage =
-      (isBikURL ? previewLanguage : window?.Shopify?.locale) ??
-      previewLanguage ??
-      LANGUAGE_ISO_CODES.EN;
-    setWidgetLanguage(languageUtils.getStoreLanguage(storeLanguage));
-  }, [window.location.href, props?.widgetCustomisation?.previewLanguage]);
-
-  let lottieName;
-  if (fabLottie) {
-    const indexOfLastSlash = fabLottie.lastIndexOf('/') + 1;
-    const indexOfJson = fabLottie.lastIndexOf('.json');
-    lottieName = fabLottie.slice(indexOfLastSlash, indexOfJson);
-  }
-
-  useEffect(() => {
-    if (!fabLottie && !fabImage && !fabIconLink) {
-      const elements = getElementsByIdPrefix('lottie-container-');
-      elements.forEach(element => {
-        element.innerHTML = '';
-      });
-    }
-  }, [fabLottie, fabImage, fabIconLink]);
-
-  useEffect(() => {
-    setFabText(
-      widgetCustomisation?.multiLingualConfigurations?.[widgetLanguage]
-        ?.fabText ?? widgetCustomisation?.fabText,
-    );
-  }, [
-    widgetCustomisation?.fabText,
-    widgetCustomisation?.multiLingualConfigurations,
-    widgetLanguage,
-  ]);
-  let buttonStyle;
-  if (fabText) {
-    buttonStyle = props.buttonStyle ?? {
-      width: 'fit-content',
-      height: 'fit-content',
-      borderRadius: 20,
-    };
-  }
-
-  return (
-    <>
-      <button
-        id={props.id}
-        disabled={props.preview}
-        className={currentStyle.container}
-        style={{
-          zIndex: 2147483647,
-          cursor: 'pointer',
-          border: 'none',
-          transform: transform,
-          backgroundColor: fabImage?.length
-            ? undefined
-            : `${widgetCustomisation?.fabBackgroundColor}`,
-          top,
-          left,
-          bottom,
-          right,
-          boxShadow: fabImage
-            ? undefined
-            : 'rgba(0, 0, 0, 0.15) 0px 14px 28px,rgba(0, 0, 0, 0.15) 0px 10px 10px',
-          position: widgetCustomisation?.fabPositioner,
-          height: fSize,
-          width: fSize,
-          borderRadius: '50%',
-          ...buttonStyle,
-        }}
-        onClick={props.onClick}
-      >
-        <div
-          className={currentStyle.bikFabWrapper}
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: fabText ? 8 : undefined,
-          }}
-        >
-          {fabIconLink && !fabImage && (
-            <IconSvg
-              item={fabIconLink}
-              size={fSize - 30}
-              iconColor={widgetCustomisation.iconColor}
-            />
-          )}
-          {fabImage && (
-            <img
-              width={fSize}
-              height={fSize}
-              src={fabImage}
-              alt={'Fab image'}
-            />
-          )}
-          <div
-            id={`lottie-container-${lottieName}`}
-            style={{ display: fabLottie ? 'block' : 'none' }}
-          >
-            {fabLottie && (
-              <AnimationElement
-                item={fabLottie}
-                animationRun={widgetCustomisation.fabAnimationRun}
-                lottieName={lottieName}
-              />
-            )}
-          </div>
-          {fabText && <div className={currentStyle.fabText}>{fabText}</div>}
-        </div>
-      </button>
-    </>
-  );
-};
-
-export default Fab;

package/src/components/Fab/preview.module.css

@@ -1,28 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');
-
-.container {
-  width: 50px;
-  height: 50px;
-  position: absolute;
-  right: 30px;
-  bottom: 30px;
-  border-radius: 25px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-}
-
-.fabText {
-  color: #fff;
-  margin: 0 0 0 8px !important;
-  font-family: 'Inter';
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.bikFabWrapper svg {
-  margin: unset !important;
-  padding: unset !important;
-}

package/src/components/Fab/style.module.css

@@ -1,37 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');
-
-.container {
-  width: 70px;
-  height: 70px;
-  position: fixed;
-  right: 30px;
-  bottom: 30px;
-  border-radius: 35px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  z-index: 2147483646;
-  min-width: unset !important;
-  margin: unset !important;
-  padding: unset !important;
-  box-shadow: none !important;
-}
-
-.fabText {
-  color: #fff;
-  margin: 0 0 0 8px !important;
-  font-family: 'Inter';
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.bikFabWrapper svg {
-  margin: unset !important;
-  padding: unset !important;
-  fill: none !important;
-  stroke: none !important;
-  width: unset !important;
-  height: unset !important;
-}

package/src/components/Icons/Call.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-
-const Call: React.FC<{ height?: number; width?: number }> = ({
-  height,
-  width,
-}) => {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="24" height="24" fill="#212121" rx="4" ry="4" />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M5.42812 2.83309H7.92144C8.52647 2.82822 9.1128 3.04296 9.57163 3.43754C10.0316 3.83311 10.332 4.38244 10.4169 4.98313L10.418 4.99079C10.5153 5.72822 10.6956 6.4523 10.9555 7.14921C11.1234 7.59634 11.1597 8.0822 11.0601 8.5493C10.9604 9.01676 10.7287 9.44584 10.3927 9.7857L10.3894 9.78902L9.7918 10.3866C10.7717 11.9238 12.0761 13.2282 13.6133 14.2081L14.2109 13.6105L14.2142 13.6072C14.554 13.2711 14.9831 13.0395 15.4506 12.9398C15.9177 12.8402 16.4035 12.8765 16.8507 13.0443C17.5476 13.3043 18.2717 13.4846 19.0091 13.5819L19.0165 13.5829C19.6237 13.6686 20.1783 13.9744 20.5747 14.4423C20.9687 14.9073 21.1791 15.5 21.1668 16.1091V18.5821C21.1669 18.5868 21.167 18.5916 21.167 18.5964C21.1684 18.9445 21.0971 19.2891 20.9576 19.6081C20.8181 19.927 20.6136 20.2134 20.3571 20.4487C20.1005 20.684 19.7977 20.8632 19.4679 20.9747C19.1407 21.0854 18.794 21.1271 18.45 21.0971C18.4422 21.0965 18.4345 21.0957 18.4268 21.0949C15.7342 20.8023 13.1477 19.8825 10.8749 18.4093C8.76063 17.0652 6.96788 15.2724 5.62373 13.1581C4.14538 10.875 3.22535 8.27586 2.93812 5.57109C2.93687 5.55932 2.93587 5.54757 2.93512 5.53587C2.90758 5.1975 2.94924 4.85699 3.05765 4.53511C3.16843 4.20619 3.34649 3.90395 3.58048 3.64761C3.81448 3.39128 4.09928 3.18647 4.41676 3.04624C4.73425 2.906 5.07745 2.83341 5.42453 2.83308C5.42572 2.83308 5.42692 2.83308 5.42812 2.83309ZM7.93333 4.49971C8.13554 4.49772 8.33157 4.56933 8.48489 4.70119C8.63742 4.83236 8.73732 5.01426 8.76622 5.21328C8.88009 6.07407 9.09082 6.91925 9.39438 7.73276L9.39508 7.73464C9.45114 7.88377 9.46327 8.04585 9.43004 8.20167C9.39694 8.35688 9.32022 8.49939 9.2089 8.61247L8.15254 9.66883C7.88728 9.93409 7.83195 10.3439 8.01738 10.67C9.27782 12.8867 11.1132 14.7221 13.3299 15.9825C13.656 16.1679 14.0658 16.1126 14.331 15.8473L15.3874 14.791C15.5005 14.6797 15.643 14.6029 15.7982 14.5698C15.954 14.5366 16.1161 14.5487 16.2652 14.6048L16.2671 14.6055C17.0807 14.9091 17.9259 15.1198 18.7867 15.2337C18.9879 15.2628 19.1716 15.3645 19.3031 15.5197C19.4352 15.6757 19.5055 15.8747 19.5004 16.0791C19.5002 16.086 19.5001 16.0929 19.5001 16.0998V18.5998C19.5001 18.6051 19.5002 18.6103 19.5003 18.6156C19.4991 18.7274 19.4754 18.8378 19.4305 18.9404C19.384 19.0467 19.3159 19.1421 19.2304 19.2206C19.1448 19.299 19.0439 19.3588 18.934 19.3959C18.8257 19.4325 18.7112 19.4465 18.5973 19.4369C16.166 19.1712 13.8307 18.3397 11.7785 17.0089L11.7721 17.0047C9.86184 15.7909 8.2423 14.1714 7.02847 12.2612L7.02453 12.255C5.69044 10.1957 4.85904 7.85166 4.59728 5.41211C4.59717 5.41077 4.59705 5.40943 4.59693 5.40808C4.58652 5.29286 4.60021 5.17673 4.63714 5.06709C4.67406 4.95745 4.73342 4.8567 4.81141 4.77126C4.88941 4.68581 4.98435 4.61755 5.09017 4.5708C5.19539 4.52433 5.30908 4.50014 5.42408 4.49975C5.42443 4.49975 5.42478 4.49976 5.42513 4.49976H7.92513L7.93333 4.49971Z"
-        fill="white"
-      />
-    </svg>
-  );
-};
-
-export default Call;

package/src/components/Icons/Cross.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const Cross: React.FC<{ color?: string; height?: number; width?: number }> = ({
-  color,
-  height,
-  width,
-}) => {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
-        fill={color ?? '#616161'}
-      />
-    </svg>
-  );
-};
-
-export default Cross;

package/src/components/Icons/Gmail.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-
-const Gmail: React.FC<{ height?: number; width?: number }> = ({
-  height,
-  width,
-}) => {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="24" height="24" fill="#FFF" />
-      <g clip-path="url(#clip0_206_14956)">
-        <path d="M22 2H2V22H22V2Z" fill="#FFF" />
-        <path
-          d="M4.29171 18.875H19.7084C20.5138 18.875 21.1667 18.2221 21.1667 17.4167V6.58333C21.1667 5.77792 20.5138 5.125 19.7084 5.125H4.29171C3.48629 5.125 2.83337 5.77792 2.83337 6.58333V17.4167C2.83337 18.2221 3.48629 18.875 4.29171 18.875Z"
-          fill="#E0E0E0"
-        />
-        <path
-          d="M12.8334 18.875H19.7084C20.5138 18.875 21.1667 18.2221 21.1667 17.4167V6.58333C21.1667 5.77792 20.5138 5.125 19.7084 5.125H4.29171C3.48629 5.125 2.83337 5.77792 2.83337 6.58333L12.8334 18.875Z"
-          fill="#D9D9D9"
-        />
-        <path
-          d="M4.81042 18.8753H19.7083C20.5138 18.8753 21.1667 18.2224 21.1667 17.417V6.79199L4.81042 18.8753Z"
-          fill="#EEEEEE"
-        />
-        <path
-          d="M12.7272 18.8753H19.7085C20.5139 18.8753 21.1668 18.2224 21.1668 17.417V6.79199L9.82141 15.1737L12.7272 18.8753Z"
-          fill="#E0E0E0"
-        />
-        <path
-          d="M19.7084 5.95868H4.29171C3.48629 5.95868 2.83337 5.77826 2.83337 6.58366V17.417C2.83337 18.2224 3.48629 18.8753 4.29171 18.8753H4.91671V7.00032H19.0834V18.8753H19.7084C20.5138 18.8753 21.1667 18.2224 21.1667 17.417V6.58366C21.1667 5.77826 20.5138 5.95868 19.7084 5.95868Z"
-          fill="#CA3737"
-        />
-        <path
-          d="M19.7084 5.125H12H4.29171C3.48629 5.125 2.83337 5.765 2.83337 6.58333C2.83337 7.08583 3.46587 7.52417 3.46587 7.52417L12 13.565L20.5342 7.52458C20.5342 7.52458 21.1667 7.08583 21.1667 6.58375C21.1667 5.765 20.5138 5.125 19.7084 5.125Z"
-          fill="#F5F5F5"
-        />
-        <path
-          d="M20.0192 5.15918L12 10.75L3.98087 5.15918C3.32504 5.2996 2.83337 5.87376 2.83337 6.58333C2.83337 7.08583 3.46587 7.52417 3.46587 7.52417L12 13.565L20.5342 7.52458C20.5342 7.52458 21.1667 7.08583 21.1667 6.58375C21.1667 5.87376 20.675 5.2996 20.0192 5.15918Z"
-          fill="#E84F4B"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_206_14956">
-          <rect
-            width="20"
-            height="20"
-            fill="white"
-            transform="translate(2 2)"
-          />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-
-export default Gmail;

package/src/components/Icons/Instagram.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-
-const Instagram: React.FC<{ height?: number; width?: number }> = ({
-  height,
-  width,
-}) => {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clip-path="url(#clip0_206_14957)">
-        <path
-          d="M6.08588 23.9151C5.15758 23.9047 4.23801 23.7344 3.36753 23.4118C2.73187 23.1768 2.15676 22.8027 1.68424 22.3169C1.19712 21.8454 0.822514 21.2701 0.588235 20.6339C0.265824 19.7634 0.0958076 18.8439 0.0856471 17.9158C0.0143529 16.3727 0 15.9099 0 12C0 8.09012 0.0157647 7.62894 0.0849412 6.08471C0.0963347 5.15689 0.266561 4.23788 0.588235 3.36753C0.823654 2.73176 1.19773 2.15642 1.68329 1.68329C2.15523 1.19662 2.73061 0.822358 3.36682 0.588235C4.2373 0.265557 5.15687 0.0953008 6.08518 0.0849412C7.62871 0.0143529 8.09224 0 12 0C15.9078 0 16.3711 0.0157647 17.9153 0.0849412C18.8434 0.0962542 19.7626 0.266481 20.6332 0.588235C21.2691 0.822667 21.8443 1.1968 22.3165 1.68306C22.8029 2.15535 23.1772 2.73073 23.4118 3.36682C23.7345 4.23729 23.9049 5.15686 23.9153 6.08518C23.9859 7.62941 24.0002 8.09177 24.0002 12.0005C24.0002 15.9092 23.9859 16.3715 23.9153 17.9158C23.9041 18.8439 23.7338 19.7633 23.4118 20.6339C23.1682 21.2652 22.7951 21.8386 22.3166 22.317C21.838 22.7954 21.2646 23.1683 20.6332 23.4118C19.7627 23.7345 18.8431 23.9049 17.9148 23.9153C16.372 23.9859 15.9082 24.0002 11.9995 24.0002C8.09082 24.0002 7.62847 23.9866 6.08565 23.9153"
-          fill="url(#paint0_radial_206_14957)"
-        />
-        <path
-          d="M6.08588 23.9151C5.15758 23.9047 4.23801 23.7344 3.36753 23.4118C2.73187 23.1768 2.15676 22.8027 1.68424 22.3169C1.19712 21.8454 0.822514 21.2701 0.588235 20.6339C0.265824 19.7634 0.0958076 18.8439 0.0856471 17.9158C0.0143529 16.3727 0 15.9099 0 12C0 8.09012 0.0157647 7.62894 0.0849412 6.08471C0.0963347 5.15689 0.26656 4.23788 0.588235 3.36753C0.823654 2.73176 1.19773 2.15642 1.68329 1.68329C2.15523 1.19662 2.73061 0.822358 3.36682 0.588235C4.2373 0.265557 5.15687 0.0953008 6.08518 0.0849412C7.62871 0.0143529 8.09224 0 12 0C15.9078 0 16.3711 0.0157647 17.9153 0.0849412C18.8434 0.0962542 19.7626 0.266481 20.6332 0.588235C21.2691 0.822667 21.8443 1.1968 22.3165 1.68306C22.8029 2.15535 23.1772 2.73073 23.4118 3.36682C23.7345 4.23729 23.9049 5.15686 23.9153 6.08518C23.9859 7.62941 24.0002 8.09177 24.0002 12.0005C24.0002 15.9092 23.9859 16.3715 23.9153 17.9158C23.9041 18.8439 23.7338 19.7633 23.4118 20.6339C23.1682 21.2652 22.7951 21.8386 22.3166 22.317C21.838 22.7954 21.2646 23.1683 20.6332 23.4118C19.7627 23.7345 18.8431 23.9049 17.9148 23.9153C16.372 23.9859 15.9082 24.0002 11.9995 24.0002C8.09082 24.0002 7.62871 23.9864 6.08588 23.9151Z"
-          fill="url(#paint1_radial_206_14957)"
-        />
-        <path
-          d="M9.05336 12.0513C9.05341 11.4635 9.22776 10.8889 9.55438 10.4001C9.88099 9.91141 10.3452 9.53051 10.8883 9.30562C11.4314 9.08073 12.029 9.02194 12.6055 9.13668C13.182 9.25142 13.7115 9.53453 14.1271 9.95023C14.5427 10.3659 14.8257 10.8955 14.9403 11.4721C15.0549 12.0486 14.996 12.6462 14.771 13.1892C14.5459 13.7323 14.1649 14.1964 13.6761 14.5229C13.1873 14.8494 12.6127 15.0236 12.0249 15.0235C11.2367 15.0234 10.4808 14.7102 9.92358 14.1528C9.36632 13.5954 9.0533 12.8395 9.05336 12.0513M7.44653 12.0513C7.44653 12.9568 7.71505 13.842 8.21812 14.5949C8.7212 15.3478 9.43624 15.9346 10.2728 16.2811C11.1094 16.6276 12.03 16.7183 12.9181 16.5417C13.8062 16.365 14.622 15.9289 15.2623 15.2887C15.9026 14.6484 16.3386 13.8326 16.5153 12.9445C16.6919 12.0564 16.6013 11.1358 16.2547 10.2992C15.9082 9.46262 15.3214 8.74758 14.5685 8.24451C13.8156 7.74143 12.9304 7.47291 12.0249 7.47291C11.4236 7.47288 10.8283 7.59129 10.2728 7.82136C9.71731 8.05143 9.21258 8.38867 8.78743 8.81381C8.36229 9.23896 8.02505 9.74369 7.79498 10.2992C7.56491 10.8547 7.4465 11.45 7.44653 12.0513M15.7145 7.2915C15.7144 7.50311 15.7771 7.70999 15.8946 7.88598C16.0121 8.06197 16.1791 8.19917 16.3746 8.28024C16.57 8.3613 16.7851 8.38259 16.9927 8.34139C17.2002 8.3002 17.3909 8.19839 17.5406 8.04883C17.6903 7.89927 17.7923 7.70868 17.8336 7.50116C17.875 7.29364 17.8539 7.07852 17.773 6.88298C17.6921 6.68745 17.5551 6.5203 17.3792 6.40267C17.2033 6.28503 16.9965 6.22219 16.7849 6.2221V6.2221C16.5013 6.22222 16.2293 6.33492 16.0287 6.53543C15.8281 6.73594 15.7153 7.00787 15.715 7.2915M8.42324 19.3089C7.85786 19.3027 7.29776 19.1992 6.76747 19.003C6.3829 18.8548 6.03363 18.6277 5.74214 18.3363C5.45064 18.045 5.22339 17.6958 5.075 17.3113C4.87871 16.781 4.77524 16.2209 4.76912 15.6555C4.72583 14.7157 4.71736 14.4334 4.71736 12.0524C4.71736 9.67151 4.72677 9.38986 4.76912 8.44915C4.77598 7.88383 4.87943 7.32384 5.075 6.79339C5.22322 6.4087 5.45041 6.05934 5.74191 5.76783C6.03342 5.47632 6.38278 5.24913 6.76747 5.10092C7.29773 4.90463 7.85785 4.80116 8.42324 4.79504C9.363 4.75174 9.64535 4.74327 12.0254 4.74327C14.4054 4.74327 14.6879 4.75245 15.6286 4.79527C16.194 4.80213 16.754 4.90558 17.2844 5.10115C17.6691 5.24938 18.0185 5.47657 18.31 5.76808C18.6015 6.05959 18.8287 6.40894 18.9769 6.79362C19.1732 7.32389 19.2766 7.884 19.2828 8.44939C19.3261 9.39057 19.3345 9.67151 19.3345 12.0527C19.3345 14.4339 19.3258 14.7153 19.2828 15.656C19.2762 16.2213 19.1727 16.7814 18.9769 17.3117C18.8285 17.6962 18.6012 18.0454 18.3097 18.3368C18.0183 18.6282 17.669 18.8553 17.2844 19.0035C16.7542 19.1998 16.194 19.3033 15.6286 19.3094C14.6889 19.3527 14.4065 19.3612 12.0254 19.3612C9.64418 19.3612 9.36277 19.3524 8.42324 19.3094M8.34936 3.18963C7.60955 3.20417 6.87758 3.34419 6.18465 3.60374C5.5923 3.83277 5.05434 4.18305 4.60527 4.63212C4.15619 5.0812 3.80591 5.61915 3.57688 6.2115C3.31737 6.90445 3.17735 7.63641 3.16277 8.37621C3.11877 9.3268 3.10889 9.6308 3.10889 12.0522C3.10889 14.4736 3.11901 14.7774 3.16277 15.7282C3.17735 16.468 3.31737 17.2 3.57688 17.8929C3.80592 18.4853 4.15621 19.0232 4.60528 19.4723C5.05435 19.9214 5.5923 20.2716 6.18465 20.5007C6.87762 20.7601 7.60957 20.9001 8.34936 20.9148C9.30042 20.9581 9.60394 20.9687 12.0254 20.9687C14.4468 20.9687 14.7505 20.9586 15.7014 20.9148C16.4412 20.9002 17.1731 20.7602 17.8661 20.5007C18.4584 20.2716 18.9964 19.9214 19.4454 19.4723C19.8945 19.0232 20.2448 18.4853 20.4738 17.8929C20.7337 17.2001 20.8737 16.4681 20.8879 15.7282C20.9312 14.7769 20.9411 14.4736 20.9411 12.0522C20.9411 9.6308 20.931 9.32704 20.8879 8.37621C20.8734 7.63641 20.7334 6.90444 20.4738 6.2115C20.2448 5.61927 19.8946 5.08139 19.4457 4.63233C18.9967 4.18327 18.4589 3.83293 17.8668 3.60374C17.1739 3.34403 16.4419 3.204 15.7021 3.18963C14.7512 3.1461 14.4475 3.13574 12.0265 3.13574C9.60559 3.13574 9.30112 3.14586 8.34982 3.18963"
-          fill="white"
-        />
-      </g>
-      <defs>
-        <radialGradient
-          id="paint0_radial_206_14957"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(1.55318 23.4744) scale(30.4711)"
-        >
-          <stop offset="0.09" stop-color="#FA8F21" />
-          <stop offset="0.78" stop-color="#D82D7E" />
-        </radialGradient>
-        <radialGradient
-          id="paint1_radial_206_14957"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(16.624 22.7035) scale(26.8148)"
-        >
-          <stop offset="0.64" stop-color="#8C3AAA" stop-opacity="0" />
-          <stop offset="1" stop-color="#8C3AAA" />
-        </radialGradient>
-        <clipPath id="clip0_206_14957">
-          <rect width="24" height="24" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-
-export default Instagram;

package/src/components/Icons/LiveChat.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-const LiveChat: React.FC<{ height?: number; width?: number }> = ({
-  height,
-  width,
-}) => {
-  return (
-    <svg
-      version="1.0"
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      viewBox="0 0 344.000000 344.000000"
-      preserveAspectRatio="xMidYMid meet"
-    >
-      <g
-        transform="translate(0.000000,344.000000) scale(0.100000,-0.100000)"
-        fill="#000000"
-        stroke="none"
-      >
-        <path
-          d="M730 3151 c-124 -38 -214 -140 -242 -272 l-12 -57 -45 -6 c-107 -14
--212 -94 -260 -196 l-26 -55 0 -810 0 -810 26 -56 c34 -72 96 -134 168 -168
-53 -25 66 -26 235 -29 l178 -3 -6 -72 c-13 -137 -47 -196 -169 -294 -33 -26
--35 -65 -6 -94 20 -20 29 -21 113 -16 114 7 189 26 291 76 143 71 253 177 336
-328 l40 72 677 3 c670 3 677 3 724 25 100 46 177 145 200 257 l10 54 54 10
-c112 23 211 100 257 200 22 47 22 48 22 862 l0 815 -25 50 c-36 74 -114 148
--183 173 l-58 22 -1137 -1 c-625 0 -1148 -4 -1162 -8z m2327 -150 c24 -14 55
--42 70 -64 l28 -40 2 -791 3 -791 -23 -40 c-27 -47 -88 -92 -139 -101 l-37 -6
--3 693 -3 694 -27 57 c-35 75 -95 138 -165 174 l-58 29 -1042 3 -1043 2 0 23
-c1 66 72 150 147 174 28 9 316 11 1143 10 l1105 -2 42 -24z m-346 -344 c24
--13 58 -43 74 -66 l30 -43 0 -793 0 -793 -30 -43 c-17 -24 -46 -52 -65 -64
--34 -19 -52 -20 -737 -25 -800 -6 -720 5 -761 -98 -31 -78 -106 -185 -165
--237 -52 -46 -166 -108 -221 -121 l-28 -7 26 45 c35 61 56 162 56 279 0 139
-12 133 -264 139 l-223 5 -36 27 c-19 16 -46 43 -59 60 l-23 33 -3 788 c-2 759
--2 788 17 825 22 42 52 72 96 95 27 15 149 16 1151 17 l1121 0 44 -23z"
-        />
-      </g>
-    </svg>
-  );
-};
-
-export default LiveChat;

package/src/components/Icons/Messenger.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-
-const Messenger: React.FC<{ height?: number; width?: number }> = ({
-  height,
-  width,
-}) => {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="24" height="24" fill="#FAFAFA" />
-      <g clip-path="url(#clip0_206_14943)">
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M12 2C6.3675 2 2 6.1275 2 11.7C2 14.615 3.195 17.135 5.14 18.875C5.3025 19.02 5.4025 19.225 5.4075 19.445L5.4625 21.225C5.48 21.7925 6.065 22.1625 6.585 21.9325L8.57 21.0575C8.7375 20.9825 8.9275 20.97 9.105 21.0175C10.0175 21.2675 10.9875 21.4025 12 21.4025C17.6325 21.4025 22 17.275 22 11.7025C22 6.13 17.6325 2 12 2Z"
-          fill="url(#paint0_radial_206_14943)"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M5.99495 14.5373L8.93245 9.87725C9.39995 9.13475 10.3999 8.95225 11.1024 9.47725L13.4399 11.2298C13.6549 11.3898 13.9499 11.3898 14.1624 11.2273L17.3174 8.83225C17.7374 8.51225 18.2874 9.01725 18.0074 9.46475L15.0674 14.1223C14.5999 14.8648 13.5999 15.0473 12.8974 14.5223L10.5599 12.7698C10.3449 12.6098 10.0499 12.6098 9.83745 12.7723L6.68245 15.1673C6.26245 15.4873 5.71245 14.9848 5.99495 14.5373Z"
-          fill="white"
-        />
-      </g>
-      <defs>
-        <radialGradient
-          id="paint0_radial_206_14943"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(5.85 21.8911) scale(21.792 21.792)"
-        >
-          <stop stop-color="#0099FF" />
-          <stop offset="0.6098" stop-color="#A033FF" />
-          <stop offset="0.9348" stop-color="#FF5280" />
-          <stop offset="1" stop-color="#FF7061" />
-        </radialGradient>
-        <clipPath id="clip0_206_14943">
-          <rect
-            width="20"
-            height="20"
-            fill="white"
-            transform="translate(2 2)"
-          />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-};
-
-export default Messenger;