manage-app-sdk 0.0.2

package/dist/components/PopUps/OtpPopup/OtpPopup.js

@@ -0,0 +1,345 @@
+"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 _reactRedux = require("react-redux");
+var _native = require("@react-navigation/native");
+var _AppConstant = require("../../../assets/AppConstant");
+var _fontUtils = require("../../../utils/fontUtils");
+var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
+var _OtpInput = _interopRequireDefault(require("../../Input/OtpInput"));
+var _arrowBack = _interopRequireDefault(require("../../../assets/svg/arrowBack"));
+var _BingeLogoSvg = _interopRequireDefault(require("../../../assets/svg/BingeLogoSvg"));
+var _commonUtils = require("../../../utils/commonUtils");
+var _CrossSvg = _interopRequireDefault(require("../../../assets/svg/CrossSvg"));
+var _serviceCommonHandler = require("../../../services/serviceCommonHandler");
+var _action = require("../../../services/global/action");
+var _RoutesConstants = require("../../../navigation/RoutesConstants");
+var _action2 = require("../../../services/apiCall/action");
+var _lodash = require("lodash");
+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 OtpPopup = ({
+  pageData,
+  onClose
+}) => {
+  var _pageData$otpPopup2, _pageData$otpPopup3, _pageData$otpPopup4, _pageData$otpPopup5;
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const navigation = (0, _native.useNavigation)();
+  const [otp, setOtp] = (0, _react.useState)("");
+  const [otpStatus, setOtpStatus] = (0, _react.useState)(true);
+  const [isInputEnabled, setIsInputEnabled] = (0, _react.useState)(true);
+  const [timer, setTimer] = (0, _react.useState)(false);
+  const [timerDisplay, setTimerDisplay] = (0, _react.useState)("");
+  const [disableButton, setDisableButton] = (0, _react.useState)(false);
+  const intervalRef = (0, _react.useRef)(null);
+  const distanceRef = (0, _react.useRef)(null);
+  const scaleAnim = (0, _reactNative.useAnimatedValue)(0.8);
+  const opacityAnim = (0, _reactNative.useAnimatedValue)(0);
+  const {
+    source = "",
+    rmn = "",
+    journey = ""
+  } = (0, _reactRedux.useSelector)(state => state.manageAppReducer.createSessionResponse);
+  const countdownTimeStart = () => {
+    const countDownDate = new Date().getTime() + 301000;
+    intervalRef.current = setInterval(() => {
+      const now = new Date().getTime();
+      distanceRef.current = countDownDate - now;
+      const minutes = Math.floor(distanceRef.current % (1000 * 60 * 60) / (1000 * 60));
+      const seconds = Math.floor(distanceRef.current % (1000 * 60) / 1000);
+      if (distanceRef.current > 0) {
+        var _pageData$otpPopup;
+        const formattedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+        const timeText = `${minutes}min ${formattedSeconds}`;
+        setTimerDisplay((0, _commonUtils.replaceStringWithParams)(pageData === null || pageData === void 0 || (_pageData$otpPopup = pageData.otpPopup) === null || _pageData$otpPopup === void 0 ? void 0 : _pageData$otpPopup.otpTime, {
+          "!seconds!": timeText
+        }));
+        setDisableButton(true);
+      }
+      if (distanceRef.current <= 0) {
+        clearInterval(intervalRef.current);
+        setDisableButton(false);
+        setTimerDisplay("");
+      }
+    }, 1000);
+  };
+  const fetchOtpApi = async () => {
+    try {
+      const apiPath = _AppConstant.AppConstant.getApiUrlFromManifest("getOtp");
+      const getOtpApi = (0, _commonUtils.replaceStringWithParams)(apiPath, {
+        "<source>": `${source}`
+      });
+      const resObj = await (0, _commonUtils.fetchWithHeaders)(getOtpApi, _serviceCommonHandler.serviceConsts.method.post, {});
+      if (resObj.status) {
+        countdownTimeStart();
+        setOtpStatus(true);
+      } else {
+        dispatch((0, _action.setApiError)("Something went wrong", true));
+      }
+    } catch (err) {
+      (0, _commonUtils.handleError)(err);
+    }
+  };
+  const fetchVerifyOtp = async () => {
+    setIsInputEnabled(false);
+    try {
+      const payload = {
+        otp: otp
+      };
+      const api = _AppConstant.AppConstant.getApiUrlFromManifest("verifyOtp");
+      const verifyOtpApi = (0, _commonUtils.replaceStringWithParams)(api, {
+        "<source>": `${source}`
+      });
+      const responseObj = await (0, _commonUtils.fetchWithHeaders)(verifyOtpApi, _serviceCommonHandler.serviceConsts.method.post, payload);
+      if (responseObj) {
+        setOtpStatus(responseObj === null || responseObj === void 0 ? void 0 : responseObj.status);
+        if (responseObj !== null && responseObj !== void 0 && responseObj.status && source === "MSALES") {
+          closeModal();
+          dispatch((0, _action2.paymentSummary)({
+            payment: true
+          }));
+          dispatch((0, _action2.ftvBoxStatus)(false));
+          navigation.navigate(_RoutesConstants.RoutesConstants.PaymentStatus);
+        } else if (responseObj !== null && responseObj !== void 0 && responseObj.status && journey === "ZEROAPPSELECTION") {
+          closeModal();
+          // TODO pageData?.getPlans();
+        } else if (responseObj !== null && responseObj !== void 0 && responseObj.status) {
+          closeModal();
+          (0, _commonUtils.fetchSendLinkApi)(pageData);
+        } else {
+          setIsInputEnabled(true);
+          setOtpStatus(false);
+          clearInterval(intervalRef.current);
+          setOtp("");
+          setDisableButton(false);
+        }
+      }
+    } catch (err) {
+      setIsInputEnabled(true);
+      (0, _commonUtils.handleError)(err);
+    }
+  };
+  const resendButton = () => {
+    if (disableButton) return;
+    fetchOtpApi();
+    setOtp("");
+  };
+  const closeModal = () => {
+    if ((0, _commonUtils.isTablet)()) {
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(scaleAnim, {
+        toValue: 0.8,
+        duration: 150,
+        useNativeDriver: true
+      }), _reactNative.Animated.timing(opacityAnim, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true
+      })]).start(() => {
+        onClose();
+      });
+    } else {
+      onClose();
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (!(0, _commonUtils.isTablet)()) return;
+    _reactNative.Animated.parallel([_reactNative.Animated.spring(scaleAnim, {
+      toValue: 1,
+      friction: 6,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(opacityAnim, {
+      toValue: 1,
+      duration: 250,
+      useNativeDriver: true
+    })]).start();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    countdownTimeStart();
+  }, [timer]);
+  (0, _react.useEffect)(() => {
+    if (!(0, _lodash.isEmpty)(otp) && otp.length === 4) {
+      fetchVerifyOtp();
+    }
+  }, [otp]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styles.container, (0, _commonUtils.isTablet)() && styles.tabletStyle, (0, _commonUtils.isTablet)() && {
+      transform: [{
+        scale: scaleAnim
+      }],
+      opacity: opacityAnim
+    }]
+  }, (0, _commonUtils.isTablet)() && /*#__PURE__*/_react.default.createElement(_reactNativeLinearGradient.default, {
+    colors: ["#1a0d2e", "#0f0519"],
+    style: styles.backgroundGradient
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.header
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: closeModal,
+    activeOpacity: 0.7
+  }, (0, _commonUtils.isTablet)() ? /*#__PURE__*/_react.default.createElement(_CrossSvg.default, {
+    style: styles.navigationSvg
+  }) : /*#__PURE__*/_react.default.createElement(_arrowBack.default, {
+    style: styles.navigationSvg
+  })), !(0, _commonUtils.isTablet)() && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.bingeLogo
+  }, /*#__PURE__*/_react.default.createElement(_BingeLogoSvg.default, {
+    width: 100,
+    height: 20
+  }))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.content
+  }, (0, _commonUtils.isTablet)() && /*#__PURE__*/_react.default.createElement(_BingeLogoSvg.default, null), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.heading
+  }, pageData === null || pageData === void 0 || (_pageData$otpPopup2 = pageData.otpPopup) === null || _pageData$otpPopup2 === void 0 ? void 0 : _pageData$otpPopup2.heading), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.subHeading
+  }, (0, _commonUtils.replaceStringWithParams)(pageData === null || pageData === void 0 || (_pageData$otpPopup3 = pageData.otpPopup) === null || _pageData$otpPopup3 === void 0 ? void 0 : _pageData$otpPopup3.subHeading, {
+    "!mobNumber!": ["MSERVICE", "MSERVICEFTV"].includes(source) ? (0, _commonUtils.userNumber)(rmn) : rmn
+  })), /*#__PURE__*/_react.default.createElement(_OtpInput.default, {
+    value: otp,
+    onValueChange: setOtp,
+    autoFocus: true,
+    disabled: !isInputEnabled
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.buttonContainer
+  }, otpStatus && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.timer
+  }, timerDisplay), !otpStatus && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.error
+  }, pageData === null || pageData === void 0 || (_pageData$otpPopup4 = pageData.otpPopup) === null || _pageData$otpPopup4 === void 0 ? void 0 : _pageData$otpPopup4.errorBtn), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    activeOpacity: 0.7,
+    hitSlop: {
+      top: 20,
+      bottom: 20,
+      right: 20,
+      left: 20
+    },
+    onPress: resendButton,
+    style: styles.resendBtn
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.resendBtnText, disableButton && styles.disableButton]
+  }, pageData === null || pageData === void 0 || (_pageData$otpPopup5 = pageData.otpPopup) === null || _pageData$otpPopup5 === void 0 ? void 0 : _pageData$otpPopup5.primaryBtn))));
+};
+var _default = exports.default = OtpPopup;
+const ratio = _AppConstant.AppConstant.dimension.aspectRatio;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    padding: 15 * ratio,
+    paddingHorizontal: 20 * ratio,
+    alignItems: "center"
+  },
+  header: {
+    flexDirection: "row",
+    width: "100%",
+    alignItems: "center",
+    marginBottom: 15 * ratio
+  },
+  navigationSvg: {
+    paddingStart: 20 * ratio,
+    width: 50,
+    height: 50
+  },
+  bingeLogo: {
+    width: "100%",
+    position: "absolute",
+    left: 0,
+    right: 0,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  backgroundGradient: {
+    borderRadius: 14 * ratio,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  tabletStyle: {
+    width: ratio * 450,
+    borderWidth: 1,
+    borderColor: "#554372",
+    borderRadius: 14 * ratio,
+    padding: 25 * ratio
+  },
+  content: {
+    width: "100%",
+    alignItems: "center"
+  },
+  heading: {
+    color: "white",
+    fontSize: (0, _AppConstant.normalizeFont)(23),
+    fontFamily: _fontUtils.FONTS.Medium,
+    marginTop: 15 * ratio
+  },
+  subHeading: {
+    fontSize: (0, _AppConstant.normalizeFont)(14),
+    color: "white",
+    marginVertical: 20 * ratio,
+    textAlign: "center",
+    fontFamily: _fontUtils.FONTS.Medium
+  },
+  paymentOptions: {
+    gap: 15 * ratio,
+    alignItems: "center",
+    marginTop: 40 * ratio,
+    width: "90%"
+  },
+  paymentOption: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    justifyContent: "space-between"
+  },
+  optionText: {
+    fontSize: (0, _AppConstant.normalizeFont)(18),
+    color: "white",
+    fontFamily: _fontUtils.FONTS.Medium,
+    marginLeft: 10 * ratio
+  },
+  balanceText: {
+    fontSize: (0, _AppConstant.normalizeFont)(18),
+    color: "#8e82a1",
+    fontFamily: _fontUtils.FONTS.Medium,
+    marginLeft: 10 * ratio
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    width: "100%",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: 25 * ratio,
+    paddingHorizontal: 20 * ratio
+  },
+  error: {
+    color: "#e53835cf",
+    fontSize: (0, _AppConstant.normalizeFont)(14),
+    fontFamily: _fontUtils.FONTS.Medium,
+    alignSelf: "baseline"
+  },
+  resendBtn: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  resendBtnText: {
+    fontSize: (0, _AppConstant.normalizeFont)(14),
+    color: "#f1cae1",
+    fontFamily: _fontUtils.FONTS.Medium
+  },
+  disableButton: {
+    color: "#574154ff"
+  },
+  timer: {
+    fontSize: (0, _AppConstant.normalizeFont)(14),
+    color: "white",
+    fontFamily: _fontUtils.FONTS.Medium
+  }
+});

package/dist/components/PopUps/PlanCancelledPopUp/PlanCancelledPopUp.js

@@ -0,0 +1,183 @@
+"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 _reactRedux = require("react-redux");
+var _AppConstant = require("../../../assets/AppConstant");
+var _commonUtils = require("../../../utils/commonUtils");
+var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
+var _fontUtils = require("../../../utils/fontUtils");
+var _PrimaryButton = _interopRequireDefault(require("../../Buttons/PrimaryButton/PrimaryButton"));
+var _action = require("../../../services/global/action");
+var _serviceCommonHandler = require("../../../services/serviceCommonHandler");
+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 PlanCancelledPopUp = ({
+  pageData,
+  modalData,
+  redirect: setMyPlanData,
+  endDate
+}) => {
+  var _pageData$planCancell, _pageData$planCancell2, _pageData$planCancell3, _pageData$planCancell4, _pageData$planCancell5, _pageData$planCancell6;
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const {
+    createSessionResponse
+  } = (0, _reactRedux.useSelector)(state => state.manageAppReducer);
+  const {
+    source = ""
+  } = createSessionResponse;
+  const scaleAnim = (0, _reactNative.useAnimatedValue)(0.8);
+  const opacityAnim = (0, _reactNative.useAnimatedValue)(0);
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.parallel([_reactNative.Animated.spring(scaleAnim, {
+      toValue: 1,
+      friction: 6,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(opacityAnim, {
+      toValue: 1,
+      duration: 250,
+      useNativeDriver: true
+    })]).start();
+  }, [scaleAnim, opacityAnim]);
+  const closeModal = () => {
+    // Object.keys(modalData).forEach(key => delete modalData[key]);
+
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(scaleAnim, {
+      toValue: 0.8,
+      duration: 200,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(opacityAnim, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true
+    })]).start(() => {
+      fetchMyPlanApi();
+      dispatch((0, _action.hideModal)());
+    });
+  };
+  const fetchMyPlanApi = async () => {
+    dispatch((0, _action.showLoader)());
+    try {
+      const api = _AppConstant.AppConstant.getApiUrlFromManifest("myPlanApi");
+      const apiPath = (0, _commonUtils.replaceStringWithParams)(api, {
+        "<source>": `${source}`
+      });
+      const response = await (0, _commonUtils.fetchWithHeaders)(apiPath, _serviceCommonHandler.serviceConsts.method.get);
+      const responseObj = response;
+      if (responseObj && responseObj !== null && responseObj !== void 0 && responseObj.status) {
+        setMyPlanData(responseObj === null || responseObj === void 0 ? void 0 : responseObj.data);
+      }
+    } catch (err) {
+      (0, _commonUtils.handleError)(err, dispatch);
+    } finally {
+      dispatch((0, _action.hideLoader)());
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styles.mainContainer, {
+      transform: [{
+        scale: scaleAnim
+      }],
+      opacity: opacityAnim
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeLinearGradient.default, {
+    colors: ["#200042", "#170134ff", "#0a0013ff"],
+    start: {
+      x: 0,
+      y: 0
+    },
+    end: {
+      x: 1,
+      y: 0
+    },
+    style: styles.backgroundGradient
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    source: {
+      uri: pageData === null || pageData === void 0 || (_pageData$planCancell = pageData.planCancelledPopup) === null || _pageData$planCancell === void 0 || (_pageData$planCancell = _pageData$planCancell.successImage) === null || _pageData$planCancell === void 0 ? void 0 : _pageData$planCancell.url
+    },
+    style: styles.successImage
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.textContainer
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.heading
+  }, pageData === null || pageData === void 0 || (_pageData$planCancell2 = pageData.planCancelledPopup) === null || _pageData$planCancell2 === void 0 ? void 0 : _pageData$planCancell2.smallDesc), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.subHeading
+  }, (0, _commonUtils.replaceStringWithParams)(pageData === null || pageData === void 0 || (_pageData$planCancell3 = pageData.planCancelledPopup) === null || _pageData$planCancell3 === void 0 ? void 0 : _pageData$planCancell3.longDesc, {
+    "!date!": endDate || ""
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.modalNotice
+  }, pageData === null || pageData === void 0 || (_pageData$planCancell4 = pageData.planCancelledPopup) === null || _pageData$planCancell4 === void 0 ? void 0 : _pageData$planCancell4.notice, " ", /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.semiBold
+  }, (0, _commonUtils.replaceStringWithParams)(pageData === null || pageData === void 0 || (_pageData$planCancell5 = pageData.planCancelledPopup) === null || _pageData$planCancell5 === void 0 ? void 0 : _pageData$planCancell5.date, {
+    "!date!": endDate || ""
+  })))), /*#__PURE__*/_react.default.createElement(_PrimaryButton.default, {
+    title: pageData === null || pageData === void 0 || (_pageData$planCancell6 = pageData.planCancelledPopup) === null || _pageData$planCancell6 === void 0 ? void 0 : _pageData$planCancell6.primaryBtn,
+    onPress: closeModal,
+    style: styles.button
+  }));
+};
+var _default = exports.default = PlanCancelledPopUp;
+const ratio = _AppConstant.AppConstant.dimension.aspectRatio;
+const styles = _reactNative.StyleSheet.create({
+  mainContainer: {
+    width: ratio * ((0, _commonUtils.isTablet)() ? 450 : 340),
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 20 * ratio,
+    paddingTop: 25 * ratio,
+    borderWidth: 1,
+    borderColor: "#554372",
+    borderRadius: 14 * ratio,
+    marginHorizontal: 10 * ratio
+  },
+  backgroundGradient: {
+    borderRadius: 14 * ratio,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  successImage: {
+    width: 50 * ratio,
+    height: 50 * ratio,
+    marginBottom: 15 * ratio
+  },
+  heading: {
+    fontSize: (0, _AppConstant.normalizeFont)(22),
+    lineHeight: (0, _AppConstant.normalizeFont)(22),
+    fontFamily: _fontUtils.FONTS.Medium,
+    color: "white",
+    textAlign: "center",
+    marginBottom: 15 * ratio
+  },
+  subHeading: {
+    fontSize: (0, _AppConstant.normalizeFont)(16),
+    lineHeight: (0, _AppConstant.normalizeFont)(16),
+    fontFamily: _fontUtils.FONTS.Medium,
+    color: "#D6C6F4",
+    textAlign: "center",
+    marginBottom: 15 * ratio
+  },
+  textContainer: {
+    paddingHorizontal: 15 * ratio
+  },
+  modalNotice: {
+    fontSize: (0, _AppConstant.normalizeFont)(16),
+    lineHeight: (0, _AppConstant.normalizeFont)(16),
+    fontFamily: _fontUtils.FONTS.Medium,
+    color: "#D6C6F4",
+    textAlign: "center",
+    marginBottom: 15 * ratio
+  },
+  semiBold: {
+    fontFamily: _fontUtils.FONTS.SemiBold
+  },
+  button: {
+    marginBottom: 15 * ratio
+  }
+});

package/dist/components/PopUps/PlanDetailPopup/PlanDetailPopup.js

@@ -0,0 +1,121 @@
+"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 _commonUtils = require("../../../utils/commonUtils");
+var _AppConstant = require("../../../assets/AppConstant");
+var _PrimaryButton = _interopRequireDefault(require("../../Buttons/PrimaryButton/PrimaryButton"));
+var _reactRedux = require("react-redux");
+var _action = require("../../../services/global/action");
+var _fontUtils = require("../../../utils/fontUtils");
+var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
+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 PlanDetailPopup = ({
+  modalData
+}) => {
+  var _modalData$alertImage, _modalData$alertImage2;
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const scaleAnim = (0, _reactNative.useAnimatedValue)(0.8);
+  const opacityAnim = (0, _reactNative.useAnimatedValue)(0);
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.parallel([_reactNative.Animated.spring(scaleAnim, {
+      toValue: 1,
+      friction: 6,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(opacityAnim, {
+      toValue: 1,
+      duration: 250,
+      useNativeDriver: true
+    })]).start();
+  }, [scaleAnim, opacityAnim]);
+  const handleClose = () => {
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(scaleAnim, {
+      toValue: 0.8,
+      duration: 150,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(opacityAnim, {
+      toValue: 0,
+      duration: 150,
+      useNativeDriver: true
+    })]).start(() => {
+      dispatch((0, _action.hideModal)());
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styles.mainContainer, {
+      transform: [{
+        scale: scaleAnim
+      }],
+      opacity: opacityAnim
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeLinearGradient.default, {
+    colors: ["#200042", "#170134ff", "#0a0013ff"],
+    start: {
+      x: 0,
+      y: 0
+    },
+    end: {
+      x: 1,
+      y: 0
+    },
+    style: styles.backgroundGradient
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    source: {
+      uri: (modalData === null || modalData === void 0 || (_modalData$alertImage = modalData.alertImage) === null || _modalData$alertImage === void 0 ? void 0 : _modalData$alertImage.url) || (modalData === null || modalData === void 0 || (_modalData$alertImage2 = modalData.alertImage) === null || _modalData$alertImage2 === void 0 ? void 0 : _modalData$alertImage2.alt)
+    },
+    style: styles.alertImage
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.heading
+  }, modalData === null || modalData === void 0 ? void 0 : modalData.heading), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.subHeading
+  }, modalData === null || modalData === void 0 ? void 0 : modalData.subHeading), /*#__PURE__*/_react.default.createElement(_PrimaryButton.default, {
+    title: modalData === null || modalData === void 0 ? void 0 : modalData.primaryBtn,
+    onPress: handleClose
+  }));
+};
+var _default = exports.default = PlanDetailPopup;
+const ratio = _AppConstant.AppConstant.dimension.aspectRatio;
+const styles = _reactNative.StyleSheet.create({
+  mainContainer: {
+    width: ratio * ((0, _commonUtils.isTablet)() ? 450 : 340),
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 20 * ratio,
+    paddingHorizontal: 20 * ratio,
+    borderWidth: 1,
+    borderColor: "#554372",
+    borderRadius: 14 * ratio,
+    marginHorizontal: 10 * ratio
+  },
+  alertImage: {
+    width: 40 * ratio,
+    height: 40 * ratio
+  },
+  backgroundGradient: {
+    borderRadius: 14 * ratio,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  heading: {
+    fontSize: (0, _AppConstant.normalizeFont)(22),
+    color: "white",
+    textAlign: "center",
+    fontFamily: _fontUtils.FONTS.SemiBold,
+    marginVertical: 10 * ratio
+  },
+  subHeading: {
+    fontSize: (0, _AppConstant.normalizeFont)(14),
+    color: "#d7c6f4",
+    marginBottom: 10 * ratio,
+    textAlign: "center",
+    fontFamily: _fontUtils.FONTS.Medium
+  }
+});