@bikdotai/bik-widgets 1.0.0

package/src/components/Icons/Send.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Send = props => {
+  return (
+    <svg
+      width={props.height ?? '40'}
+      height={props.height ?? '40'}
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M37.8791 2.1901C37.8679 2.17833 37.8566 2.16669 37.8451 2.15519C37.5521 1.86215 37.1771 1.70104 36.7939 1.67188C36.6897 1.66388 36.5844 1.66566 36.4795 1.67752C36.3442 1.69272 36.2103 1.72447 36.0813 1.77277L2.78272 13.4273C2.13772 13.653 1.69588 14.2496 1.66802 14.9324C1.64016 15.6152 2.03194 16.2459 2.6564 16.5234L17.0706 22.9297L23.4769 37.3439C23.7545 37.9684 24.3851 38.3602 25.0679 38.3323C25.7507 38.3045 26.3473 37.8626 26.5731 37.2176L38.2277 3.91874C38.2749 3.79236 38.3064 3.6614 38.3219 3.52893C38.379 3.0445 38.221 2.55253 37.8791 2.1901ZM30.3238 7.31949L7.85176 15.1847L17.9642 19.6791L30.3238 7.31949ZM20.3212 22.0361L32.6808 9.67651L24.8156 32.1486L20.3212 22.0361Z"
+        fill={props.color ?? '#fff'}
+      />
+    </svg>
+  );
+};
+
+export default Send;

package/src/components/Icons/Whatsapp.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Whatsapp: React.FC<{ height?: number; width?: number }> = ({
+  width,
+  height,
+}) => {
+  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="#25D366" rx="4" ry="4" />
+      <path
+        d="M12.0117 2C6.50572 2 2.02348 6.47837 2.02148 11.9844C2.02048 13.7444 2.48147 15.4626 3.35547 16.9766L2 22L7.23242 20.7637C8.69142 21.5597 10.3339 21.9775 12.0059 21.9785H12.0098C17.5148 21.9785 21.995 17.4991 21.998 11.9941C22 9.32514 20.9622 6.81573 19.0762 4.92773C17.1902 3.04073 14.6837 2.001 12.0117 2ZM12.0098 4C14.1458 4.001 16.1531 4.8338 17.6621 6.3418C19.1711 7.8518 20 9.85819 19.998 11.9922C19.996 16.3962 16.4138 19.9785 12.0078 19.9785C10.6748 19.9775 9.35441 19.6428 8.19141 19.0078L7.51758 18.6406L6.77344 18.8164L4.80469 19.2812L5.28516 17.4961L5.50195 16.6953L5.08789 15.9766C4.38989 14.7686 4.02048 13.3874 4.02148 11.9844C4.02348 7.58238 7.60677 4 12.0098 4ZM8.47656 7.375C8.30956 7.375 8.03955 7.4375 7.81055 7.6875C7.58155 7.9365 6.93555 8.53958 6.93555 9.76758C6.93555 10.9956 7.83008 12.1826 7.95508 12.3496C8.07908 12.5156 9.68175 15.1152 12.2188 16.1152C14.3268 16.9462 14.7549 16.7822 15.2129 16.7402C15.6709 16.6992 16.6904 16.1377 16.8984 15.5547C17.1064 14.9717 17.1069 14.4702 17.0449 14.3672C16.9829 14.2632 16.8164 14.2012 16.5664 14.0762C16.3174 13.9512 15.0903 13.3486 14.8613 13.2656C14.6323 13.1826 14.4648 13.1406 14.2988 13.3906C14.1328 13.6406 13.6558 14.2012 13.5098 14.3672C13.3638 14.5342 13.2188 14.5566 12.9688 14.4316C12.7188 14.3056 11.9149 14.0414 10.9609 13.1914C10.2189 12.5304 9.71827 11.7148 9.57227 11.4648C9.42727 11.2158 9.55859 11.0791 9.68359 10.9551C9.79559 10.8431 9.93164 10.6636 10.0566 10.5176C10.1806 10.3716 10.2236 10.2676 10.3066 10.1016C10.3896 9.93556 10.3472 9.78906 10.2852 9.66406C10.2232 9.53906 9.73763 8.3065 9.51562 7.8125C9.32862 7.3975 9.13113 7.38786 8.95312 7.38086C8.80813 7.37486 8.64256 7.375 8.47656 7.375Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default Whatsapp;

package/src/components/Shimmer/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Style from './style.module.css';
+
+interface IShimmer {
+  shimmerStyle?: React.CSSProperties;
+}
+
+const Shimmer = (props: IShimmer) => {
+  return <div className={Style.shimmer} style={{ ...props.shimmerStyle }} />;
+};
+
+export default Shimmer;

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

@@ -0,0 +1,37 @@
+.shimmerWrapper {
+  height: 104px;
+  width: 100px;
+}
+
+.shimmer {
+  height: 104px;
+  width: 100px;
+  background: #f6f7f8;
+  background-image: linear-gradient(
+    to right,
+    #f6f7f8 0%,
+    #edeef1 20%,
+    #f6f7f8 40%,
+    #f6f7f8 100%
+  );
+  background-repeat: no-repeat;
+  background-size: 800px 104px;
+  display: inline-block;
+  position: relative;
+
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeholderShimmer;
+  -webkit-animation-timing-function: linear;
+}
+
+@-webkit-keyframes placeholderShimmer {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+}

package/src/components/SmsInput/smsInputBox.tsx

@@ -0,0 +1,135 @@
+import React, { useContext, useCallback, useState, useMemo } from 'react';
+import { STWContext } from '../../widgets/STW/context';
+import CountriesDropDown from '../countryCodePicker/countriesDropdown';
+import SelectedCountry from '../selectedCountry/selectedCountry';
+import useIsMobile from '../../hooks/useIsMobile';
+import { InputProps } from 'components/WhatsappInput/whatsappInputBox';
+import { LanguageUtils } from '../../utilities/languageUtilities';
+import { InputBox } from '../inputComponents/InputBox';
+
+const SMSInputBox: React.FC<InputProps> = ({
+  selectedCountryData,
+  fontColour,
+  setUserInputs,
+  onChangeHandle,
+  value,
+  title = 'SMS Number',
+  error,
+  skipCountryPicker,
+  id,
+  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) => {
+    setUserInputs(prevState => {
+      return {
+        ...prevState,
+        isSms: {
+          ...prevState.isSms,
+          countryCodeData: { code, dial, code3 },
+        },
+        customFields: {
+          ...prevState.customFields,
+        },
+      };
+    });
+    toggleDropDown(false);
+  };
+
+  const handleChange = useCallback(
+    (newValue: string) => {
+      onChangeHandle(newValue, 'isSms');
+    },
+    [onChangeHandle],
+  );
+
+  const labelText =
+    title ?? languageUtilities.getOptionalPhoneNumberTitle(widgetLanguage);
+
+  const containerStyle = useMemo(() => {
+    const fontSize = preview ? (isMobile ? '12px' : '10px') : '14px';
+
+    return {
+      fontFamily: 'inherit',
+      color: fontColour,
+      display: 'flex',
+      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
+            fontColour={fontColour}
+            toggleDropDown={toggleDropDown}
+            showDropdown={showDropdown}
+            selectedCountryData={selectedCountryData}
+          />
+
+          {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 SMSInputBox;

package/src/components/UserDetailsV2/userDetailsV2.desktop.module.css

@@ -0,0 +1,52 @@
+.userDetails__button {
+  padding: 3px;
+  border: none;
+  border-radius: 2px;
+  font-weight: 600;
+  font-size: 7px;
+  line-height: 9px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+}
+
+.userDetails__container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 2px;
+}
+
+.userDetails__container > div {
+  font-family: inherit;
+}
+
+.consent__container {
+  display: flex;
+  gap: 2px;
+  margin-top: 3px;
+  padding: 0 1px;
+  align-items: flex-start;
+}
+
+.preview__checkbox {
+  height: 4px;
+  width: 4px;
+  border-radius: 1px;
+  border: 1px solid #212121;
+}
+
+.consent__message {
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 4px;
+  line-height: 6px;
+  color: #212121;
+
+  a {
+    text-decoration: underline;
+    cursor: pointer;
+    text-underline-offset: 2px;
+  }
+}

package/src/components/UserDetailsV2/userDetailsV2.mobile.module.css

@@ -0,0 +1,52 @@
+.userDetails__button {
+  padding: 3px;
+  border: none;
+  border-radius: 2px;
+  font-weight: 600;
+  font-size: 7px;
+  line-height: 9px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.userDetails__container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 2px;
+}
+
+.userDetails__container > div {
+  font-family: inherit;
+}
+
+.consent__container {
+  display: flex;
+  gap: 2px;
+  margin-top: 3px;
+  padding: 0 1px;
+  align-items: flex-start;
+}
+
+.preview__checkbox {
+  height: 4px;
+  width: 4px;
+  border-radius: 1px;
+  border: 1px solid #212121;
+}
+
+.consent__message {
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 5px;
+  line-height: 7px;
+  color: #212121;
+
+  a {
+    text-decoration: underline;
+    cursor: pointer;
+    text-underline-offset: 2px;
+  }
+}

package/src/components/UserDetailsV2/userDetailsV2.module.css

@@ -0,0 +1,81 @@
+.userDetails__button {
+  cursor: pointer;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
+
+.userDetails__container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.userDetails__container > div {
+  font-family: inherit;
+}
+
+.userDetails__error {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 8px;
+  line-height: 16px;
+  color: #b92321;
+  margin-top: 4px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding-left: 4px;
+}
+
+.consent__container {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+  padding: 0 2px;
+  align-items: flex-start;
+}
+
+.consent__message {
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+  color: #212121;
+
+  a {
+    text-decoration: underline;
+    cursor: pointer;
+    text-underline-offset: 3px;
+  }
+}
+
+.userDetails__loader {
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: 2px solid #fff;
+  border-left: 2px solid #fff;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  display: block !important;
+  animation: spin 1.3s linear infinite;
+}
+
+@media only screen and (max-width: 768px) {
+  .userDetails__button {
+    font-size: 12px;
+    line-height: 14px;
+  }
+
+  .userDetails__loader {
+    width: 16px;
+    height: 16px;
+  }
+}