@bikdotai/bik-widgets 1.0.0 → 1.0.1

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

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

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

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