@bikdotai/bik-widgets 1.0.0

package/src/widgets/CentrallyAlignedPopup/style.module.css

@@ -0,0 +1,283 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');
+
+.content {
+  background-color: white;
+  box-shadow: rgb(0 0 0 / 12%) 0px 2px 8px;
+  width: 300px;
+  border-radius: 8px;
+  border-width: 10px;
+}
+
+.cardContainer {
+  position: relative;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.card {
+  height: 200px;
+  position: relative;
+  border-radius: 5px 5px 0 0;
+}
+
+.cardOverlay {
+  justify-content: center;
+  align-items: center;
+  width: 96%;
+  margin-left: 3px;
+  height: 50px;
+  display: flex;
+  background-color: white;
+  border-radius: 5px 5px 0 0;
+  position: absolute;
+  bottom: 0px;
+}
+
+.overlay {
+  position: fixed;
+  right: 30px;
+  bottom: 30px;
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.parentContent {
+  border-radius: 4px;
+  background-color: white;
+}
+
+.crossBtn {
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  padding: 4px;
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  top: -90px;
+  left: 278px;
+  border: none;
+  min-width: unset !important;
+}
+
+.bannerImageContainer {
+  overflow: hidden;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.bannerImage {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-left: 4px;
+  border-right: 4px;
+  border-top: 4px;
+  overflow: hidden;
+  width: 300px;
+}
+
+.titleContainer {
+  position: absolute;
+  top: 346px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  padding: 10px;
+  width: 272px;
+  background-color: white;
+}
+
+.title {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  font-feature-settings:
+    'tnum' on,
+    'lnum' on,
+    'case' on,
+    'ss04' on;
+  color: #212121;
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+}
+
+.poweredByBikContainer {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  cursor: pointer;
+  padding: 4px;
+}
+
+.poweredByBik {
+  font-family: 'Inter';
+  font-style: normal;
+  background: none;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  font-feature-settings:
+    'tnum' on,
+    'lnum' on,
+    'case' on,
+    'ss04' on;
+  color: #9e9e9e;
+  display: flex;
+  align-items: center;
+}
+
+.poweredByBik svg {
+  margin-left: 8px !important;
+}
+
+.cardParent {
+  background-color: white;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  padding: 10px;
+}
+
+@media screen and (max-width: 768px) {
+  .content {
+    background-color: white;
+    width: 300px;
+    border-radius: 8px;
+    border-width: 10px;
+  }
+
+  .cardContainer {
+    position: relative;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+
+  .card {
+    height: 150px;
+    position: relative;
+    border-radius: 5px 5px 0 0;
+  }
+
+  .cardOverlay {
+    justify-content: center;
+    align-items: center;
+    width: 98%;
+    margin-left: 3px;
+    height: 30px;
+    display: flex;
+    background-color: white;
+    border-radius: 5px 5px 0 0;
+    position: absolute;
+    bottom: 0px;
+  }
+
+  .overlay {
+    position: fixed;
+    right: 30px;
+    bottom: 98px;
+    border-radius: 5px;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
+
+  .parentContent {
+    border-radius: 4px;
+    background-color: white;
+  }
+
+  .crossBtn {
+    width: 32px;
+    height: 32px;
+    border-radius: 16px;
+    padding: 4px;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    top: 461px;
+    left: 129px;
+    border: none;
+  }
+
+  .bannerImageContainer {
+    overflow: hidden;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+
+  .bannerImage {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-left: 4px;
+    border-right: 4px;
+    border-top: 4px;
+    overflow: hidden;
+    border-color: red;
+    width: 100%;
+  }
+
+  .titleContainer {
+    position: absolute;
+    top: 346px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding: 8px;
+    width: 272px;
+    background-color: white;
+  }
+
+  .title {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 24px;
+    text-align: center;
+    font-feature-settings:
+      'tnum' on,
+      'lnum' on,
+      'case' on,
+      'ss04' on;
+    color: #212121;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+  }
+
+  .poweredByBik {
+    background: none;
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    font-feature-settings:
+      'tnum' on,
+      'lnum' on,
+      'case' on,
+      'ss04' on;
+    color: #9e9e9e;
+  }
+
+  .cardParent {
+    background-color: white;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    padding: 8px;
+  }
+}

package/src/widgets/DirectReward/components/couponDetails.tsx

@@ -0,0 +1,265 @@
+import React, { useEffect, useState } from 'react';
+import SVGFactory, { SVGName } from 'widgets/STW/components/svgFactory';
+import { IDRTemplate } from '..';
+import CopyIcon from '../../../icons/copyIcon';
+import { decodeTextHelper } from '../../utility';
+import { WIDGET_NAME } from '@bikdotai/bik-models/dm';
+import { ComponentStyleMap } from '../../../utilities/styleUtils';
+import { LanguageUtils } from '../../../utilities/languageUtilities';
+
+const CouponDetails = (props: IDRTemplate) => {
+  const languageUtilities = new LanguageUtils();
+  const { discountCodeDetails, preview, isMobile, templateName } = props;
+  const { discountCodeTitle, discountCodeDescription } = discountCodeDetails;
+  const multiLingualData =
+    props?.widgetCustomisation?.multiLingualConfigurations?.[
+      props.widgetLanguage
+    ];
+  const [btnText, setBtnText] = useState<string>(
+    multiLingualData?.postPlayScreenButtonText ??
+      props.widgetCustomisation.postPlayScreenButtonText ??
+      discountCodeTitle,
+  );
+  const [currentStyle, setCurrentStyle] = useState<any>(null);
+
+  useEffect(() => {
+    setBtnText(
+      multiLingualData?.postPlayScreenButtonText ??
+        props.widgetCustomisation.postPlayScreenButtonText,
+    );
+  }, [
+    multiLingualData?.postPlayScreenButtonText,
+    props.widgetCustomisation.postPlayScreenButtonText,
+  ]);
+
+  const onCopyHandle = () => {
+    const cb = navigator.clipboard;
+    cb.writeText(discountCodeDetails.discountCodeTitle).then(() => {
+      setBtnText(languageUtilities.getCopiedMessage(props.widgetLanguage));
+    });
+  };
+
+  const onRedirectionHandle = () => {
+    window.open(
+      props.widgetCustomisation.postPlayScreenButtonRedirection,
+      '_blank',
+    );
+  };
+
+  useEffect(() => {
+    if (preview && isMobile) {
+      ComponentStyleMap[templateName]?.thankyouPreviewMobile.then(
+        async style => {
+          setCurrentStyle((await style()).default);
+        },
+      );
+    } else if (preview && !isMobile) {
+      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) {
+    return <></>;
+  }
+
+  let postPlayScreenTitleSize: string;
+  let postPlayScreenSubTitleSize: string;
+
+  if (preview) {
+    postPlayScreenTitleSize = isMobile ? '12px' : '11px';
+    postPlayScreenSubTitleSize = isMobile ? '11px' : '9px';
+  } else {
+    postPlayScreenTitleSize = isMobile ? '20px' : `26px`;
+    postPlayScreenSubTitleSize = isMobile ? '14px' : `16px`;
+  }
+
+  return (
+    <>
+      {templateName === WIDGET_NAME.DIRECT_REWARD && (
+        <div
+          className={currentStyle.bikDRContentWrapper}
+          id={`bik-${props.id}-coupon-screen`}
+        >
+          <div className={currentStyle.bikDRTitleWrapper}>
+            <div
+              className={currentStyle.bikDRTitle}
+              style={{
+                fontSize: postPlayScreenTitleSize,
+                fontFamily: props.widgetCustomisation.fontFamily?.name,
+                color: props.widgetCustomisation?.fontColour,
+              }}
+              dangerouslySetInnerHTML={{
+                __html: decodeTextHelper(
+                  multiLingualData?.postPlayScreenTitle ??
+                    props.widgetCustomisation.postPlayScreenTitle,
+                ),
+              }}
+            />
+            <div
+              className={currentStyle.bikDRSubTitle}
+              style={{
+                fontSize: postPlayScreenSubTitleSize,
+                fontFamily: props.widgetCustomisation.fontFamily?.name,
+                color: props.widgetCustomisation?.fontColour,
+              }}
+              dangerouslySetInnerHTML={{
+                __html: decodeTextHelper(
+                  multiLingualData?.postPlayScreenSubTitle ??
+                    props.widgetCustomisation.postPlayScreenSubTitle,
+                ),
+              }}
+            />
+          </div>
+          <div className={currentStyle.bikDRDiscountCodeDetailsMain}>
+            <div
+              style={{
+                backgroundColor:
+                  props.widgetCustomisation.postPlayScreenCouponBgColour,
+                borderColor:
+                  props.widgetCustomisation.postPlayScreenCouponBorderColour,
+                fontFamily: props.widgetCustomisation.fontFamily?.name,
+              }}
+              className={currentStyle.bikDRDiscountCodeDetailsContainer}
+            >
+              <h4>{discountCodeTitle}</h4>
+              <p>{discountCodeDescription}</p>
+            </div>
+            <button
+              style={{
+                backgroundColor:
+                  props.widgetCustomisation.postPlayScreenButtonColour,
+                color: props.widgetCustomisation.postPlayScreenButtonTextColour,
+                fontFamily: props.widgetCustomisation.fontFamily?.name,
+              }}
+              onClick={
+                props.widgetCustomisation.postPlayScreenButtonRedirection
+                  ? onRedirectionHandle
+                  : onCopyHandle
+              }
+            >
+              <div
+                style={{
+                  marginRight: 7,
+                  color:
+                    props.widgetCustomisation.postPlayScreenButtonTextColour,
+                }}
+              >
+                {btnText}
+              </div>
+              {!props.widgetCustomisation.isRedirectionButtonEnabled && (
+                <CopyIcon
+                  colour={
+                    props.widgetCustomisation.postPlayScreenButtonTextColour
+                  }
+                />
+              )}
+            </button>
+          </div>
+          {!props.widgetCustomisation.hidePoweredBy && (
+            <p className={currentStyle.poweredBy}>
+              <a
+                href="https://bik.ai/?utm_campaign=Direct_Reward&utm_medium=Widgets&utm_source=Powered_by_bik"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {languageUtilities.getPoweredByMessage(props.widgetLanguage)}
+              </a>
+              <SVGFactory name={SVGName.BIK} />
+            </p>
+          )}
+        </div>
+      )}
+      {templateName === WIDGET_NAME.LEAD_GENERATOR && (
+        <div
+          className={currentStyle.bikDRContentWrapper}
+          id={`bik-${props.id}-coupon-screen`}
+        >
+          <div>
+            {props.widgetCustomisation.postPlayScreenTitleIcon && (
+              <div className={currentStyle.leadGenPostPlayIconWrapper}>
+                <img
+                  src={props.widgetCustomisation.postPlayScreenTitleIcon}
+                  className={currentStyle.leadGenPostPlayIcon}
+                />
+              </div>
+            )}
+            <div className={currentStyle.bikDRTitleWrapper}>
+              <div
+                className={currentStyle.bikDRTitle}
+                style={{
+                  fontSize: postPlayScreenTitleSize,
+                  fontFamily: props.widgetCustomisation.fontFamily?.name,
+                  color: props.widgetCustomisation?.fontColour,
+                }}
+                dangerouslySetInnerHTML={{
+                  __html: decodeTextHelper(
+                    multiLingualData?.postPlayScreenTitle ??
+                      props.widgetCustomisation.postPlayScreenTitle,
+                  ),
+                }}
+              />
+              <div
+                className={currentStyle.bikDRSubTitle}
+                style={{
+                  fontSize: postPlayScreenSubTitleSize,
+                  fontFamily: props.widgetCustomisation.fontFamily?.name,
+                  color: props.widgetCustomisation?.fontColour,
+                }}
+                dangerouslySetInnerHTML={{
+                  __html: decodeTextHelper(
+                    multiLingualData?.postPlayScreenSubTitle ??
+                      props.widgetCustomisation.postPlayScreenSubTitle,
+                  ),
+                }}
+              />
+            </div>
+          </div>
+          {props.widgetCustomisation.isRedirectionButtonEnabled && (
+            <div className={currentStyle.bikDRDiscountCodeDetailsMain}>
+              <button
+                style={{
+                  backgroundColor:
+                    props.widgetCustomisation.postPlayScreenButtonColour,
+                  color:
+                    props.widgetCustomisation.postPlayScreenButtonTextColour,
+                }}
+                onClick={onRedirectionHandle}
+              >
+                <div
+                  style={{
+                    marginRight: 7,
+                    fontFamily: props.widgetCustomisation.fontFamily?.name,
+                    color:
+                      props.widgetCustomisation.postPlayScreenButtonTextColour,
+                  }}
+                >
+                  {multiLingualData?.postPlayScreenButtonText ??
+                    props.widgetCustomisation.postPlayScreenButtonText}
+                </div>
+              </button>
+            </div>
+          )}
+          <p className={currentStyle.poweredBy}>
+            <a
+              href="https://bik.ai/?utm_campaign=Direct_Reward&utm_medium=Widgets&utm_source=Powered_by_bik"
+              target="_blank"
+              rel="noreferrer"
+            >
+              {languageUtilities.getPoweredByMessage(props.widgetLanguage)}
+            </a>
+            <SVGFactory name={SVGName.BIK} />
+          </p>
+        </div>
+      )}
+    </>
+  );
+};
+export default CouponDetails;

package/src/widgets/DirectReward/components/userDetails.tsx

@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from 'react';
+import UserDetailsForm from 'components/userDetailsForm/userDetailsForm';
+import { STWContext } from 'widgets/STW/context';
+import { IDRTemplate } from '../index';
+import { decodeTextHelper } from '../../utility';
+import { WIDGET_NAME } from '@bikdotai/bik-models/dm';
+import { ComponentStyleMap } from '../../../utilities/styleUtils';
+
+const UserDetails = (props: IDRTemplate) => {
+  const {
+    templateName,
+    isMobile,
+    preview,
+    claimPrizeHandle,
+    widgetCustomisation,
+    leadGeneration,
+    error,
+    isLoading,
+    widgetLanguage,
+  } = props;
+  const [currentStyle, setCurrentStyle] = useState<any>(null);
+  const multiLingualData =
+    widgetCustomisation?.multiLingualConfigurations?.[widgetLanguage];
+
+  let playScreenTitleSize: string;
+  let playScreenSubTitleSize: string;
+
+  if (preview) {
+    playScreenTitleSize = isMobile ? '14px' : '13px';
+    playScreenSubTitleSize = isMobile ? '11px' : '10px';
+  } else {
+    playScreenTitleSize = props.isMobileDevice ? '20px' : `26px`;
+    playScreenSubTitleSize = props.isMobileDevice ? '14px' : `16px`;
+  }
+
+  useEffect(() => {
+    if (preview && isMobile) {
+      ComponentStyleMap[templateName]?.userInputPreviewMobile.then(
+        async style => {
+          setCurrentStyle((await style()).default);
+        },
+      );
+    } else if (preview && !isMobile) {
+      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
+      className={currentStyle.bikDRContentWrapper}
+      id={`bik-dr-${props.id}-user-details-container`}
+    >
+      <div className={currentStyle.bikDRTitleWrapper}>
+        <div
+          className={currentStyle.bikDRTitle}
+          style={{
+            fontSize: playScreenTitleSize,
+            fontFamily: props.widgetCustomisation.fontFamily?.name,
+            color: widgetCustomisation?.fontColour,
+          }}
+          dangerouslySetInnerHTML={{
+            __html: decodeTextHelper(
+              multiLingualData?.playScreenTitle ??
+                widgetCustomisation?.playScreenTitle,
+            ),
+          }}
+        />
+        {(multiLingualData?.playScreenSubTitle ??
+          widgetCustomisation?.playScreenSubTitle) && (
+          <div
+            className={currentStyle.bikDRSubTitle}
+            style={{
+              fontSize: playScreenSubTitleSize,
+              fontFamily: props.widgetCustomisation.fontFamily?.name,
+              color: widgetCustomisation?.fontColour,
+            }}
+            dangerouslySetInnerHTML={{
+              __html: decodeTextHelper(
+                multiLingualData?.playScreenSubTitle ??
+                  widgetCustomisation?.playScreenSubTitle,
+              ),
+            }}
+          />
+        )}
+      </div>
+      <STWContext.Provider value={{ preview, isMobile, templateName }}>
+        <UserDetailsForm
+          id={props.id}
+          claimPrizeHandle={claimPrizeHandle as any}
+          widgetCustomisation={widgetCustomisation}
+          leadGeneration={leadGeneration}
+          error={error}
+          isLoading={isLoading}
+          templateName={WIDGET_NAME.DIRECT_REWARD}
+          showTitle={false}
+          skipSubtitle={true}
+          widgetName="Direct_Reward"
+          countryCode={props.countryCode}
+          widgetLanguage={widgetLanguage}
+        />
+      </STWContext.Provider>
+    </div>
+  );
+};
+
+export default UserDetails;