From 092f25b39f6976ae3e59ab3afe321db41a0455a0 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Mon, 15 Nov 2021 11:13:53 +0500
Subject: [PATCH] show login button instead of pricing plan when user logged
 out

---
 .../src/components/Premium/component.js       |  3 +-
 .../src/components/Premium/pricingitem.js     |  6 +--
 .../src/components/Premium/pricingplans.js    | 54 +++++++++++++------
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/apps/mobile/src/components/Premium/component.js b/apps/mobile/src/components/Premium/component.js
index 011d011d9..236f5d8be 100644
--- a/apps/mobile/src/components/Premium/component.js
+++ b/apps/mobile/src/components/Premium/component.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Image, ScrollView, View } from 'react-native';
 import { useTracked } from '../../provider';
+import { useUserStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import { eSendEvent, presentSheet } from '../../services/EventManager';
 import { getElevation } from '../../utils';
@@ -21,7 +22,7 @@ import { PricingPlans } from './pricing-plans';
 export const Component = ({close, promo, getRef}) => {
   const [state, dispatch] = useTracked();
   const colors = state.colors;
-  const user = {}; //useUserStore(state => state.user);
+  const user = useUserStore(state => state.user);
   const [floatingButton, setFloatingButton] = useState(false);
 
   const onPress = async () => {
diff --git a/apps/mobile/src/components/Premium/pricingitem.js b/apps/mobile/src/components/Premium/pricingitem.js
index 57fe5becf..2db97ab97 100644
--- a/apps/mobile/src/components/Premium/pricingitem.js
+++ b/apps/mobile/src/components/Premium/pricingitem.js
@@ -21,11 +21,11 @@ export const PricingItem = ({product, onPress}) => {
       }}>
       <View>
         <Heading size={SIZE.lg - 2}>
-          {product.type === 'yearly' || product.offerType === 'yearly'
+          {product?.type === 'yearly' || product?.offerType === 'yearly'
             ? 'Yearly'
             : 'Monthly'}
         </Heading>
-        {product.info && (
+        {product?.info && (
           <Paragraph size={SIZE.xs + 1}>{product.info}</Paragraph>
         )}
       </View>
@@ -33,7 +33,7 @@ export const PricingItem = ({product, onPress}) => {
       <View>
         <Paragraph size={SIZE.sm}>
           <Heading size={SIZE.lg - 2}>{product?.data?.localizedPrice}/</Heading>
-          {product.type === 'yearly' || product.offerType === 'yearly'
+          {product?.type === 'yearly' || product?.offerType === 'yearly'
             ? '/year'
             : '/month'}
         </Paragraph>
diff --git a/apps/mobile/src/components/Premium/pricingplans.js b/apps/mobile/src/components/Premium/pricingplans.js
index 179734d86..9811ddae3 100644
--- a/apps/mobile/src/components/Premium/pricingplans.js
+++ b/apps/mobile/src/components/Premium/pricingplans.js
@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {Platform, View} from 'react-native';
 import * as RNIap from 'react-native-iap';
 import {useTracked} from '../../provider';
+import {useUserStore} from '../../provider/stores';
 import {
   eSendEvent,
   presentSheet,
@@ -9,7 +10,11 @@ import {
 } from '../../services/EventManager';
 import PremiumService from '../../services/PremiumService';
 import {db} from '../../utils/database';
-import {eCloseProgressDialog, eOpenLoginDialog} from '../../utils/Events';
+import {
+  eClosePremiumDialog,
+  eCloseProgressDialog,
+  eOpenLoginDialog
+} from '../../utils/Events';
 import {openLinkInBrowser} from '../../utils/functions';
 import {SIZE} from '../../utils/SizeUtils';
 import {sleep} from '../../utils/TimeUtils';
@@ -35,7 +40,7 @@ const promoCyclesYearly = {
 export const PricingPlans = ({promo, marginTop}) => {
   const [state, dispatch] = useTracked();
   const colors = state.colors;
-  const user = {}; //useUserStore(state => state.user);
+  const user = useUserStore(state => state.user);
   const [product, setProduct] = useState(null);
   const [products, setProducts] = useState([]);
   const [offers, setOffers] = useState(null);
@@ -233,19 +238,38 @@ export const PricingPlans = ({promo, marginTop}) => {
         </>
       ) : (
         <View>
-          <PricingItem
-            product={product}
-            onPress={() => buySubscription(product)}
-          />
-
-          <Button
-            onPress={() => {
-              setProduct(null);
-            }}
-            height={30}
-            type="errorShade"
-            title="Cancel promo code"
-          />
+          {!user ? (
+            <Button
+              onPress={() => {
+                eSendEvent(eClosePremiumDialog);
+                setTimeout(() => {
+                  eSendEvent(eOpenLoginDialog, 1);
+                }, 400);
+              }}
+              title={'Try free for 14 days'}
+              type="accent"
+              style={{
+                paddingHorizontal: 24,
+                marginTop: 20,
+                marginBottom: 10
+              }}
+            />
+          ) : (
+            <>
+              <PricingItem
+                product={product}
+                onPress={() => buySubscription(product)}
+              />
+              <Button
+                onPress={() => {
+                  setProduct(null);
+                }}
+                height={30}
+                type="errorShade"
+                title="Cancel promo code"
+              />
+            </>
+          )}
         </View>
       )}