@bikdotai/bik-widgets 1.0.0 → 1.0.1

package/src/components/couponDetails/coupon.module.css

@@ -1,208 +0,0 @@
-#couponScreenTitleWrapper p {
-  margin-bottom: 0;
-  font-family: inherit;
-}
-
-#bikHeader {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 24px;
-  text-align: center;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #212121;
-  margin: 0;
-  font-family: inherit;
-}
-
-#bikSubheader {
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #616161;
-  text-align: center;
-  margin: 8px 0 24px;
-  font-family: inherit;
-  font-size: 12px;
-}
-
-#bikHeader p,
-#bikSubheader p {
-  font-family: inherit;
-  margin-bottom: 0;
-}
-
-.couponName {
-  color: #212121;
-}
-
-.poweredBy {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin-left: auto;
-  text-align: center;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
-  color: #9e9e9e;
-  margin-top: 20px;
-  cursor: pointer;
-  padding-right: 20px;
-}
-
-.poweredBy a {
-  text-decoration: none;
-  color: #9e9e9e;
-  margin-right: 6px;
-}
-
-.poweredBy svg {
-  stroke: none !important;
-  fill: none !important;
-  height: unset !important;
-  width: unset !important;
-}
-
-#bikayiBtn {
-  position: relative;
-  border: none;
-  padding: 14px 0;
-  background: #731dcf;
-  border-radius: 8px;
-  outline: none;
-  width: 100%;
-  color: #fff;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 20px;
-  margin-top: 20px;
-  cursor: pointer;
-  height: 48px;
-  font-family: inherit;
-  margin-bottom: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#bikFooterLastPage {
-  width: 405px;
-  font-family: inherit;
-  margin-bottom: 12px;
-}
-
-#bikDiscountCodeDetails {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 16px;
-  gap: 8px;
-  width: 100%;
-  min-height: 100px;
-  background: #e6f4e7;
-  border: 1px dashed #1a872c;
-  border-radius: 4px;
-  font-family: inherit;
-}
-
-#bikDiscountCouponName {
-  text-align: center;
-  color: #212121;
-  font-family: inherit;
-  margin-bottom: 0 !important;
-}
-
-#bikDiscountCouponDetail {
-  text-align: center;
-  color: #616161;
-  font-family: inherit;
-  margin-bottom: 0 !important;
-}
-
-.font14 {
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.font16 {
-  font-size: 16px !important;
-  line-height: 24px;
-}
-
-.fontWeight400 {
-  font-weight: 400;
-}
-
-.fontWeight600 {
-  font-weight: 600;
-}
-
-.winningScreenIconWrapper {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 10px;
-}
-
-.winningScreenIcon {
-  height: 65px;
-  width: auto;
-}
-
-@media only screen and (max-width: 768px) {
-  .winningScreenIcon {
-    height: 45px;
-  }
-
-  #bikFooter2 {
-    padding: 0 18px;
-  }
-
-  #bikFooter2 > h1 {
-    font-size: 24px;
-  }
-
-  #bikHeader {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-  }
-
-  #bikSubheader {
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 24px;
-    margin-bottom: 16px;
-  }
-
-  #bikHeader p,
-  #bikSubheader p {
-    font-family: inherit;
-  }
-
-  #bikayiBtn {
-    margin-top: 16px;
-  }
-
-  #bikFooterLastPage {
-    width: 90%;
-  }
-
-  #bikDiscountCodeDetails {
-    height: unset;
-    margin-bottom: 0;
-  }
-
-  .poweredBy {
-    margin-left: 0;
-    margin-top: 10px;
-    justify-content: center;
-  }
-}

package/src/components/couponDetails/coupon.tsx

@@ -1,210 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { ISTWTemplate } from '../../widgets/STW/stw1';
-import SVGFactory, { SVGName } from '../../widgets/STW/components/svgFactory';
-import parse from 'html-react-parser';
-import useIsMobile from '../../hooks/useIsMobile';
-import { decodeTextHelper } from '../../widgets/utility';
-import { ISTWWidgetCustomisation, WIDGET_NAME } from '@bikdotai/bik-models/dm';
-import { LanguageUtils } from 'utilities/languageUtilities';
-
-const Coupon = (props: ISTWTemplate) => {
-  const { widgetCustomisation } = props as unknown as {
-    widgetCustomisation: ISTWWidgetCustomisation;
-  };
-  const { widgetLanguage } = props;
-  const languageUtilities = new LanguageUtils();
-  const multiLingualData =
-    widgetCustomisation?.multiLingualConfigurations?.[widgetLanguage];
-
-  const [btnText, setBtnText] = useState<string>(
-    multiLingualData?.winningScreenButtonText ??
-      widgetCustomisation.winningScreenButtonText ??
-      'Copy and use discount',
-  );
-  const [currentStyle, setCurrentStyle] = useState<any>(null);
-  const onCopyHandle = () => {
-    const cb = navigator.clipboard;
-    cb.writeText(props.couponCodeDetails.code).then(() => {
-      setBtnText(languageUtilities.getCopiedMessage(widgetLanguage));
-    });
-  };
-
-  const onRedirectionHandle = () => {
-    window.open(
-      props.widgetCustomisation.postPlayScreenButtonRedirection,
-      '_blank',
-    );
-  };
-
-  const defaultIcon =
-    'https://storage.googleapis.com/bik-widget-mfe/bap%2Fpost-play-screen-assets%2Fimages%2Fbik%2FconfettiOne.png';
-
-  useEffect(() => {
-    const importStyles = async () => {
-      let stylesModule;
-      if (props.preview) {
-        if (props.isMobile) {
-          stylesModule = await import('./couponPreviewMobile.module.css');
-        } else {
-          stylesModule = await import('./couponPreviewDesktop.module.css');
-        }
-      } else {
-        stylesModule = await import('./coupon.module.css');
-      }
-      setCurrentStyle(stylesModule.default);
-    };
-    importStyles().then();
-  }, [props.preview, props.isMobile]);
-
-  const isMobileDevice = useIsMobile();
-  let winningScreenTitleSize: string;
-  let winningScreenSubTitleSize: string;
-
-  if (props.preview) {
-    winningScreenTitleSize = props.isMobile ? '14px' : '10px';
-    winningScreenSubTitleSize = props.isMobile ? '11px' : '8px';
-  } else {
-    winningScreenTitleSize = isMobileDevice ? '18px' : `24px`;
-    winningScreenSubTitleSize = isMobileDevice ? '14px' : `16px`;
-  }
-
-  if (!currentStyle) {
-    return <></>;
-  }
-  return (
-    <>
-      {props.templateName !== WIDGET_NAME.STW2 && (
-        <div className={currentStyle.winningScreenIconWrapper}>
-          <img
-            src={widgetCustomisation.winningScreenTitleIcon ?? defaultIcon}
-            className={currentStyle.winningScreenIcon}
-          />
-        </div>
-      )}
-      <div
-        id={currentStyle.couponScreenTitleWrapper}
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          textAlign: 'center',
-          fontSize: winningScreenTitleSize,
-          fontFamily: 'inherit',
-          color: widgetCustomisation.fontColour,
-        }}
-      >
-        {(multiLingualData?.winningScreenTitle ??
-        widgetCustomisation.winningScreenTitle) ? (
-          parse(
-            decodeTextHelper(
-              multiLingualData?.winningScreenTitle ??
-                widgetCustomisation.winningScreenTitle,
-            ),
-          )
-        ) : (
-          <p id={currentStyle.bikHeader}>{'Congratulations!'}</p>
-        )}
-      </div>
-      <div
-        id={currentStyle.couponScreenTitleWrapper}
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          textAlign: 'center',
-          marginTop: props.preview ? 0 : 8,
-          fontFamily: 'inherit',
-          fontSize: winningScreenSubTitleSize,
-          color: widgetCustomisation.fontColour,
-          opacity: 0.8,
-        }}
-      >
-        {(multiLingualData?.winningScreenSubTitle ??
-        widgetCustomisation.winningScreenSubTitle) ? (
-          parse(
-            decodeTextHelper(
-              multiLingualData?.winningScreenSubTitle ??
-                widgetCustomisation.winningScreenSubTitle,
-            ),
-          )
-        ) : (
-          <></>
-        )}
-      </div>
-      <div id={currentStyle.bikFooterLastPage}>
-        {props.couponCodeDetails && (
-          <div
-            id={currentStyle.bikDiscountCodeDetails}
-            style={{
-              backgroundColor: widgetCustomisation.winningScreenCouponBgColour,
-              borderColor: widgetCustomisation.winningScreenCouponTextColour,
-              margin: props.preview ? '5px 0' : '20px 0',
-              borderWidth: 1,
-              borderRadius: 18,
-            }}
-          >
-            <p
-              id={currentStyle.bikDiscountCouponName}
-              className={currentStyle.font14 + ' ' + currentStyle.fontWeight600}
-              style={{
-                color: widgetCustomisation.winningScreenCouponTextColour,
-                marginTop: 0,
-              }}
-            >
-              {props.couponCodeDetails.code}
-            </p>
-            <p
-              id={currentStyle.bikDiscountCouponDetail}
-              className={currentStyle.font14 + ' ' + currentStyle.fontWeight400}
-              style={{
-                color: widgetCustomisation.winningScreenCouponTextColour,
-              }}
-            >
-              {props.couponCodeDetails.description}
-            </p>
-          </div>
-        )}
-        <button
-          data-testid={'copy-btn'}
-          id={currentStyle.bikayiBtn}
-          className={currentStyle.copyBtn}
-          style={{
-            backgroundColor: widgetCustomisation.winningScreenButtonColour,
-            color: widgetCustomisation.winningScreenButtonTextColour,
-            fontFamily: widgetCustomisation.fontFamily?.name ?? 'inherit',
-          }}
-          onClick={
-            props.widgetCustomisation.isRedirectionButtonEnabled
-              ? onRedirectionHandle
-              : onCopyHandle
-          }
-        >
-          {btnText}
-        </button>
-      </div>
-      {props.templateName !== WIDGET_NAME.STW2 && (
-        <p
-          className={currentStyle.poweredBy}
-          style={{ opacity: 0.4 }}
-          onClick={() =>
-            window.open(
-              `https://bik.ai/?utm_campaign=${props.widgetName}&utm_medium=Widgets&utm_source=Powered_by_bik`,
-            )
-          }
-        >
-          <a
-            href={`https://bik.ai/?utm_campaign=${props.widgetName}&utm_medium=Widgets&utm_source=Powered_by_bik`}
-            target="_blank"
-            rel="noreferrer"
-            style={{ color: widgetCustomisation.fontColour }}
-          >
-            {languageUtilities.getPoweredByMessage(widgetLanguage)}
-          </a>
-          <SVGFactory
-            name={SVGName.BIK}
-            color={widgetCustomisation.fontColour}
-          />
-        </p>
-      )}
-    </>
-  );
-};
-export default Coupon;

package/src/components/couponDetails/couponPreviewDesktop.module.css

@@ -1,158 +0,0 @@
-.winningScreenIconWrapper {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 4px;
-}
-
-#couponScreenTitleWrapper p {
-  margin-bottom: 0;
-  font-family: inherit;
-}
-
-.winningScreenIcon {
-  height: 24px;
-  width: auto;
-}
-
-#bikHeader {
-  font-style: normal;
-  font-weight: 600;
-  font-size: 13px;
-  line-height: 20px;
-  text-align: center;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #212121;
-  margin: 0;
-  font-family: inherit;
-}
-
-#bikSubheader {
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  text-align: center;
-  margin: 2px 0 8px 0;
-  font-weight: 600;
-  font-size: 8px;
-  line-height: 8px;
-  color: #212121;
-  font-family: inherit;
-}
-
-#bikHeader p,
-#bikSubheader p {
-  margin-bottom: 0 !important;
-  font-family: inherit;
-}
-
-.font14 {
-  font-size: 8px;
-}
-
-.font10 {
-  font-size: 10px;
-  line-height: 12px;
-}
-
-.fontWeight400 {
-  font-weight: 400;
-}
-
-.fontWeight600 {
-  font-weight: 600;
-}
-
-#bikFooter2 {
-  display: none;
-  padding-bottom: 16px;
-}
-
-#bikDiscountCodeDetails {
-  margin: 0 auto;
-  width: 85%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 4px;
-  gap: 4px;
-  min-height: 30px;
-  background: #e6f4e7;
-  border-radius: 4px;
-  font-family: inherit;
-  text-align: center;
-}
-
-#bikDiscountCouponName {
-  color: #212121;
-  line-height: 8px;
-  margin: 0;
-  font-family: inherit;
-  text-align: center;
-  width: 100%;
-}
-
-#bikDiscountCouponDetail {
-  color: #616161;
-  line-height: 10px;
-  margin: 0;
-  font-family: inherit;
-  text-align: center;
-}
-
-#bikFooterLastPage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-family: inherit;
-  min-width: 150px;
-}
-
-.poweredBy {
-  color: #9e9e9e;
-  font-weight: 400;
-  font-size: 10px;
-  line-height: 12px;
-  pointer-events: none;
-  text-align: center;
-  margin: 0 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.poweredBy a {
-  color: #9e9e9e;
-  pointer-events: none;
-  text-decoration: none;
-  margin-right: 4px;
-}
-
-.poweredBy svg {
-  width: 20px;
-  height: 20px;
-  margin: 0;
-}
-
-#bikayiBtn {
-  border: none;
-  background: #731dcf;
-  border-radius: 8px;
-  outline: none;
-  color: #fff;
-  margin-top: 4px;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 8px;
-  line-height: 6px;
-  font-family: inherit;
-  padding: 5px 0;
-  width: 85%;
-  pointer-events: none;
-}