@bikdotai/bik-widgets 1.0.0 → 1.0.2

package/src/components/WhatsappInput/whatsappInputBox.tsx

@@ -1,155 +0,0 @@
-import React, { useContext, useCallback, useState, useMemo } from 'react';
-import CountriesDropDown from '../countryCodePicker/countriesDropdown';
-import SelectedCountry from '../selectedCountry/selectedCountry';
-import { STWContext } from '../../widgets/STW/context';
-import { UserFields } from '../../types/customFields';
-import { LanguageUtils } from '../../utilities/languageUtilities';
-import { LANGUAGE_VALUES } from '@bikdotai/bik-models/dm';
-import { InputBox } from '../inputComponents/InputBox';
-import useIsMobile from '../../hooks/useIsMobile';
-
-export interface InputProps {
-  selectedCountryData: { code: string; dial: string; code3: string };
-  setUserInputs: React.Dispatch<React.SetStateAction<UserFields>>;
-  onChangeHandle: (
-    value: string,
-    key: 'isWhatsapp' | 'isSms' | 'isEmail',
-  ) => void;
-  value: string;
-  title?: string;
-  error: string;
-  skipCountryPicker: boolean;
-  screenButtonColour?: string;
-  id?: string;
-  fontColour: string;
-  onFocusColour?: string;
-  widgetLanguage?: LANGUAGE_VALUES;
-}
-
-const WhatsappInputBox: React.FC<InputProps> = ({
-  selectedCountryData,
-  setUserInputs,
-  onChangeHandle,
-  value,
-  title,
-  error,
-  skipCountryPicker,
-  id,
-  fontColour,
-  widgetLanguage,
-}) => {
-  const languageUtilities = useMemo(() => new LanguageUtils(), []);
-  const [showDropdown, setShowDropdown] = useState<boolean>(false);
-  const { preview, isMobile } = useContext(STWContext);
-  const isMobileDevice = useIsMobile();
-
-  const toggleDropDown = (flag: boolean) => {
-    setShowDropdown(flag);
-  };
-
-  const onListItemClickHandle = (code: string, dial: string, code3: string) => {
-    setShowDropdown(false);
-    setUserInputs(prevState => {
-      return {
-        ...prevState,
-        isWhatsapp: {
-          ...prevState.isWhatsapp,
-          countryCodeData: { code, dial, code3 },
-        },
-        customFields: {
-          ...prevState.customFields,
-        },
-      };
-    });
-    toggleDropDown(false);
-  };
-
-  const handleChange = useCallback(
-    (newValue: string) => {
-      onChangeHandle(newValue, 'isWhatsapp');
-    },
-    [onChangeHandle],
-  );
-
-  const labelText =
-    title ?? languageUtilities.getWhatsappNumberTitle(widgetLanguage);
-
-  const containerStyle = useMemo(() => {
-    const fontSize = preview ? (isMobile ? '12px' : '10px') : '14px';
-
-    return {
-      fontFamily: 'inherit',
-      color: fontColour,
-      display: 'flex' as const,
-      gap: skipCountryPicker ? 0 : 8,
-      flexDirection: skipCountryPicker ? ('column' as const) : ('row' as const),
-      fontSize,
-      marginTop: preview ? 4 : 12,
-    };
-  }, [preview, isMobile, fontColour, skipCountryPicker]);
-
-  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, error],
-  );
-
-  const inputHeight = useMemo(() => {
-    if (preview) {
-      return isMobile ? 22 : 18;
-    }
-    return isMobileDevice ? 48 : 56;
-  }, [preview, isMobile, isMobileDevice]);
-
-  return (
-    <div style={containerStyle}>
-      {!skipCountryPicker && (
-        <div
-          style={{
-            fontFamily: 'inherit',
-            display: 'flex',
-            alignItems: 'flex-start',
-            position: 'relative',
-          }}
-        >
-          <SelectedCountry
-            toggleDropDown={toggleDropDown}
-            showDropdown={showDropdown}
-            selectedCountryData={selectedCountryData}
-            fontColour={fontColour}
-          />
-          {showDropdown && (
-            <CountriesDropDown
-              onListItemClickHandle={onListItemClickHandle}
-              closeDropdown={() => {
-                setShowDropdown(false);
-              }}
-            />
-          )}
-        </div>
-      )}
-
-      <div style={{ flex: 1, ...inputBoxStyle }}>
-        <InputBox
-          id={id}
-          value={value || ''}
-          onChange={handleChange}
-          inputType="number"
-          labelText={labelText}
-          errorMessage={error}
-          isRequired={false}
-          inputHeight={inputHeight}
-          fontColour={fontColour}
-          isPreview={preview}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default WhatsappInputBox;

package/src/components/WhatsappInput/whatsappInputPreviewDesktop.module.css

@@ -1,71 +0,0 @@
-.bikStwPhoneInputRow {
-  font-family: inherit;
-  display: flex;
-  flex-direction: row;
-  margin-top: 4px;
-  width: 100%;
-  gap: 4px;
-}
-
-.bikStwPhoneInputRow > div {
-  font-family: inherit;
-}
-
-.bikInputMain {
-  display: flex;
-  margin: 0;
-}
-
-.bikStwPhoneInput {
-  flex: 1;
-  font-family: inherit;
-}
-
-.bikStwH2 {
-  font-family: inherit;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 8px;
-  line-height: 10px;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #212121;
-  margin-bottom: 0;
-}
-
-.bikInputWrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  font-family: inherit;
-}
-
-.bikInputWrapper input {
-  outline: none;
-  padding: 2px;
-  background-color: rgba(256, 256, 256, 0.3);
-  border: 1px solid #e0e0e0;
-  border-radius: 4px !important;
-  width: 100%;
-  font-family: inherit;
-  height: 22px;
-  box-shadow: none;
-  font-size: 7px;
-  margin-left: 0;
-  pointer-events: none;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.bikEmailInputMain {
-  display: block;
-  margin: 0;
-  font-family: inherit;
-}

package/src/components/WhatsappInput/whatsappInputPreviewMobile.module.css

@@ -1,65 +0,0 @@
-.bikStwPhoneInputRow {
-  font-family: inherit;
-  display: flex;
-  gap: 4px;
-  flex-direction: row;
-  width: 100%;
-}
-
-.bikStwPhoneInputRow > div {
-  font-family: inherit;
-}
-
-.bikInputMain {
-  display: flex;
-  margin: 4px 0;
-}
-
-.bikStwPhoneInput {
-  flex: 1;
-  font-family: inherit;
-}
-
-.bikStwH2 {
-  font-family: inherit;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #212121;
-  margin-bottom: 0;
-}
-
-.bikInputWrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  font-family: inherit;
-  margin-top: 4px;
-}
-
-.bikInputWrapper input {
-  outline: none;
-  padding: 4px 6px;
-  background-color: rgba(256, 256, 256, 0.3);
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  width: 100%;
-  font-family: inherit;
-  height: 26px;
-  box-shadow: none;
-  font-size: 8px;
-  margin-left: 0;
-  pointer-events: none;
-}
-
-.bikEmailInputMain {
-  display: block;
-  margin: 0;
-  font-family: inherit;
-}

package/src/components/checkbox/checkbox.module.css

@@ -1,19 +0,0 @@
-.checkbox__container {
-  width: 14px;
-  height: 14px;
-  justify-content: center;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.checkbox__icon {
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-  background-color: rgba(256, 256, 256, 0.3);
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-  box-sizing: content-box;
-}

package/src/components/checkbox/checkbox.tsx

@@ -1,88 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-export type CheckBoxProps = {
-  isChecked: boolean;
-  onChange: (value: boolean) => void;
-  checkedColour: string;
-  borderColour: string;
-};
-
-const CheckMark: React.FC<{
-  checkedColour: string;
-}> = props => {
-  return (
-    <svg
-      width={'16'}
-      height={'16'}
-      viewBox={'0 0 16 16'}
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect
-        x="0"
-        y="0"
-        width={'16'}
-        height={'16'}
-        rx="4"
-        fill={props.checkedColour}
-      />
-      <svg
-        width={'8'}
-        height={'7'}
-        x="4"
-        y="4"
-        viewBox="0 0 10 9"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z"
-          fill="white"
-        />
-      </svg>
-    </svg>
-  );
-};
-
-export const CheckBox: React.FC<CheckBoxProps> = props => {
-  const [currentStyle, setCurrentStyle] = useState<any>(null);
-
-  useEffect(() => {
-    const importStyles = async () => {
-      const stylesModule = await import('../checkbox/checkbox.module.css');
-      setCurrentStyle(stylesModule.default);
-    };
-    importStyles().then();
-  }, []);
-
-  const handleCheck = () => {
-    props.onChange(!props.isChecked);
-  };
-
-  if (!currentStyle) {
-    return <></>;
-  }
-
-  return (
-    <div className={currentStyle.checkbox__container} onClick={handleCheck}>
-      <div
-        className={currentStyle.checkbox__icon}
-        style={
-          props.isChecked
-            ? {
-                outline: `0.5px solid ${props.checkedColour}`,
-                outlineOffset: 1,
-                border: 0,
-              }
-            : {
-                border: `1px solid ${props.borderColour}`,
-              }
-        }
-      >
-        {props.isChecked && <CheckMark checkedColour={props.checkedColour} />}
-      </div>
-    </div>
-  );
-};

package/src/components/countryCodePicker/countriesDropdown.module.css

@@ -1,77 +0,0 @@
-.dropdownContent {
-  display: inline-block;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background-color: #fff;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  height: 110px;
-  overflow: auto;
-  scrollbar-width: none;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 1000;
-  font-family: inherit;
-  margin-top: 4px;
-  min-width: 100px;
-}
-
-.dropdownContent a {
-  color: black;
-  padding: 12px 16px;
-  text-decoration: none;
-  border-bottom: 1px solid #e0e0e0;
-  display: block;
-  font-family: inherit;
-}
-
-.bikDropDownItem {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  border-bottom: 1px solid #e0e0e0;
-  gap: 8px;
-  padding: 4px 20px;
-  font-family: inherit;
-}
-
-.bikDropDownItem:hover {
-  background-color: #edeef1;
-  cursor: pointer;
-}
-
-.bikStwCountryFlag {
-  width: 24px;
-  height: auto;
-}
-
-.bikStwH2 {
-  font-family: inherit;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #212121;
-  margin-bottom: 8px;
-}
-
-@media only screen and (max-width: 768px) {
-  .bikStwH2 {
-    font-size: 10px;
-  }
-
-  .bikStwCountryFlag {
-    width: 22px;
-    height: auto;
-  }
-
-  .bikDropDownItem {
-    gap: 8px;
-    padding: 3px 6px;
-  }
-}

package/src/components/countryCodePicker/countriesDropdown.tsx

@@ -1,81 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import { CountriesData } from '../../widgets/STW/utility';
-import { STWContext } from '../../widgets/STW/context';
-
-const CountriesDropDown: React.FC<{
-  onListItemClickHandle: (code: string, dial: string, code3: string) => void;
-  closeDropdown: () => void;
-}> = ({ onListItemClickHandle, closeDropdown }) => {
-  const { preview } = useContext(STWContext);
-  const [currentStyle, setCurrentStyle] = useState<any>(null);
-  const wrapperRef = useRef(null);
-
-  const handleClickOutside = event => {
-    if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-      closeDropdown();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  useEffect(() => {
-    const importStyles = async () => {
-      let stylesModule;
-      if (!preview) {
-        stylesModule = await import('./countriesDropdown.module.css');
-      }
-      setCurrentStyle(stylesModule.default);
-    };
-    importStyles().then();
-  }, [preview]);
-
-  if (!currentStyle) {
-    return <></>;
-  }
-
-  return (
-    <>
-      <div
-        ref={wrapperRef}
-        id={currentStyle.bikStwMandWaDropdown}
-        className={currentStyle.dropdownContent}
-        style={{
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          zIndex: 8,
-          borderRadius: '8px',
-        }}
-      >
-        <div>
-          {CountriesData.map(data => {
-            const flag = `https://flagcdn.com/${data.code.toLowerCase()}.svg`;
-            const code = data.dial;
-            return (
-              <div
-                key={data.dial}
-                onClick={() => {
-                  onListItemClickHandle(data.code, data.dial, data.code3);
-                }}
-              >
-                <div className={currentStyle.bikDropDownItem}>
-                  <img
-                    className={currentStyle.bikStwCountryFlag}
-                    src={`${flag}`}
-                  />
-                  <h2 className={currentStyle.bikStwH2}>{code}</h2>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </>
-  );
-};
-export default CountriesDropDown;