@bikdotai/bik-widgets 1.0.0 → 1.0.2

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

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

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

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