@bikdotai/bik-widgets 1.0.0

package/src/widgets/STW/stw2Components/wheelDesign.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useEffect } from 'react';
+import {
+  addDiscountText,
+  getContrastColor,
+  getSegmentDetails,
+  updateSegmentWidth,
+} from '../utility';
+import {
+  ISegmentDetails,
+  ISTWWidgetCustomisation,
+  WIDGET_NAME,
+} from '@bikdotai/bik-models/dm';
+import { ComponentStyleMap } from '../../../utilities/styleUtils';
+
+const WheelDesign: React.FC<{
+  widgetCustomisation: ISTWWidgetCustomisation;
+  templateName: WIDGET_NAME;
+  preview: boolean;
+  isMobile: boolean;
+  onSpinHandle?: () => void;
+  onCloseHandle?: (
+    component: 'wheel' | 'userDetails' | 'couponDetails',
+  ) => void;
+}> = ({
+  widgetCustomisation,
+  preview,
+  isMobile,
+  onSpinHandle,
+  onCloseHandle,
+  templateName,
+}) => {
+  const {
+    spinnerColor,
+    spikesCount,
+    segmentColor1,
+    segmentColor2,
+    discountCodeTitle,
+    couponFont,
+  } = widgetCustomisation;
+  const [segmentWidth, setSegmentWidth] = useState<number>(null);
+  const [segmentDetailsFinal, setSegmentDetailsFinal] = useState<
+    ISegmentDetails[]
+  >([]);
+  const [segmentDividerAngle, setSegmentDividerAngle] = useState<number>(null);
+  const [currentStyle, setCurrentStyle] = useState<any>(null);
+  useEffect(() => {
+    setSegmentDividerAngle(90 - 360 / (spikesCount * 2));
+    setSegmentWidth(
+      updateSegmentWidth(spikesCount, preview, isMobile, templateName),
+    );
+    setSegmentDetailsFinal(
+      getSegmentDetails(
+        spikesCount,
+        segmentColor1,
+        segmentColor2,
+        discountCodeTitle,
+      ),
+    );
+  }, [preview, isMobile, spikesCount, segmentColor1, segmentColor2]);
+
+  useEffect(() => {
+    if (
+      discountCodeTitle &&
+      Object.keys(discountCodeTitle)?.length &&
+      segmentDetailsFinal?.length
+    ) {
+      setSegmentDetailsFinal(
+        addDiscountText(discountCodeTitle, segmentDetailsFinal),
+      );
+    }
+  }, [discountCodeTitle]);
+
+  const addTextLuminance = color => {
+    return getContrastColor(color);
+  };
+
+  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 id={currentStyle.outerContainer}>
+      <div className={currentStyle.mainContainer}>
+        <div className={currentStyle.bikContainerSpinner}>
+          <div
+            className={currentStyle.containerInner}
+            style={{ fontFamily: couponFont }}
+          >
+            <div className={currentStyle.containerOverlay}>
+              <div className={currentStyle.lightContainer}>
+                {' '}
+                <span style={{ '--n': 1 }}></span>{' '}
+                <span style={{ '--n': 2 }}></span>
+                <span style={{ '--n': 3 }}></span>{' '}
+                <span style={{ '--n': 4 }}></span>{' '}
+                <span style={{ '--n': 5 }}></span>
+                <span style={{ '--n': 6 }}></span>{' '}
+                <span style={{ '--n': 7 }}></span>{' '}
+                <span style={{ '--n': 8 }}></span>
+                <span style={{ '--n': 9 }}></span>{' '}
+                <span style={{ '--n': 10 }}></span>{' '}
+                <span style={{ '--n': 11 }}></span>
+                <span style={{ '--n': 12 }}></span>{' '}
+                <span style={{ '--n': 13 }}></span>{' '}
+                <span style={{ '--n': 14 }}></span>{' '}
+                <span style={{ '--n': 15 }}></span>{' '}
+                <span style={{ '--n': 16 }}></span>
+                <span style={{ '--n': 17 }}></span>{' '}
+              </div>
+            </div>
+            {segmentDetailsFinal.map((details, index) => {
+              return (
+                <div
+                  className={currentStyle.segment + ' ' + details.class}
+                  style={{
+                    backgroundColor: details.color,
+                    transform: `rotate(${details.rotationValue}deg)`,
+                    width: `${segmentWidth}px`,
+                    color:
+                      (index % 2 === 0
+                        ? widgetCustomisation.segmentTextColor1
+                        : widgetCustomisation.segmentTextColor2) ??
+                      addTextLuminance(details.color),
+                  }}
+                >
+                  <span
+                    style={{
+                      color: 'inherit',
+                    }}
+                    className={currentStyle.couponText}
+                  >
+                    {' '}
+                    {details.text}{' '}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <div className={currentStyle.containerSpin} onClick={onSpinHandle}>
+          <div className={currentStyle.bikSpinArrow}></div>
+          <div className={currentStyle.spinOuterContainer}>
+            <div
+              id={currentStyle.spin}
+              className={currentStyle.spinContent}
+              style={{ backgroundColor: spinnerColor }}
+            >
+              <div className={currentStyle.spinLogo}>
+                {' '}
+                <img
+                  id={currentStyle.spinLogoImage}
+                  src="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F62ac2b0f-dd14-4406-85d5-9d82f0416e9a?alt=media&token=b2c0564a-b716-45fe-a912-05c4bdd3f644"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default WheelDesign;

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

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import Coupon from '../../../components/couponDetails/coupon';
+import { STWContext } from '../context';
+import { ISTWTemplate } from '../stw1';
+import { ComponentStyleMap } from '../../../utilities/styleUtils';
+import SVGFactory, { SVGName } from '../components/svgFactory';
+
+const CouponDetails = (props: ISTWTemplate) => {
+  const {
+    templateName,
+    preview,
+    isMobile,
+    widgetCustomisation,
+    couponCodeDetails,
+  } = props;
+  const [currentStyle, setCurrentStyle] = useState<any>(null);
+
+  useEffect(() => {
+    if (preview) {
+      if (isMobile) {
+        ComponentStyleMap[templateName]?.thankyouPreviewMobile.then(
+          async style => {
+            setCurrentStyle((await style()).default);
+          },
+        );
+      } else {
+        ComponentStyleMap[templateName]?.thankyouPreviewDesktop.then(
+          async style => {
+            setCurrentStyle((await style()).default);
+          },
+        );
+      }
+    } else {
+      ComponentStyleMap[templateName]?.globalStyle.then(async style => {
+        setCurrentStyle((await style()).default);
+      });
+    }
+  }, [preview, isMobile]);
+
+  if (!currentStyle || !couponCodeDetails) {
+    return <></>;
+  }
+  return (
+    <STWContext.Provider value={{ preview, isMobile, templateName }}>
+      <div
+        className={currentStyle.bikWrapper}
+        style={{ fontFamily: widgetCustomisation.fontFamily?.name }}
+      >
+        <Coupon {...props} widgetName="Spin_The_Wheel_2" />
+      </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>
+    </STWContext.Provider>
+  );
+};
+export default CouponDetails;

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

@@ -0,0 +1,212 @@
+import React, { useEffect, useState } from 'react';
+import { ISTWTemplate } from '../stw1';
+import {
+  BACKGROUND_TYPE,
+  ISTWWidgetCustomisation,
+} from '@bikdotai/bik-models/dm';
+import useIsMobile from '../../../hooks/useIsMobile';
+import {
+  ComponentStyleMap,
+  injectFontLink,
+} from '../../../utilities/styleUtils';
+
+const STW2 = (props: ISTWTemplate) => {
+  const {
+    widgetCustomisation,
+    onSpinHandle,
+    showComponents,
+    preview,
+    isMobile,
+    templateName,
+    couponCodeDetails,
+    onCloseHandle,
+  } = props;
+  const {
+    fontFamily,
+    backgroundColour,
+    backgroundType,
+    backgroundImageDesktop,
+    backgroundImageMobile,
+  } = widgetCustomisation as unknown as ISTWWidgetCustomisation;
+  const [currentStyle, setCurrentStyle] = useState<any>(null);
+  const [STW2Components, setSTW2Components] = useState<any>();
+  const [WheelJSX, setWheelJSX] = useState<any>();
+  const [showWheel, setShowWheel] = useState<boolean>(false);
+  const isMobileDevice = useIsMobile();
+  useEffect(() => {
+    if (fontFamily && fontFamily?.link) {
+      injectFontLink([fontFamily?.link]);
+    }
+  }, [fontFamily]);
+
+  useEffect(() => {
+    if (preview && showComponents) {
+      if (showComponents.wheel) {
+        if (isMobile) {
+          ComponentStyleMap[templateName]?.wheelPreviewMobile.then(
+            async style => {
+              setCurrentStyle((await style()).default);
+            },
+          );
+        } else {
+          ComponentStyleMap[templateName]?.wheelPreviewDesktop.then(
+            async style => {
+              setCurrentStyle((await style()).default);
+            },
+          );
+        }
+      } else if (showComponents.userDetails) {
+        if (isMobile) {
+          ComponentStyleMap[templateName]?.userInputPreviewMobile.then(
+            async style => {
+              setCurrentStyle((await style()).default);
+            },
+          );
+        } else {
+          ComponentStyleMap[templateName]?.userInputPreviewDesktop.then(
+            async style => {
+              setCurrentStyle((await style()).default);
+            },
+          );
+        }
+      } else if (showComponents.couponDetails) {
+        if (isMobile) {
+          ComponentStyleMap[templateName]?.thankyouPreviewMobile.then(
+            async style => {
+              setCurrentStyle((await style()).default);
+            },
+          );
+        } else {
+          ComponentStyleMap[templateName]?.thankyouPreviewDesktop.then(
+            async style => {
+              setCurrentStyle((await style()).default);
+            },
+          );
+        }
+      }
+    } else {
+      ComponentStyleMap[templateName]?.globalStyle.then(async style => {
+        setCurrentStyle((await style()).default);
+      });
+    }
+  }, [preview, isMobile]);
+
+  useEffect(() => {
+    if (showComponents && Object.keys(showComponents).length) {
+      const showWheelTemp =
+        showComponents?.wheel ||
+        (!showComponents?.wheel &&
+          document.body.clientWidth > 450 &&
+          !preview) ||
+        (!showComponents?.wheel && preview && !isMobile);
+      setShowWheel(showWheelTemp);
+      if (showWheelTemp) {
+        import('../stw2Components/wheelDesign').then(component => {
+          const ComponentTemp = component;
+          setWheelJSX(ComponentTemp);
+        });
+      }
+      if (showComponents.wheel) {
+        import('./wheel').then(component => {
+          const ComponentTemp = component;
+          setSTW2Components(ComponentTemp);
+        });
+      } else if (showComponents.userDetails) {
+        import('./userDetails').then(component => {
+          const ComponentTemp = component;
+          setSTW2Components(ComponentTemp);
+        });
+      } else if (showComponents.couponDetails) {
+        import('./couponDetails').then(component => {
+          const ComponentTemp = component;
+          setSTW2Components(ComponentTemp);
+        });
+      }
+    }
+  }, [showComponents]);
+
+  const closeHandle = () => {
+    onCloseHandle(
+      showComponents.wheel
+        ? 'wheel'
+        : showComponents.userDetails
+          ? 'userDetails'
+          : 'couponDetails',
+    );
+  };
+  if (!currentStyle) {
+    return <></>;
+  }
+  return (
+    <>
+      <div className={currentStyle.bikSpinOverlay}></div>
+      <div className={currentStyle.mainWrapper}>
+        <div className={currentStyle.closeBtnWrapper}>
+          <div className={currentStyle.closeBtn} onClick={closeHandle}>
+            {' '}
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 32 32"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M24.9428 8.94265C25.4635 8.42195 25.4635 7.57773 24.9428 7.05703C24.4221 6.53633 23.5778 6.53633 23.0572 7.05703L16 14.1142L8.94277 7.05703C8.42207 6.53633 7.57785 6.53633 7.05715 7.05703C6.53645 7.57773 6.53645 8.42195 7.05715 8.94265L14.1143 15.9998L7.05715 23.057C6.53645 23.5777 6.53645 24.4219 7.05715 24.9426C7.57785 25.4633 8.42207 25.4633 8.94277 24.9426L16 17.8855L23.0572 24.9426C23.5778 25.4633 24.4221 25.4633 24.9428 24.9426C25.4635 24.4219 25.4635 23.5777 24.9428 23.057L17.8856 15.9998L24.9428 8.94265Z"
+                fill="#142236"
+              />
+            </svg>{' '}
+          </div>
+        </div>
+        <div
+          className={currentStyle.wrapper}
+          style={
+            backgroundType === BACKGROUND_TYPE.COLOUR
+              ? { backgroundColor: backgroundColour }
+              : {
+                  background: `url(${isMobileDevice || isMobile ? backgroundImageMobile : backgroundImageDesktop})`,
+                  backgroundSize: 'contain',
+                  backgroundRepeat: 'round',
+                  backgroundPosition: 'top',
+                }
+          }
+        >
+          {showWheel && WheelJSX ? (
+            <WheelJSX.default
+              showComponents={showComponents}
+              widgetCustomisation={widgetCustomisation}
+              onSpinHandle={onSpinHandle}
+              preview={preview}
+              isMobile={isMobile}
+              templateName={templateName}
+            />
+          ) : (
+            <></>
+          )}
+          {showComponents?.wheel && STW2Components ? (
+            <STW2Components.default {...props} onSpinHandle={onSpinHandle} />
+          ) : (
+            <></>
+          )}
+          {showComponents?.userDetails && STW2Components ? (
+            <STW2Components.default
+              {...props}
+              couponCodeDetails={couponCodeDetails}
+            />
+          ) : (
+            <></>
+          )}
+          {showComponents?.couponDetails && STW2Components ? (
+            <STW2Components.default
+              {...props}
+              couponCodeDetails={couponCodeDetails}
+            />
+          ) : (
+            <></>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+export default STW2;