@bikdotai/bik-widgets 1.0.0

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

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

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

@@ -0,0 +1,158 @@
+.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;
+}