@bikdotai/bik-widgets 1.0.0

package/src/widgets/STW/userDetails.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import { STWContext } from './context';
+import UserDetailsForm from '../../components/userDetailsForm/userDetailsForm';
+import { ISTWTemplate } from './stw1';
+import CloseIcon from '../../assets/svg/Close';
+import {
+  BACKGROUND_TYPE,
+  ISTWWidgetCustomisation,
+  ISTWWidgetLeadGeneration,
+  LANGUAGE_VALUES,
+  LANGUAGE_ISO_CODES,
+} from '@bikdotai/bik-models/dm';
+import useIsMobile from '../../hooks/useIsMobile';
+import { ComponentStyleMap, injectFontLink } from '../../utilities/styleUtils';
+import { LanguageUtils } from 'utilities/languageUtilities';
+export interface IPhoneInput {
+  value: string;
+  countryCodeData: {
+    dial: string;
+    code: string;
+  };
+  showComponent: boolean;
+  error: string;
+}
+export interface IEmailInput {
+  value: string;
+  error: string;
+}
+export interface IUserInputs {
+  isWhatsapp?: IPhoneInput;
+  isSms?: IPhoneInput;
+  isEmail?: IEmailInput;
+}
+
+const UserDetails = (props: ISTWTemplate) => {
+  const {
+    claimPrizeHandle,
+    widgetCustomisation,
+    leadGeneration,
+    error,
+    isLoading,
+    onCloseHandle,
+    preview,
+    isMobile,
+    sameMobileNumberTogglers,
+    setSameMobileNumberTogglers,
+    templateName,
+  } = props;
+  const {
+    fontFamily,
+    backgroundType,
+    backgroundColour,
+    backgroundImageDesktop,
+    backgroundImageMobile,
+  } = widgetCustomisation as unknown as ISTWWidgetCustomisation;
+  const [currentStyle, setCurrentStyle] = useState<any>(null);
+  const isMobileDevice = useIsMobile();
+  const languageUtils = new LanguageUtils();
+  const [widgetLanguage, setWidgetLanguage] = useState(LANGUAGE_VALUES.ENGLISH);
+  useEffect(() => {
+    if (fontFamily && fontFamily?.link) {
+      injectFontLink([fontFamily?.link]);
+    }
+  }, [fontFamily]);
+
+  useEffect(() => {
+    if (preview) {
+      if (isMobile) {
+        ComponentStyleMap[templateName]?.userInputPreviewMobile.then(
+          async style => {
+            setCurrentStyle((await style()).default);
+          },
+        );
+      } else {
+        ComponentStyleMap[templateName]?.userInputPreviewDesktop.then(
+          async style => {
+            setCurrentStyle((await style()).default);
+          },
+        );
+      }
+    } else {
+      ComponentStyleMap[templateName]?.globalStyle.then(async style => {
+        setCurrentStyle((await style()).default);
+      });
+    }
+  }, [preview, isMobile]);
+
+  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]);
+
+  if (!currentStyle) {
+    return <></>;
+  }
+
+  return (
+    <div className={currentStyle.bikSpinOverlay}>
+      <div
+        className={currentStyle.bikMainWrapper}
+        id={`bik-stw-${props.id}-user-details-container`}
+      >
+        <div className={currentStyle.bikCloseBtnWrapper}>
+          <div
+            className={currentStyle.bikCloseBtn}
+            onClick={() => onCloseHandle('userDetails')}
+          >
+            <CloseIcon />
+          </div>
+        </div>
+        <div
+          className={currentStyle.bikWrapper}
+          style={
+            backgroundType === BACKGROUND_TYPE.IMAGE
+              ? {
+                  background: `url(${isMobileDevice || isMobile ? backgroundImageMobile : backgroundImageDesktop})`,
+                  backgroundSize: 'contain',
+                  backgroundRepeat: 'round',
+                  backgroundPosition: 'top',
+                }
+              : { backgroundColor: backgroundColour ?? '#ffffff' }
+          }
+        >
+          <STWContext.Provider value={{ preview, isMobile, templateName }}>
+            <UserDetailsForm
+              claimPrizeHandle={claimPrizeHandle}
+              widgetCustomisation={widgetCustomisation}
+              leadGeneration={leadGeneration as ISTWWidgetLeadGeneration}
+              error={error}
+              isLoading={isLoading}
+              templateName={templateName}
+              widgetName={props.widgetName ?? 'Spin_The_Wheel_1'}
+              countryCode={props.countryCode}
+              id={props.id}
+              widgetLanguage={widgetLanguage}
+            />
+          </STWContext.Provider>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default UserDetails;