manage-app-sdk 0.0.2

package/dist/components/Plan/PlanCard.js

@@ -0,0 +1,268 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNative = require("react-native");
+var _react = _interopRequireWildcard(require("react"));
+var _PlanCardStyles = _interopRequireDefault(require("./PlanCardStyles"));
+var _PrimaryButton = _interopRequireDefault(require("../Buttons/PrimaryButton/PrimaryButton"));
+var _RadioButton = _interopRequireDefault(require("../Buttons/RadioButton/RadioButton"));
+var _serviceCommonHandler = require("../../services/serviceCommonHandler");
+var _reactRedux = require("react-redux");
+var _string = require("../../utils/string");
+var _lodash = require("lodash");
+var _RenderAppIcons = require("./RenderAppIcons");
+var _PrimeAddOn = _interopRequireDefault(require("../PrimeAddOn/PrimeAddOn"));
+var _commonUtils = require("../../utils/commonUtils");
+var _Home = require("../../Constants/Home");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _GradientText = _interopRequireDefault(require("../GradientText/GradientText"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PlanCard = ({
+  drupal,
+  plan,
+  onButtonClick,
+  selectTenure,
+  selectedPack,
+  journey,
+  journeySourceRefld
+}) => {
+  var _plan$appList;
+  const {
+    addOnPlans
+  } = (0, _reactRedux.useSelector)(state => state.manageAppReducer);
+  const tenuresList = plan === null || plan === void 0 ? void 0 : plan.tenureList;
+  const appList = (plan === null || plan === void 0 || (_plan$appList = plan.appList) === null || _plan$appList === void 0 ? void 0 : _plan$appList.BUCKET1) ?? [];
+  const packInfo = tenuresList === null || tenuresList === void 0 ? void 0 : tenuresList.find(it => (it === null || it === void 0 ? void 0 : it.shortTenure) === "2 Months");
+  if (plan == null) {
+    return null;
+  }
+  if (tenuresList == null || !Array.isArray(tenuresList) || typeof tenuresList != "object") {
+    return null;
+  }
+  if (appList == null || !Array.isArray(appList) || typeof appList !== "object") {
+    return null;
+  }
+  const isActive = plan === null || plan === void 0 ? void 0 : plan.tenureList.some(item => (item === null || item === void 0 ? void 0 : item.packId) == (selectedPack === null || selectedPack === void 0 ? void 0 : selectedPack.selectedPackID));
+  const isButtonActive = (plan === null || plan === void 0 ? void 0 : plan.isCurrentPlan) || (plan === null || plan === void 0 ? void 0 : plan.isFreeTrialPack) || isActive || (plan === null || plan === void 0 ? void 0 : plan.tenureType) === "2 Months";
+  const [selectedTenure, setSelectedTenure] = (0, _react.useState)(tenuresList === null || tenuresList === void 0 ? void 0 : tenuresList[0]);
+  const complimentaryCount = (0, _react.useMemo)(() => {
+    return appList === null || appList === void 0 ? void 0 : appList.filter(app => app === null || app === void 0 ? void 0 : app.isComplimentary).length;
+  }, [appList]);
+  const isSportsPlus = ["BINGEMON86", "BINGEMON71"].find(id => (plan === null || plan === void 0 ? void 0 : plan.packId) == id);
+  const getMainHeading = () => {
+    let heading = "";
+    if ((plan === null || plan === void 0 ? void 0 : plan.productType) == "Flexi") {
+      var _plan$totalApps;
+      heading = (0, _string.replacePlaceholderInString)(drupal === null || drupal === void 0 ? void 0 : drupal.flexiHeading, "appCount", ((plan === null || plan === void 0 || (_plan$totalApps = plan.totalApps) === null || _plan$totalApps === void 0 || (_plan$totalApps = _plan$totalApps.BUCKET1) === null || _plan$totalApps === void 0 ? void 0 : _plan$totalApps.max) ?? 0) + complimentaryCount);
+    } else {
+      var _plan$appList2;
+      heading = (0, _string.replacePlaceholderInString)(drupal === null || drupal === void 0 ? void 0 : drupal.fixedHeading, "appCount", ((plan === null || plan === void 0 || (_plan$appList2 = plan.appList) === null || _plan$appList2 === void 0 || (_plan$appList2 = _plan$appList2.BUCKET1) === null || _plan$appList2 === void 0 ? void 0 : _plan$appList2.length) ?? 0) + complimentaryCount);
+    }
+    return heading;
+  };
+  const getHeading = () => {
+    if ((plan === null || plan === void 0 ? void 0 : plan.productType) == "Flexi") {
+      var _plan$totalApps2;
+      return (0, _string.replacePlaceholderInString)(drupal === null || drupal === void 0 ? void 0 : drupal.chooseAppCount, "appCount", (plan === null || plan === void 0 || (_plan$totalApps2 = plan.totalApps) === null || _plan$totalApps2 === void 0 || (_plan$totalApps2 = _plan$totalApps2.BUCKET1) === null || _plan$totalApps2 === void 0 ? void 0 : _plan$totalApps2.max) ?? "");
+    } else {
+      if (isSportsPlus) {
+        var _plan$appList3;
+        return (0, _string.replacePlaceholderInString)(drupal === null || drupal === void 0 ? void 0 : drupal.sportsHeading, "appCount", plan === null || plan === void 0 || (_plan$appList3 = plan.appList) === null || _plan$appList3 === void 0 || (_plan$appList3 = _plan$appList3.BUCKET1) === null || _plan$appList3 === void 0 ? void 0 : _plan$appList3.length);
+      } else {
+        var _plan$appList4;
+        return (0, _string.replacePlaceholderInString)("All !appCount! Apps Included", "appCount", plan === null || plan === void 0 || (_plan$appList4 = plan.appList) === null || _plan$appList4 === void 0 || (_plan$appList4 = _plan$appList4.BUCKET1) === null || _plan$appList4 === void 0 ? void 0 : _plan$appList4.length);
+      }
+    }
+  };
+  const getComplimentaryAppsCountText = () => {
+    if ((plan === null || plan === void 0 ? void 0 : plan.productType) == "Flexi") {
+      return complimentaryCount > 0 && (0, _string.replacePlaceholderInString)(drupal === null || drupal === void 0 ? void 0 : drupal.complimentryAppCount, "appCount", complimentaryCount);
+    } else {
+      return "";
+    }
+  };
+  const getSubHeading = (0, _react.useCallback)(() => {
+    if (plan !== null && plan !== void 0 && plan.isFreeTrialPack) {
+      return `${plan === null || plan === void 0 ? void 0 : plan.totalValidity} ${_Home.tenureConstants[plan === null || plan === void 0 ? void 0 : plan.tenureType]} free trial, offer valid for ${plan === null || plan === void 0 ? void 0 : plan.remainingDays} days`;
+    }
+    if (["BINGEMON112"].includes(plan === null || plan === void 0 ? void 0 : plan.packId)) {
+      var _plan$appList5;
+      return (0, _string.replacePlaceholderInString)(drupal === null || drupal === void 0 ? void 0 : drupal.englishApps, "appCount", (plan === null || plan === void 0 || (_plan$appList5 = plan.appList) === null || _plan$appList5 === void 0 || (_plan$appList5 = _plan$appList5.BUCKET1) === null || _plan$appList5 === void 0 ? void 0 : _plan$appList5.length) || 0);
+    }
+    return `${getHeading()}${getComplimentaryAppsCountText()}`;
+  }, [plan, drupal]);
+  const getWatchOnDevices = () => (0, _string.replacePlaceholderInString)((0, _commonUtils.isTablet)() ? drupal === null || drupal === void 0 ? void 0 : drupal.watchLDevice : drupal === null || drupal === void 0 ? void 0 : drupal.watchDevice, "deviceCount", plan === null || plan === void 0 ? void 0 : plan.totalDevices);
+  const getWatchDevices = () => {
+    var _plan$deviceListInfo;
+    return (plan === null || plan === void 0 || (_plan$deviceListInfo = plan.deviceListInfo) === null || _plan$deviceListInfo === void 0 ? void 0 : _plan$deviceListInfo.title) ?? "";
+  };
+  const getButtonTitle = () => {
+    if (plan !== null && plan !== void 0 && plan.isFreeTrialPack) {
+      var _drupal$freeTrail;
+      return drupal === null || drupal === void 0 || (_drupal$freeTrail = drupal.freeTrail) === null || _drupal$freeTrail === void 0 ? void 0 : _drupal$freeTrail.btn;
+    } else if ((plan === null || plan === void 0 ? void 0 : plan.productType) == "Flexi" && !(plan !== null && plan !== void 0 && plan.isCurrentPlan)) {
+      var _drupal$myop;
+      return drupal === null || drupal === void 0 || (_drupal$myop = drupal.myop) === null || _drupal$myop === void 0 ? void 0 : _drupal$myop.primaryBtn;
+    } else {
+      return "Choose Plan";
+    }
+  };
+  const couponCodeExist = () => {
+    const couponOfferExist = tenuresList.filter(item => item.couponOfferId !== null);
+    if (!(0, _lodash.isEmpty)(couponOfferExist) && Array.isArray(couponOfferExist)) {
+      return true;
+    }
+    return false;
+  };
+  const tagArray = (0, _react.useMemo)(() => {
+    const tags = [];
+    if (couponCodeExist() && drupal !== null && drupal !== void 0 && drupal.superSaverTag) tags.push(drupal === null || drupal === void 0 ? void 0 : drupal.superSaverTag);
+    if (journey !== "COUPONS" && !couponCodeExist() && (plan === null || plan === void 0 ? void 0 : plan.packType.toUpperCase()) == "BS" && drupal !== null && drupal !== void 0 && drupal.BingeBestsellers) tags.push(drupal === null || drupal === void 0 ? void 0 : drupal.BingeBestsellers);
+    if (isSportsPlus && drupal !== null && drupal !== void 0 && drupal.SportsTagName) tags.push(drupal === null || drupal === void 0 ? void 0 : drupal.SportsTagName);
+    if (plan !== null && plan !== void 0 && plan.isCurrentPlan && drupal !== null && drupal !== void 0 && drupal.currentPlanTag) tags.push(drupal === null || drupal === void 0 ? void 0 : drupal.currentPlanTag);
+    if (plan !== null && plan !== void 0 && plan.isRecommended && drupal !== null && drupal !== void 0 && drupal.recommendedTag) tags.push(drupal === null || drupal === void 0 ? void 0 : drupal.recommendedTag);
+    if (["BINGEMON112"].includes(plan === null || plan === void 0 ? void 0 : plan.packId)) tags.push(drupal === null || drupal === void 0 ? void 0 : drupal.englishTag);
+    return tags;
+  }, [isSportsPlus, plan, drupal]);
+  const Tag = ({
+    tagName
+  }) => {
+    if (tagName == null) return null;
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: _PlanCardStyles.default.tagContainer
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: _PlanCardStyles.default.tagText
+    }, tagName));
+  };
+  const handleTenureSelection = tenure => {
+    // setActive(plan?.packId);
+    setSelectedTenure(tenure);
+    selectTenure(tenure);
+  };
+  const renderTenureOptions = () => {
+    return tenuresList === null || tenuresList === void 0 ? void 0 : tenuresList.map((tenure, index) => {
+      const isSelected = isActive ? (selectedTenure === null || selectedTenure === void 0 ? void 0 : selectedTenure.packId) === (tenure === null || tenure === void 0 ? void 0 : tenure.packId) : false;
+      const isBestOffer = tenure === null || tenure === void 0 ? void 0 : tenure.bestTenure;
+      const hasDiscount = (tenure === null || tenure === void 0 ? void 0 : tenure.offer) > 0 ?? false;
+      const isCouponApplied = !(0, _lodash.isEmpty)(tenure === null || tenure === void 0 ? void 0 : tenure.couponOfferId) && journey != "COUPONS" && !(plan !== null && plan !== void 0 && plan.isFreeTrialPack);
+      const couponOfferName = tenure === null || tenure === void 0 ? void 0 : tenure.couponOfferName;
+      const tenureText = (0, _string.mapTenureToDuration)(tenure === null || tenure === void 0 ? void 0 : tenure.tenure);
+      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        key: tenure.packId
+      }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+        style: _PlanCardStyles.default.tenureOption,
+        onPress: () => handleTenureSelection(tenure),
+        activeOpacity: 1
+      }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        style: _PlanCardStyles.default.tenureContent
+      }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+        style: _PlanCardStyles.default.tenureText
+      }, tenureText), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        style: _PlanCardStyles.default.priceContainer
+      }, isBestOffer && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        style: _PlanCardStyles.default.bestTenureMarkContainer
+      }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+        style: _PlanCardStyles.default.bestTenureThumbsUp,
+        source: {
+          uri: _serviceCommonHandler.serviceConsts.baseUrls.imageBaseUrl + "thumpsUp.png"
+        }
+      })), hasDiscount && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        style: _PlanCardStyles.default.saveBadge
+      }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+        style: _PlanCardStyles.default.saveBadgeText
+      }, (0, _string.replacePlaceholderInString)(drupal === null || drupal === void 0 ? void 0 : drupal.appsDiscount, "discount", tenure === null || tenure === void 0 ? void 0 : tenure.offer))), !isCouponApplied ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+        style: _PlanCardStyles.default.priceText
+      }, `₹${tenure.totalAmount}`) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        style: _PlanCardStyles.default.dicountedPriceWrapper
+      }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+        style: [_PlanCardStyles.default.priceText, _PlanCardStyles.default.discountedPriceText]
+      }, `₹${tenure.totalAmount}`), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+        style: _PlanCardStyles.default.priceText
+      }, `₹${tenure.discountedPackPrice}`)))), couponOfferName != null && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        style: _PlanCardStyles.default.bestOfferContainer
+      }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+        style: _PlanCardStyles.default.discountText
+      }, (0, _string.replacePlaceholderInString)(drupal === null || drupal === void 0 ? void 0 : drupal.tenureOffer, ["offerName", "percentage"], [couponOfferName, tenure === null || tenure === void 0 ? void 0 : tenure.amountDiscount]))), /*#__PURE__*/_react.default.createElement(_RadioButton.default, {
+        selected: isSelected,
+        onPress: () => handleTenureSelection(tenure)
+      })), !((tenuresList === null || tenuresList === void 0 ? void 0 : tenuresList.length) - 1 === index) && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        style: _PlanCardStyles.default.divider
+      }));
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    layout: _reactNativeReanimated.LinearTransition.easing(_reactNativeReanimated.Easing.linear).duration(120),
+    style: _PlanCardStyles.default.container
+  }, !["PACKCONTENT"].includes(journey) && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flexDirection: "row",
+      gap: 2
+    }
+  }, tagArray.map((tag, idx) => /*#__PURE__*/_react.default.createElement(Tag, {
+    key: idx,
+    tagName: tag
+  }))), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    layout: _reactNativeReanimated.LinearTransition.easing(_reactNativeReanimated.Easing.linear).duration(120),
+    style: _PlanCardStyles.default.card
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _PlanCardStyles.default.innerContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _PlanCardStyles.default.heading
+  }, getMainHeading(), (plan === null || plan === void 0 ? void 0 : plan.tenureType) === "2 Months" && !(0, _lodash.isEmpty)(packInfo === null || packInfo === void 0 ? void 0 : packInfo.couponOfferId) && /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, " @ ", /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _PlanCardStyles.default.strikeThrough
+  }, `₹${packInfo === null || packInfo === void 0 ? void 0 : packInfo.totalMrp}`))), (plan === null || plan === void 0 ? void 0 : plan.tenureType) === "2 Months" && !(0, _lodash.isEmpty)(packInfo === null || packInfo === void 0 ? void 0 : packInfo.couponOfferId) && /*#__PURE__*/_react.default.createElement(_GradientText.default, {
+    colors: ["#ffa800", "#ffe978", "#ffa800"],
+    borderWidth: 1,
+    borderColor: "#220046",
+    style: _PlanCardStyles.default.offerDetails
+  }, `₹${packInfo === null || packInfo === void 0 ? void 0 : packInfo.discountedPackPrice} for ${_Home.tenureConstants[(packInfo === null || packInfo === void 0 ? void 0 : packInfo.shortTenure) ?? "2 Months"]}`), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _PlanCardStyles.default.benefitsContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _PlanCardStyles.default.benefitsText
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _PlanCardStyles.default.chooseText
+  }, getSubHeading())), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [_PlanCardStyles.default.watchDevicesContainer, (0, _commonUtils.isTablet)() && {
+      flexDirection: "row"
+    }]
+  }, plan !== null && plan !== void 0 && plan.totalDevices ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _PlanCardStyles.default.deviceText
+  }, getWatchOnDevices()) : null, (0, _commonUtils.isTablet)() && (plan === null || plan === void 0 ? void 0 : plan.totalDevices) && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _PlanCardStyles.default.textDivider
+  }, " | "), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: _PlanCardStyles.default.deviceText
+  }, getWatchDevices()))), /*#__PURE__*/_react.default.createElement(_RenderAppIcons.RenderAppIcons, {
+    appList: appList,
+    drupal: drupal,
+    productType: plan === null || plan === void 0 ? void 0 : plan.productType,
+    isFreeTrialPack: plan === null || plan === void 0 ? void 0 : plan.isFreeTrialPack,
+    maxSlots: (0, _commonUtils.isTablet)() ? 12 : 10
+  }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    layout: _reactNativeReanimated.LinearTransition.easing(_reactNativeReanimated.Easing.linear).duration(120),
+    style: _PlanCardStyles.default.tenureNdButtonContainer
+  }, !(plan !== null && plan !== void 0 && plan.isFreeTrialPack) && (plan === null || plan === void 0 ? void 0 : plan.tenureType) !== "2 Months" && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _PlanCardStyles.default.tenuresContainer
+  }, renderTenureOptions()), !(plan !== null && plan !== void 0 && plan.isCurrentPlan) && addOnPlans !== null && (plan === null || plan === void 0 ? void 0 : plan.eligibleAddOnPlans) && (plan === null || plan === void 0 ? void 0 : plan.eligibleAddOnPlans.map((it, idx) => {
+    var _drupal$packOnList;
+    const key = `${(it === null || it === void 0 ? void 0 : it.packId) ?? ""}_${idx}`;
+    return /*#__PURE__*/_react.default.createElement(_PrimeAddOn.default, {
+      key: key,
+      data: it,
+      pageData: drupal === null || drupal === void 0 || (_drupal$packOnList = drupal.packOnList) === null || _drupal$packOnList === void 0 ? void 0 : _drupal$packOnList.PRIME,
+      journey: journey,
+      journeySourceRefld: journeySourceRefld
+    });
+  })), /*#__PURE__*/_react.default.createElement(_PrimaryButton.default, {
+    style: {
+      width: "100%"
+    },
+    title: getButtonTitle(),
+    disabled: !isButtonActive,
+    onPress: () => onButtonClick(plan, selectedTenure)
+  })))));
+};
+var _default = exports.default = /*#__PURE__*/_react.default.memo(PlanCard);

package/dist/components/Plan/PlanCardStyles.js

@@ -0,0 +1,371 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactNative = require("react-native");
+var _AppConstant = require("../../assets/AppConstant");
+var _fontUtils = require("../../utils/fontUtils");
+var _commonUtils = require("../../utils/commonUtils");
+const ratio = _AppConstant.AppConstant.dimension.aspectRatio;
+const cardWidth = ratio * ((0, _commonUtils.isTablet)() ? 450 : 326);
+var _default = exports.default = PlanCardStyles = _reactNative.StyleSheet.create({
+  container: {
+    marginHorizontal: 17 * ratio,
+    width: cardWidth,
+    marginTop: 14 * ratio,
+    alignSelf: "center",
+    borderRadius: 10 * ratio
+  },
+  backgroundGradient: {
+    width: cardWidth,
+    borderRadius: 10 * ratio
+  },
+  tagContainer: {
+    backgroundColor: "#6B00DD",
+    paddingHorizontal: 5 * ratio,
+    paddingVertical: 4.5 * ratio,
+    borderTopLeftRadius: 6 * ratio,
+    borderTopRightRadius: 6 * ratio,
+    alignSelf: "flex-start",
+    marginLeft: 10 * ratio
+  },
+  tagText: {
+    color: "#FFFFFF",
+    fontSize: (0, _AppConstant.normalizeFont)(14),
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  card: {
+    backgroundColor: "#efe8fa",
+    borderRadius: 10 * ratio,
+    paddingVertical: 16 * ratio,
+    paddingHorizontal: 16 * ratio,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  regionalnSportsCard: {
+    borderRadius: 10 * ratio,
+    paddingVertical: 16 * ratio,
+    paddingHorizontal: 16 * ratio,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  heading: {
+    fontSize: (0, _AppConstant.normalizeFont)(24),
+    color: "#130036",
+    textAlign: "center",
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  gradientText: {
+    fontFamily: _fontUtils.FONTS.Bold,
+    fontSize: (0, _AppConstant.normalizeFont)(26),
+    letterSpacing: 3
+  },
+  benefitsContainer: {
+    alignItems: "center"
+  },
+  benefitsText: {
+    fontSize: (0, _AppConstant.normalizeFont)(13),
+    flexDirection: "row",
+    marginTop: 12 * ratio,
+    justifyContent: "center",
+    alignItems: "center",
+    fontFamily: _fontUtils.FONTS.SemiBold,
+    color: "#130036"
+  },
+  chooseText: {
+    fontSize: (0, _AppConstant.normalizeFont)(14),
+    color: "#130036",
+    textAlign: "center",
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  watchDevicesContainer: {
+    marginTop: 8 * ratio,
+    marginBottom: 12 * ratio,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  deviceText: {
+    fontSize: (0, _AppConstant.normalizeFont)(12),
+    color: "#130036",
+    textAlign: "center",
+    fontFamily: _fontUtils.FONTS.Medium
+  },
+  appIconsContainer: {
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 5 * ratio
+  },
+  appIconsRow: {
+    width: ratio * ((0, _commonUtils.isTablet)() ? 400 : 340),
+    justifyContent: "flex-start",
+    alignItems: "center",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 15 * ratio,
+    paddingHorizontal: 22.5 * ratio
+  },
+  appIconWrapper: {
+    width: 46 * ratio,
+    height: 46 * ratio,
+    overflow: "hidden",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 4 * ratio
+  },
+  appIcon: {
+    width: "100%",
+    height: "100%",
+    resizeMode: "contain"
+  },
+  moreAppsWrapper: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  moreAppsText: {
+    fontSize: (0, _AppConstant.normalizeFont)(13.5),
+    color: "#130036",
+    alignSelf: "center",
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  moreAppsLabel: {
+    fontSize: (0, _AppConstant.normalizeFont)(14),
+    color: "#130036",
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  tenuresContainer: {
+    marginVertical: 10 * ratio,
+    paddingHorizontal: (0, _commonUtils.isTablet)() && 35 * ratio
+  },
+  tenureOption: {
+    width: "100%",
+    paddingVertical: 10 * ratio,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderRadius: 7 * ratio,
+    marginTop: 5 * ratio
+  },
+  tenureContent: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingEnd: 6 * ratio
+  },
+  tenureText: {
+    fontSize: (0, _AppConstant.normalizeFont)(16),
+    color: "#1F2937",
+    lineHeight: 16 * ratio,
+    fontFamily: _fontUtils.FONTS.Medium
+  },
+  priceContainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  saveBadge: {
+    backgroundColor: "#6B00DD",
+    borderRadius: 6 * ratio,
+    marginRight: 6 * ratio,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 6 * ratio,
+    paddingVertical: 3 * ratio
+  },
+  saveBadgeText: {
+    color: "#FFFFFF",
+    fontSize: (0, _AppConstant.normalizeFont)(11),
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  priceText: {
+    fontSize: (0, _AppConstant.normalizeFont)(18),
+    color: "#1F2937",
+    lineHeight: 18 * ratio,
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  divider: {
+    width: "100%",
+    height: 1 * ratio,
+    backgroundColor: "#464748ff",
+    alignSelf: "center",
+    marginVertical: 6 * ratio
+  },
+  bestOfferContainer: {
+    position: "absolute",
+    bottom: -5 * ratio,
+    left: 6 * ratio,
+    right: 50 * ratio,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  discountText: {
+    fontSize: (0, _AppConstant.normalizeFont)(12),
+    color: "#7C3AED",
+    marginBottom: 1 * ratio,
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  radioButton: {
+    width: 20 * ratio,
+    height: 20 * ratio,
+    borderRadius: 50 * ratio,
+    backgroundColor: "#564372",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  selectedRadioButton: {
+    backgroundColor: "#EC4899"
+  },
+  radioButtonInner: {
+    width: 6 * ratio,
+    height: 6 * ratio,
+    borderRadius: 4 * ratio,
+    backgroundColor: "#564372"
+  },
+  selectedRadioInner: {
+    backgroundColor: "#ffffffff"
+  },
+  chooseButton: {
+    backgroundColor: "#EC4899",
+    borderRadius: 5 * ratio,
+    height: 46 * ratio,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 6 * ratio,
+    paddingHorizontal: 20
+  },
+  dicountedPriceWrapper: {
+    flexDirection: "row",
+    gap: 4 * ratio
+  },
+  discountedPriceText: {
+    fontSize: (0, _AppConstant.normalizeFont)(14),
+    textDecorationLine: "line-through",
+    fontFamily: _fontUtils.FONTS.Medium
+  },
+  disabledButton: {
+    backgroundColor: "#8e80a1"
+  },
+  expandButtonText: {
+    fontSize: (0, _AppConstant.normalizeFont)(12),
+    textAlign: "center",
+    fontFamily: _fontUtils.FONTS.SemiBold,
+    marginTop: 2 * ratio
+  },
+  bestTenureMarkContainer: {
+    alignSelf: "center",
+    marginRight: 5
+  },
+  bestTenureThumbsUp: {
+    width: 21 * ratio,
+    height: 21 * ratio
+  },
+  arrowSvgContainer: {
+    width: 16 * ratio,
+    height: 16 * ratio,
+    backgroundColor: "#E10092",
+    borderRadius: 510 * ratio,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  arrowSvg: {
+    width: 11 * ratio,
+    height: 6 * ratio
+  },
+  expandedArrowSvg: {
+    transform: [{
+      rotate: "180deg"
+    }]
+  },
+  regionalnSportsHeading: {
+    fontSize: (0, _AppConstant.normalizeFont)(20),
+    color: "#130036",
+    textAlign: "center",
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  titleAndImageWrapper: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  regionalnSportsAppsHeading: {
+    fontSize: (0, _AppConstant.normalizeFont)(24),
+    color: "#130036",
+    textAlign: "center",
+    marginTop: 4 * ratio,
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  regionalnSportsImageContainer: {
+    width: 184 * ratio,
+    height: 64 * ratio,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 12 * ratio,
+    marginBottom: 10 * ratio
+  },
+  regionalImage: {
+    width: 184 * ratio,
+    height: 64 * ratio
+  },
+  regionalAppRow: {
+    marginVertical: 8 * ratio,
+    justifyContent: "center"
+  },
+  deviceImageAndTitle: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "baseline"
+  },
+  validDate: {
+    fontSize: (0, _AppConstant.normalizeFont)(12),
+    color: "#130036",
+    fontFamily: _fontUtils.FONTS.Medium,
+    marginBottom: 10 * ratio
+  },
+  planInclude: {
+    fontSize: (0, _AppConstant.normalizeFont)(18),
+    color: "#130036",
+    textAlign: "center",
+    fontFamily: _fontUtils.FONTS.Medium
+  },
+  currentPlanHeadingContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  appCountAndPrice: {
+    fontSize: (0, _AppConstant.normalizeFont)(22),
+    color: "#130036",
+    textAlign: "center",
+    fontFamily: _fontUtils.FONTS.SemiBold,
+    marginVertical: 6
+  },
+  innerContainer: {
+    width: "100%",
+    alignItems: "center"
+  },
+  textDivider: {
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  currentPlanAppRowPadding: {
+    paddingHorizontal: 35 * ratio
+  },
+  tenureNdButtonContainer: {
+    width: "100%",
+    alignItems: "center"
+  },
+  flexDirectionRow: {
+    flexDirection: "row"
+  },
+  strikeThrough: {
+    fontSize: (0, _AppConstant.normalizeFont)(22),
+    textDecorationLine: "line-through"
+  },
+  offerDetails: {
+    fontSize: (0, _AppConstant.normalizeFont)(32),
+    fontFamily: _fontUtils.FONTS.Bold,
+    letterSpacing: 1 * ratio,
+    marginTop: 4 * ratio,
+    lineHeight: (0, _AppConstant.normalizeFont)(34)
+  }
+});