@bikdotai/bik-widgets 1.0.0

package/src/widgets/STW/stw2Pages/userDetails.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import UserDetailsForm from '../../../components/userDetailsForm/userDetailsForm';
+import { STWContext } from '../context';
+import { ISTWTemplate } from '../stw1';
+import { ISTWWidgetLeadGeneration } from '@bikdotai/bik-models/dm';
+import { ComponentStyleMap } from '../../../utilities/styleUtils';
+import SVGFactory, { SVGName } from '../components/svgFactory';
+
+const STW2UserDetails = (props: ISTWTemplate) => {
+  const {
+    widgetCustomisation,
+    leadGeneration,
+    error,
+    isLoading,
+    preview,
+    isMobile,
+    templateName,
+    claimPrizeHandle,
+  } = props;
+  const [currentStyle, setCurrentStyle] = useState<any>(null);
+
+  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]);
+
+  if (!currentStyle) {
+    return <></>;
+  }
+  return (
+    <>
+      <div style={{ width: '100%' }}>
+        <STWContext.Provider value={{ preview, isMobile, templateName }}>
+          <UserDetailsForm
+            widgetCustomisation={widgetCustomisation}
+            leadGeneration={leadGeneration as ISTWWidgetLeadGeneration}
+            error={error}
+            isLoading={isLoading}
+            templateName={templateName}
+            claimPrizeHandle={claimPrizeHandle}
+            widgetName="Spin_The_Wheel_2"
+            countryCode={props.countryCode}
+            id={props.id}
+            hideCreatorLabel={true}
+          />
+        </STWContext.Provider>
+      </div>
+      <div id={currentStyle.bikCtaContainer}>
+        <p
+          id={currentStyle.bikCta}
+          onClick={() =>
+            window.open(
+              'https://bik.ai/?utm_campaign=Spin_The_Wheel_2&utm_medium=Widgets&utm_source=Powered_by_bik',
+            )
+          }
+        >
+          <a
+            target="_blank"
+            href="https://bik.ai/?utm_campaign=Spin_The_Wheel_2&utm_medium=Widgets&utm_source=Powered_by_bik"
+          >
+            Powered by{' '}
+          </a>
+          <SVGFactory name={SVGName.BIK} />
+        </p>
+      </div>
+    </>
+  );
+};
+export default STW2UserDetails;

package/src/widgets/STW/stw2Pages/wheel.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import parse from 'html-react-parser';
+import { ISTWTemplate } from '../stw1';
+import SVGFactory, { SVGName } from '../components/svgFactory';
+import { decodeTextHelper } from '../../utility';
+import { ISTWWidgetCustomisation } from '@bikdotai/bik-models/dm';
+import {
+  ComponentStyleMap,
+  injectFontLink,
+} from '../../../utilities/styleUtils';
+
+const STW2Wheel = (props: ISTWTemplate) => {
+  const { widgetCustomisation, preview, isMobile, templateName } = props;
+  const { playScreenHeading, playScreenSubHeading, fontFamily, fontColour } =
+    widgetCustomisation as unknown as ISTWWidgetCustomisation;
+  const [currentStyle, setCurrentStyle] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  useEffect(() => {
+    if (fontFamily && fontFamily?.link) {
+      injectFontLink([fontFamily?.link]);
+    }
+  }, [fontFamily]);
+
+  useEffect(() => {
+    if (preview) {
+      if (isMobile) {
+        ComponentStyleMap[templateName]?.wheelPreviewMobile.then(
+          async style => {
+            setCurrentStyle((await style()).default);
+          },
+        );
+      } else {
+        ComponentStyleMap[templateName]?.wheelPreviewDesktop.then(
+          async style => {
+            setCurrentStyle((await style()).default);
+          },
+        );
+      }
+    } else {
+      ComponentStyleMap[templateName]?.globalStyle.then(async style => {
+        setCurrentStyle((await style()).default);
+      });
+    }
+  }, [preview, isMobile]);
+
+  if (!currentStyle) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <div className={currentStyle.bikCardContent}>
+        <div>
+          <div
+            id={currentStyle.bikHeader}
+            style={{ fontFamily: fontFamily.name, color: fontColour }}
+          >
+            {' '}
+            {parse(decodeTextHelper(playScreenHeading))}{' '}
+          </div>
+          <div
+            id={currentStyle.bikSubheader}
+            className={currentStyle.font16 + ' ' + currentStyle.fontWeight400}
+            style={{
+              fontFamily: fontFamily.name,
+              color: fontColour,
+              opacity: 0.8,
+            }}
+          >
+            {' '}
+            {parse(decodeTextHelper(playScreenSubHeading))}
+          </div>
+          <button
+            id={currentStyle.bikayiBtn}
+            className={currentStyle.bikCliamBtn}
+            onClick={() => {
+              setIsLoading(true);
+              props.onSpinHandle().then(() => {
+                setIsLoading(false);
+              });
+            }}
+            style={{
+              pointerEvents: isLoading ? 'none' : 'auto',
+              cursor: isLoading ? 'not-allowed' : 'pointer',
+              backgroundColor:
+                widgetCustomisation.playScreenButtonColour ?? '#000000',
+              color:
+                widgetCustomisation.playScreenButtonTextColour ?? '#ffffff',
+              fontFamily: fontFamily.name ?? 'inherit',
+            }}
+          >
+            {widgetCustomisation.playScreenButtonText ?? 'Spin to win'}
+          </button>
+        </div>
+      </div>
+      <div id={currentStyle.bikCtaContainer}>
+        <p
+          id={currentStyle.bikCta}
+          onClick={() =>
+            window.open(
+              'https://bik.ai/?utm_campaign=Spin_The_Wheel_2&utm_medium=Widgets&utm_source=Powered_by_bik',
+            )
+          }
+        >
+          <a
+            target="_blank"
+            href="https://bik.ai/?utm_campaign=Spin_The_Wheel_2&utm_medium=Widgets&utm_source=Powered_by_bik"
+          >
+            Powered by{' '}
+          </a>
+          <SVGFactory name={SVGName.BIK} />
+        </p>
+      </div>
+    </>
+  );
+};
+export default STW2Wheel;