Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shows active monthly/yearly subscriptions #5779

Draft
wants to merge 3 commits into
base: sprint
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 67 additions & 47 deletions src/screens/ChoosePlanScreen/ChoosePlan.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
Alert,
Linking,
StyleSheet,
TouchableOpacity,
Dimensions,
} from 'react-native';
import Text from 'src/components/KeeperText';
Expand Down Expand Up @@ -46,6 +45,8 @@ import Buttons from 'src/components/Buttons';
import PlanDetailsCards from './components/PlanDetailsCards';
const { width } = Dimensions.get('window');

const OLD_SUBS_PRODUCT_ID = ['hodler.dev', 'diamond_hands.dev', 'diamond_hands', 'hodler'];

function ChoosePlan() {
const route = useRoute();
const navigation = useNavigation();
Expand All @@ -70,6 +71,7 @@ function ChoosePlan() {
const disptach = useDispatch();
const [isServiceUnavailible, setIsServiceUnavailible] = useState(false);
const [showPromocodeModal, setShowPromocodeModal] = useState(false);
const isOldSub = OLD_SUBS_PRODUCT_ID.includes(subscription.productId);

useEffect(() => {
const purchaseUpdateSubscription = purchaseUpdatedListener(async (purchase) => {
Expand Down Expand Up @@ -124,16 +126,21 @@ function ChoosePlan() {
if (monthly.length) monthlyPlans.push(offer);
if (yearly.length) yearlyPlans.push(offer);
});
data[index].monthlyPlanDetails = {
...getPlanData(monthlyPlans),
productId: subscription.productId,
offers: monthlyPlans,
};
data[index].yearlyPlanDetails = {
...getPlanData(yearlyPlans),
productId: subscription.productId,
offers: yearlyPlans,
};

if (monthlyPlans.length > 0) {
data[index].monthlyPlanDetails = {
...getPlanData(monthlyPlans),
productId: subscription.productId,
offers: monthlyPlans,
};
}
if (yearlyPlans.length > 0) {
data[index].yearlyPlanDetails = {
...getPlanData(yearlyPlans),
productId: subscription.productId,
offers: yearlyPlans,
};
}
} else if (Platform.OS === 'ios') {
const planDetails = {
price: subscription.localizedPrice,
Expand Down Expand Up @@ -174,13 +181,26 @@ function ChoosePlan() {
async function processPurchase(purchase: SubscriptionPurchase) {
setRequesting(true);
try {
let response;
const receipt = purchase.transactionReceipt;
const plan = items.filter((item) => item.productIds.includes(purchase.productId));
const response = await Relay.updateSubscription(id, publicId, purchase);
let plan = items.filter((item) => item.productIds.includes(purchase.productId));
if (!plan.length && OLD_SUBS_PRODUCT_ID.includes(purchase.productId)) {
// For old subs restore, updating relay with new subs monthly plan of same tier.
const newProductId = purchase.productId.split('.')[0] + '.monthly';
plan = items.filter((item) => item.productIds.includes(newProductId));
const updatedPurchase = {
...purchase,
productId: newProductId,
productIds: [newProductId],
};
response = await Relay.updateSubscription(id, publicId, updatedPurchase);
} else {
response = await Relay.updateSubscription(id, publicId, purchase);
}
setRequesting(false);
if (response.updated) {
const subscription: SubScription = {
productId: purchase.productId.replace('.30', ''), // To save discounted plan as normal plan in db
productId: purchase.productId,
receipt,
name: plan[0].name,
level: response.level,
Expand Down Expand Up @@ -325,8 +345,10 @@ function ChoosePlan() {
if (purchase.productId === subscription.productId) {
showToast(`${choosePlan.currentSubscriptionMessage} ${subscription.name}`);
} else {
const validPurchase = items.find((item) =>
item.productIds.includes(purchase.productId)
const validPurchase = items.find(
(item) =>
item.productIds.includes(purchase.productId) ||
OLD_SUBS_PRODUCT_ID.includes(purchase.productId)
);
if (validPurchase) {
processPurchase(purchase);
Expand Down Expand Up @@ -445,9 +467,9 @@ function ChoosePlan() {
}

const getActionBtnTitle = () => {
const isSubscribed = items[currentPosition].productIds.includes(
subscription.productId.toLowerCase()
);
const isSubscribed =
items[currentPosition].productIds.includes(subscription.productId.toLowerCase()) &&
subscription.productId.toLowerCase().includes(isMonthly ? 'monthly' : 'yearly');
if (isSubscribed) return 'Subscribed';
return `Continue - ${
(isMonthly
Expand All @@ -457,6 +479,21 @@ function ChoosePlan() {
}`;
};

const showBtmCTR = () => {
if (loading) return false;
if (!items) return false;
if (isOldSub) {
const newProdID = subscription.productId.split('.')[0].toLowerCase();
return !items[currentPosition].productIds.some((productId) => productId.includes(newProdID));
}

return (
!items[currentPosition].productIds.includes(subscription.productId.toLowerCase()) ||
(subscription.productId.toLowerCase() !== 'pleb' &&
!subscription.productId.toLowerCase().includes(isMonthly ? 'monthly' : 'yearly'))
);
};

return (
<ScreenWrapper barStyle="dark-content" backgroundcolor={`${colorMode}.primaryBackground`}>
<KeeperHeader
Expand Down Expand Up @@ -537,38 +574,21 @@ function ChoosePlan() {

{/* BTM CTR */}

{!loading &&
items &&
!items[currentPosition].productIds.includes(subscription.productId.toLowerCase()) && (
<>
<Box style={styles.ctaWrapper}>
<Buttons
primaryCallback={() => processSubscription(items[currentPosition], currentPosition)}
primaryText={getActionBtnTitle()}
fullWidth
/>
</Box>
</>
)}
{showBtmCTR() && (
<>
<Box style={styles.ctaWrapper}>
<Buttons
primaryCallback={() => processSubscription(items[currentPosition], currentPosition)}
primaryText={getActionBtnTitle()}
fullWidth
/>
</Box>
</>
)}
</ScreenWrapper>
);
}

const TextActionBtn = ({ value, onPress, visible }) => {
const { colorMode } = useColorMode();
return (
<TouchableOpacity
onPress={() => visible && onPress()}
style={{ alignSelf: 'center', opacity: visible ? 1 : 0, marginTop: 20 }}
>
<Box>
<Text style={styles.ctaText} color={`${colorMode}.greenText`} medium>
{value}
</Text>
</Box>
</TouchableOpacity>
);
};

const styles = StyleSheet.create({
noteWrapper: {
Expand Down
Loading