@bikdotai/bik-widgets 1.0.0

package/src/widgets/STW/wheel.tsx

@@ -0,0 +1,304 @@
+import React, { useEffect, useState } from 'react';
+import parse from 'html-react-parser';
+import {
+  addDiscountText,
+  colorLuminance,
+  getSegmentDetails,
+  updateSegmentWidth,
+} from './utility';
+import { ISTWTemplate } from './stw1';
+import SVGFactory, { SVGName } from './components/svgFactory';
+import { decodeTextHelper } from '../utility';
+import {
+  BACKGROUND_TYPE,
+  ISTWWidgetCustomisation,
+  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';
+
+const Wheel = (props: ISTWTemplate) => {
+  const {
+    widgetCustomisation,
+    onSpinHandle,
+    onCloseHandle,
+    preview,
+    isMobile,
+    templateName,
+  } = props;
+  const {
+    fontFamily,
+    fontColour,
+    backgroundType,
+    backgroundColour,
+    backgroundImageMobile,
+    backgroundImageDesktop,
+    playScreenHeading,
+    playScreenSubHeading,
+    spinnerColor,
+    spinnerTextColor,
+    spikesCount,
+    segmentColor1,
+    segmentTextColor1,
+    segmentTextColor2,
+    segmentColor2,
+    discountCodeTitle,
+    multiLingualConfigurations,
+  } = widgetCustomisation as ISTWWidgetCustomisation;
+  const [segmentWidth, setSegmentWidth] = useState<number>(null);
+  const [segmentDetailsFinal, setSegmentDetailsFinal] = useState<any[]>([]);
+  const [segmentDividerAngle, setSegmentDividerAngle] = useState<number>(null);
+  const [currentStyle, setCurrentStyle] = useState<any>(null);
+  const isMobileDevice = useIsMobile();
+  const languageUtils = new LanguageUtils();
+  const [widgetLanguage, setWidgetLanguage] = useState(LANGUAGE_VALUES.ENGLISH);
+
+  useEffect(() => {
+    setSegmentDividerAngle(90 - 360 / (spikesCount * 2));
+    setSegmentWidth(
+      updateSegmentWidth(spikesCount, preview, isMobile, templateName),
+    );
+    let segmentDetailsTemp = getSegmentDetails(
+      spikesCount,
+      segmentColor1,
+      segmentColor2,
+      discountCodeTitle,
+    );
+    if (
+      discountCodeTitle &&
+      Object.keys(discountCodeTitle)?.length &&
+      segmentDetailsTemp?.length
+    ) {
+      segmentDetailsTemp = addDiscountText(
+        discountCodeTitle,
+        segmentDetailsTemp,
+      );
+    }
+    setSegmentDetailsFinal(segmentDetailsTemp);
+  }, [
+    preview,
+    isMobile,
+    spikesCount,
+    segmentColor1,
+    segmentColor2,
+    discountCodeTitle,
+  ]);
+
+  useEffect(() => {
+    if (fontFamily && fontFamily?.link) {
+      injectFontLink([fontFamily?.link]);
+    }
+  }, [fontFamily]);
+
+  const addTextLuminance = color => {
+    return colorLuminance(color, -0.5);
+  };
+
+  useEffect(() => {
+    if (preview) {
+      if (isMobile) {
+        ComponentStyleMap[templateName]?.wheelPreviewMobile
+          .then()
+          .then(async style => {
+            setCurrentStyle((await style()).default);
+          });
+      } else {
+        ComponentStyleMap[templateName]?.wheelPreviewDesktop
+          .then()
+          .then(async style => {
+            setCurrentStyle((await style()).default);
+          });
+      }
+    } else {
+      ComponentStyleMap[templateName]?.globalStyle.then().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 (
+    <>
+      {/* <button onClick={() => setIsMobile(!isMobile)}>Toggle</button> */}
+      <div className={currentStyle.bikSpinOverlay}>
+        <div className={currentStyle.bikMainWrapper}>
+          <div
+            className={
+              currentStyle.bikCloseBtnWrapper +
+              ' ' +
+              currentStyle.bikCloseAbsolute
+            }
+          >
+            <div
+              className={currentStyle.bikCloseBtn}
+              onClick={() => onCloseHandle('wheel')}
+            >
+              <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.bikWrapper + ' ' + currentStyle.bikContainerPadding
+            }
+            style={
+              backgroundType === BACKGROUND_TYPE.COLOUR
+                ? { backgroundColor: backgroundColour }
+                : {
+                    background: `url(${isMobileDevice || isMobile ? backgroundImageMobile : backgroundImageDesktop})`,
+                    backgroundSize: 'contain',
+                    backgroundRepeat: 'round',
+                    backgroundPosition: 'top',
+                  }
+            }
+          >
+            <div id="bik-header1" className={currentStyle.bikHeaderContainer}>
+              <div
+                id={currentStyle.bikHeader}
+                style={{ fontFamily: fontFamily.name, color: fontColour }}
+              >
+                {parse(
+                  decodeTextHelper(
+                    multiLingualConfigurations?.[widgetLanguage]
+                      ?.playScreenHeading ?? playScreenHeading,
+                  ),
+                )}{' '}
+              </div>
+              <div
+                id={currentStyle.bikSubheader}
+                className={`${currentStyle.font16}, ${currentStyle.fontWeight400}`}
+                style={{
+                  fontFamily: fontFamily.name,
+                  color: fontColour,
+                  opacity: 0.8,
+                }}
+              >
+                {' '}
+                {parse(
+                  decodeTextHelper(
+                    multiLingualConfigurations?.[widgetLanguage]
+                      ?.playScreenSubHeading ?? playScreenSubHeading,
+                  ),
+                )}{' '}
+              </div>
+              <div
+                className={currentStyle.poweredBy}
+                style={{ opacity: 0.4 }}
+                onClick={() =>
+                  window.open(
+                    'https://bik.ai/?utm_campaign=Spin_The_Wheel_1&utm_medium=Widgets&utm_source=Powered_by_bik',
+                  )
+                }
+              >
+                <a
+                  target="_blank"
+                  rel="noreferrer"
+                  href="https://bik.ai/?utm_campaign=Spin_The_Wheel_1&utm_medium=Widgets&utm_source=Powered_by_bik"
+                  style={{ color: fontColour }}
+                >
+                  {languageUtils.getPoweredByMessage(widgetLanguage)}
+                </a>
+                <SVGFactory name={SVGName.BIK} color={fontColour} />
+              </div>
+            </div>
+            <div className={currentStyle.bikMainContainer}>
+              <div className={currentStyle.bikContainerSpinner}>
+                <div
+                  className={currentStyle.bikContainerInner}
+                  style={{ fontFamily: fontFamily.name }}
+                >
+                  <div className={currentStyle.bikContainerOverlay}></div>
+                  {segmentDetailsFinal.map((details, index) => {
+                    return (
+                      <div
+                        key={JSON.stringify(details)}
+                        className={
+                          currentStyle.bikSegment + ' ' + details.class
+                        }
+                        style={{
+                          backgroundColor: details.color,
+                          transform: `rotate(${details.rotationValue}deg)`,
+                          width: `${segmentWidth}px`,
+                          color:
+                            (index % 2 === 0
+                              ? segmentTextColor1
+                              : segmentTextColor2) ??
+                            addTextLuminance(details.color),
+                        }}
+                      >
+                        <span
+                          style={{
+                            color: 'inherit',
+                          }}
+                          className={currentStyle.bikCouponText}
+                        >
+                          {details.text}
+                        </span>
+                        <span
+                          id="testing"
+                          className={currentStyle.bikSegmentDivider}
+                          style={{
+                            transform: `rotate(-${segmentDividerAngle}deg)`,
+                          }}
+                        ></span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+              <div
+                className={currentStyle.bikContainerSpin}
+                onClick={onSpinHandle}
+              >
+                <div className={currentStyle.bikSpinArrow}></div>
+                <div
+                  id="spin"
+                  className={currentStyle.bikSpinContent}
+                  style={{ backgroundColor: spinnerColor }}
+                >
+                  <div
+                    className={currentStyle.bikSpinLogo}
+                    style={{
+                      color: spinnerTextColor ?? addTextLuminance(spinnerColor),
+                    }}
+                  >
+                    SPIN
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Wheel;

package/src/widgets/ScratchCard/ScratchOff/scratchOff.tsx

@@ -0,0 +1,157 @@
+import React, { Component, ReactNode, RefObject } from 'react';
+
+interface ScratchOffProps {
+  width?: number;
+  height?: number;
+  coverImage?: string;
+  brushImage?: string;
+  children?: ReactNode;
+  onScratched: () => void;
+  scratchThreshold?: number; //0 to 1
+}
+
+interface ScratchOffState {
+  isScratching: boolean;
+  scratched: boolean;
+}
+
+const defaultScratchCover =
+  'data:image/png;base64,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';
+const defaultBrush =
+  'data:image/png;base64,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';
+
+class ScratchOff extends Component<ScratchOffProps, ScratchOffState> {
+  private canvasRef: RefObject<HTMLCanvasElement>;
+  private imageRef: RefObject<HTMLImageElement>;
+  private brushImage: HTMLImageElement;
+  private scratchThreshold: number;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isScratching: false,
+      scratched: false,
+    };
+
+    this.canvasRef = React.createRef();
+    this.imageRef = React.createRef();
+    this.brushImage = new Image();
+    this.brushImage.src = defaultBrush;
+    this.scratchThreshold =
+      (this.props.width || 100) * (this.props.height || 40) * 0.5;
+  }
+
+  componentDidMount() {
+    this.initializeCanvas();
+  }
+
+  initializeCanvas() {
+    const canvas = this.canvasRef.current;
+    const ctx = canvas.getContext('2d');
+
+    // Set the size of the canvas
+    canvas.width = this.props.width || 200;
+    canvas.height = this.props.height || 40;
+
+    // Load the cover image
+    const image = new Image();
+    image.src = this.props.coverImage || defaultScratchCover;
+    image.onload = () => {
+      // Draw the image on the canvas
+      ctx!.drawImage(image, 0, 0, canvas.width, canvas.height);
+    };
+
+    // Set up event listeners for both mouse and touch events
+    canvas.addEventListener('mousedown', this.startScratching);
+    canvas.addEventListener('mousemove', this.handleScratching);
+    canvas.addEventListener('mouseup', this.stopScratching);
+    //canvas.addEventListener('mouseleave', this.stopScratching);
+
+    canvas.addEventListener('touchstart', this.startScratching);
+    canvas.addEventListener('touchmove', this.handleTouchScratching);
+    canvas.addEventListener('touchend', this.stopScratching);
+  }
+
+  startScratching = () => {
+    this.setState({ isScratching: true });
+  };
+
+  stopScratching = () => {
+    this.setState({ isScratching: false });
+  };
+
+  handleScratching = e => {
+    if (this.state.isScratching) {
+      this.scratch(e);
+    }
+  };
+
+  handleTouchScratching = e => {
+    if (this.state.isScratching) {
+      // Prevent the default touch move behavior, which may scroll the page
+      e.preventDefault();
+      this.scratch(e.touches[0]);
+    }
+  };
+
+  scratch(touch) {
+    const canvas = this.canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const { clientX, clientY } = touch;
+    const { left, top } = canvas.getBoundingClientRect();
+
+    // Calculate the position of the touch relative to the canvas
+    const x = clientX - left;
+    const y = clientY - top;
+
+    // Save the current context state to restore later
+    ctx!.save();
+
+    // Change the global composite operation to source-over for drawing the brush
+    ctx!.globalCompositeOperation = 'destination-out';
+
+    // Draw the brush image at the current touch position
+    ctx!.drawImage(
+      this.brushImage,
+      x - this.brushImage.width / 2,
+      y - this.brushImage.height / 2,
+    );
+
+    // Restore the previous context state
+    ctx!.restore();
+
+    // Check if the entire canvas has been scratched off (no visible cover)
+    const imageData = ctx!.getImageData(0, 0, canvas.width, canvas.height);
+    const clearedPixels = Array.from(imageData.data).filter(
+      value => value === 0,
+    ).length;
+
+    if (clearedPixels >= this.scratchThreshold) {
+      // If the threshold is met, automatically scratch the remaining area
+      this.autoScratch(canvas, ctx);
+    }
+  }
+
+  autoScratch(canvas, ctx) {
+    // Clear the entire canvas to reveal the content
+    ctx!.clearRect(0, 0, canvas.width, canvas.height);
+    // Draw the text or content
+    this.setState({ scratched: true });
+    this.props.onScratched();
+  }
+
+  render() {
+    const { scratched } = this.state;
+    const { children } = this.props;
+    return (
+      <div>
+        <canvas ref={this.canvasRef} style={{ cursor: 'pointer' }}>
+          Your browser does not support the HTML5 canvas element.
+        </canvas>
+        {scratched && children}
+      </div>
+    );
+  }
+}
+
+export default ScratchOff;

package/src/widgets/ScratchCard/config.ts

@@ -0,0 +1,152 @@
+const config = {
+  preview: false,
+  id: 'id',
+  environment: 'staging',
+  visibility: {
+    visiblePages: ['/*'],
+    triggers: {
+      fabButtonVisibility: true,
+      hasFAbButton: true,
+      isPlayable: false,
+      pageScroll: 10,
+      viewLimit: 2000,
+      playLimit: null,
+      timeDelay: null,
+      frequency: 24,
+      exitIntentTimeDelay: 1,
+    },
+  },
+  leadGeneration: {
+    mandatoryOption: {
+      isEmail: false,
+      isSms: false,
+      isWhatsapp: true,
+    },
+    optionalOption: {
+      isSms: true,
+      isWhatsapp: false,
+      isEmail: true,
+    },
+    optionalOptions: {
+      isSms: true,
+      isWhatsapp: false,
+      isEmail: true,
+    },
+  },
+  info: {
+    storeId: 'storeId',
+  },
+  widgetCustomisation: {
+    postPlayScreenBackgroundColour: '#ffffff',
+    winningScreenBackgroundColour: '#ffffff',
+    cardTitle: 'Scratch & Win!',
+    cardTheme: 'linear-gradient(220.24deg, #E8465E 26.59%, #FED56E 88.17%)',
+    cardDesktopImg:
+      'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fb14f911b-25e7-47f1-b8f4-59b1fdb11288?alt=media&token=2074d0e7-f7b4-4779-94dd-d24b77340dca',
+    cardMobileImg:
+      'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F03395f2c-c8d6-44e1-86f2-e45429da2621?alt=media&token=818eee8d-3157-4a33-ad3c-86b7e22dfd28',
+    fabBackgroundColor: '#000000',
+    fabMobileSize: 50,
+    fabWebSize: 50,
+    fabPosition: 'BOTTOM_RIGHT',
+    fabPositioner: {
+      bottom: '30px',
+      right: '30px',
+    },
+    iconColor: '#ffffff',
+    fabIconLink:
+      'https://storage.googleapis.com/bik-widget-mfe/bap%2Ffab-assets%2Ficons%2Fbik%2Fgift.svg',
+    imageType: 'TEXT_BASED',
+    backgroundImage:
+      'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fb14f911b-25e7-47f1-b8f4-59b1fdb11288?alt=media&token=2074d0e7-f7b4-4779-94dd-d24b77340dca',
+    scratchLayerColor: '#F5F5F5',
+    postPlayScreenTitle: '<p><strong>Special prize only for you!</strong></p>',
+    postPlayScreenSubTitle: '<p>You have won discount code</p>',
+    postPlayScreenButtonText: 'Claim the price',
+    postPlayScreenButtonTextColour: '#ffffff',
+    postPlayScreenButtonColour: '#000000',
+    winningScreenTitle: '<p><strong>Congratulations!</strong></p>',
+    winningScreenSubTitle: '<p>To claim prize fill the details below</p>',
+    winningScreenCouponBgColour: '#ffffff',
+    winningScreenCouponTextColour: '#000000',
+    winningScreenButtonColour: '#000000',
+    winningScreenButtonTextColour: '#ffffff',
+    winningScreenButtonText: 'Copy and use discount',
+    winningScreenIcon:
+      'https://storage.googleapis.com/bik-widget-mfe/bap%2Fpost-play-screen-assets%2Fimages%2Fbik%2FconfettiOne.png',
+    widgetName: 'Scratch the card sxmo',
+    backgroundType: 'colour',
+    backgroundColour: '#ffffff',
+    fontFamily: {
+      name: 'Inter',
+      link: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap',
+    },
+    fontColour: '#000000',
+    multiLingualConfigurations: {
+      ENGLISH: {
+        cardTitle: 'Scratch & Win!',
+        postPlayScreenTitle:
+          '<p><strong>Special prize only for you!</strong></p>',
+        postPlayScreenSubTitle: '<p>You have won discount code</p>',
+        postPlayScreenButtonText: 'Claim the price',
+        winningScreenTitle: '<p><strong>Congratulations!</strong></p>',
+        winningScreenSubTitle: '<p>To claim prize fill the details below</p>',
+        winningScreenButtonText: 'Copy and use discount',
+      },
+      ARABIC: {
+        cardTitle: 'خدش واربح!',
+        postPlayScreenTitle: '<p><strong>جائزة خاصة فقط لك!</strong></p>',
+        postPlayScreenSubTitle: '<p>لقد فزت برمز خصم</p>',
+        postPlayScreenButtonText: 'ادعي السعر',
+        winningScreenTitle: '<p><strong>تهانينا!</strong></p>',
+        winningScreenSubTitle:
+          '<p>للحصول على الجائزة، قم بملء التفاصيل أدناه</p>',
+        winningScreenButtonText: 'انسخ واستخدم الخصم',
+      },
+      FRENCH: {
+        cardTitle: 'Grattez et gagnez!',
+        postPlayScreenTitle:
+          '<p><strong>Prix spécial uniquement pour vous!</strong></p>',
+        postPlayScreenSubTitle: '<p>Vous avez gagné un code de réduction</p>',
+        postPlayScreenButtonText: 'Réclamer le prix',
+        winningScreenTitle: '<p><strong>Félicitations!</strong></p>',
+        winningScreenSubTitle:
+          '<p>Pour réclamer le prix, remplissez les détails ci-dessous</p>',
+        winningScreenButtonText: 'Copier et utiliser la réduction',
+      },
+      SPANISH: {
+        cardTitle: '¡Rasca y gana!',
+        postPlayScreenTitle:
+          '<p><strong>¡Premio especial solo para ti!</strong></p>',
+        postPlayScreenSubTitle: '<p>Has ganado un código de descuento</p>',
+        postPlayScreenButtonText: 'Reclama el precio',
+        winningScreenTitle: '<p><strong>¡Felicidades!</strong></p>',
+        winningScreenSubTitle:
+          '<p>Para reclamar el premio, complete los detalles a continuación</p>',
+        winningScreenButtonText: 'Copiar y usar el descuento',
+      },
+      MALAY: {
+        cardTitle: 'Gores dan Menang!',
+        postPlayScreenTitle:
+          '<p><strong>Hadiah istimewa hanya untuk anda!</strong></p>',
+        postPlayScreenSubTitle: '<p>Anda telah memenangi kod diskaun</p>',
+        postPlayScreenButtonText: 'Tuntut hadiah',
+        winningScreenTitle: '<p><strong>Tahniah!</strong></p>',
+        winningScreenSubTitle:
+          '<p>Untuk menuntut hadiah, isikan butiran di bawah</p>',
+        winningScreenButtonText: 'Salin dan gunakan diskaun',
+      },
+    },
+    discountTitle: 'af',
+  },
+  storeWidgetConfig: {
+    '/*': [
+      {
+        widgetId: 'id',
+        fabPosition: 'BOTTOM_LEFT',
+      },
+    ],
+  },
+};
+
+export default config;