@bikdotai/bik-widgets 1.0.0

package/src/components/WhatsappInput/whatsappInputBox.tsx

@@ -0,0 +1,155 @@
+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

@@ -0,0 +1,71 @@
+.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

@@ -0,0 +1,65 @@
+.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

@@ -0,0 +1,19 @@
+.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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,77 @@
+.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

@@ -0,0 +1,81 @@
+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;