Highlight feature and on click handler for header in pro version screen

README.md

@@ -1,5 +1,6 @@
 ## [HueHive (Formerly Croma)](https://huehive.co)
-### Croma is now renamed to Huehive ###
+
+### Croma is now renamed to Huehive
 
 [![Croma DEMO](https://img.youtube.com/vi/KqrsdAuvW40/0.jpg)](https://www.youtube.com/watch?v=KqrsdAuvW40)
 

components/AIColorPicker.js

@@ -64,18 +64,22 @@ export default function AIColorPicker({ setColor, currentPlan, onNavigateProScre
           {loading ? (
             <ActivityIndicator size="small" color={Colors.primary} />
           ) : (
-            <FontAwesome5 name="magic" size={24} color={currentPlan !== 'proPlus' ? Colors.lightGrey : Colors.primary} />
+            <FontAwesome5
+              name="magic"
+              size={24}
+              color={currentPlan !== 'proPlus' ? Colors.lightGrey : Colors.primary}
+            />
           )}
         </TouchableOpacity>
       </View>
-      {
-      currentPlan != 'proPlus' && <CromaButton
-            style={styles.proVersionButton}
-            textStyle={{ color: Colors.white }}
-            onPress={() =>  onNavigateProScreen()}>
-            {t('Upgrade to Pro Plus')}
-          </CromaButton>
-      }
+      {currentPlan != 'proPlus' && (
+        <CromaButton
+          style={styles.proVersionButton}
+          textStyle={{ color: Colors.white }}
+          onPress={() => onNavigateProScreen()}>
+          {t('Upgrade to Pro Plus')}
+        </CromaButton>
+      )}
       <View style={styles.suggestionsContainer}>
         {suggestions.length > 0 ? (
           suggestions.map(({ name, hex }) => (
@@ -163,5 +167,5 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     paddingVertical: 12,
     paddingHorizontal: 24
-  },
+  }
 });

components/ColorPickerModal.js

@@ -69,7 +69,14 @@ export default function ColorPickerModal({ initialColor, onColorSelected, onClos
     {
       key: 'AI',
       title: 'AI',
-      component: <AIColorPicker color={color} setColor={setColor} currentPlan={currentPlan} onNavigateProScreen={() => navigation.navigate("ProVersion")}/>
+      component: (
+        <AIColorPicker
+          color={color}
+          setColor={setColor}
+          currentPlan={currentPlan}
+          onNavigateProScreen={() => navigation.navigate('ProVersion', { highlightFeatureId: 11 })}
+        />
+      )
     },
     {
       key: 'hex',

components/HexKeyboard.js

@@ -52,4 +52,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default HexKeyboard;
+export default HexKeyboard;

components/SingleColorCard.js

@@ -55,15 +55,17 @@ const SingleColorCard = function (props) {
                     setAnimationType('fadeOutRightBig');
                     onColorDeleteLocal();
                   }}
-                  style={styles.actionButton}>
+                  style={styles.actionButton}
+                >
                   <MaterialIcons size={20} color={textColor} name="delete-outline" />
                 </TouchableOpacity>
               </View>
               <View style={[styles.actionButtonsView, styles.dragDropButton]}>
                 <TouchableOpacity
                   onPressIn={(e) => {
                     props.onPressDrag();
-                  }}>
+                  }}
+                >
                   <MaterialIcons
                     style={{ alignItems: 'center' }}
                     size={20}

components/SingleColorView.js

@@ -18,7 +18,15 @@ import ColorPickerModal from './ColorPickerModal';
 import { pickTextColorBasedOnBgColor } from '../libs/ColorHelper';
 import { useNavigation } from '@react-navigation/native';
 
-export const SingleColorView = ({ color, showUnlockPro, onColorChange, drag, onRemove, onAdd, currentPlan }) => {
+export const SingleColorView = ({
+  color,
+  showUnlockPro,
+  onColorChange,
+  drag,
+  onRemove,
+  onAdd,
+  currentPlan
+}) => {
   const [modalVisible, setModalVisible] = useState(false);
   const [isColorPickerVisible, setIsColorPickerVisible] = useState(false);
   const navigation = useNavigation();
@@ -70,7 +78,11 @@ export const SingleColorView = ({ color, showUnlockPro, onColorChange, drag, onR
   return (
     <Animated.View style={[styles.container, { opacity: color.opacity }]}>
       <TouchableOpacity
-        onPress={showUnlockPro ? () => navigation.navigate('ProVersion') : openModal}
+        onPress={
+          showUnlockPro
+            ? () => navigation.navigate('ProVersion', { highlightFeatureId: 9 })
+            : openModal
+        }
         onLongPress={() => {
           if (!showUnlockPro) drag();
         }}

constants/Styles.js

@@ -14,11 +14,12 @@ export default {
   black: '#000',
   darkGreen: '#009900',
   darkRed: '#E63946',
-  lightBlue: "#D6E8EE",
+  lightBlue: '#D6E8EE',
+  lightBlue200: '#94dcf1',
   backgroundColor: '#f2f2f2',
   overlay: 'rgba(0, 0, 0, 0.5)',
   primaryDark: '#C94740',
   transparent: 'transparent',
-  royalBlue: "#4169E1"
+  royalBlue: '#4169E1'
   // fabPrimary: '#ff6f00'
 };

hooks/useApplicationStore.js

@@ -10,7 +10,7 @@ const useApplicationStore = create((set) => ({
   deletedPalettes: {},
   isLoading: false,
   pro: {
-    plan: "starter"
+    plan: 'starter'
   },
   detailedColor: null,
   commonPalettes: [],
@@ -96,7 +96,7 @@ const useApplicationStore = create((set) => ({
   },
 
   setPurchase: (plan) => {
-    set({ pro: {plan: plan} });
+    set({ pro: { plan: plan } });
   },
 
   setDetailedColor: (detailedColor) => {

libs/Helpers.js

@@ -10,27 +10,25 @@ const isProduction = () => {
 
 const planToSKUMapping = {
   starter: {
-    pro: "starter_to_pro",
-    // proPlus: "local_test1" 
-    proPlus: "croma_pro" // Keep the product same for backward compatibility 
+    pro: 'starter_to_pro',
+    proPlus: isProduction() ? 'croma_pro' : 'local_test1'
   },
   pro: {
-    proPlus: "pro_to_pro_plus"
+    proPlus: 'pro_to_pro_plus'
   }
-}
+};
 
 const skuToPlanMapping = {
-  "starter_to_pro": "pro",
-  // "local_test1": "proPlus",
-  "croma_pro": "proPlus",
-  "pro_to_pro_plus": "proPlus"
-}
+  starter_to_pro: 'pro',
+  pro_to_pro_plus: 'proPlus',
+  ...(isProduction() ? { croma_pro: 'proPlus' } : { local_test1: 'proPlus' })
+};
 
 const planLabels = {
-  starter: "Starter",
-  pro: "Pro",
-  proPlus: "Pro Plus"
-}
+  starter: 'Starter',
+  pro: 'Pro',
+  proPlus: 'Pro Plus'
+};
 
 const readRemoteConfig = async (key) => {
   // Native module always returns string. So, we need to convert it to boolean.
@@ -63,8 +61,8 @@ function isObject(value) {
 
 const purchase = async function (setPurchase, currentPlan, toPlan) {
   try {
-    const productSKU = planToSKUMapping[currentPlan][toPlan]
-    await getProducts({ skus:  [productSKU]});
+    const productSKU = planToSKUMapping[currentPlan][toPlan];
+    await getProducts({ skus: [productSKU] });
     await requestPurchase({
       skus: [productSKU]
     });
@@ -102,7 +100,7 @@ const initPurchase = async function (
   const retryPurchase = async (retries) => {
     try {
       let products = await getAvailablePurchases();
-      const plans = products.map(product => skuToPlanMapping[product.productId]);
+      const plans = products.map((product) => skuToPlanMapping[product.productId]);
       const selectedPlan = determinePlan(plans);
 
       if (selectedPlan) {
@@ -111,7 +109,7 @@ const initPurchase = async function (
           notifyMessage(`Congrats, You are already a pro (${planLabels[selectedPlan]}) user!`);
         }
       }
-      // await setPurchase("starter"); // For testing. 
+      //  await setPurchase('starter'); // For testing.
     } catch (e) {
       if (retries > 0) {
         logEvent('init_purchase_retry', e.message);
@@ -149,21 +147,21 @@ const getAvailablePurchases = async () => {
 
 const getPlanPrice = async (currentPlan, toPlans) => {
   try {
-    const productSKUs = toPlans.map(toPlan => planToSKUMapping[currentPlan][toPlan]);
-    const products = await RNIap.getProducts({skus: productSKUs});
+    const productSKUs = toPlans.map((toPlan) => planToSKUMapping[currentPlan][toPlan]);
+    const products = await RNIap.getProducts({ skus: productSKUs });
     if (products.length > 0) {
       const prices = {};
-      products.forEach(product => {
+      products.forEach((product) => {
         prices[product.productId] = {
-          localizedPrice: product.localizedPrice,
+          localizedPrice: product.localizedPrice
         };
       });
-      return toPlans.map(toPlan => {
+      return toPlans.map((toPlan) => {
         const productSKU = planToSKUMapping[currentPlan][toPlan];
         const priceInfo = prices[productSKU] || {};
         return {
           toPlan,
-          price: priceInfo.localizedPrice 
+          price: priceInfo.localizedPrice
         };
       });
     } else {
@@ -177,7 +175,6 @@ const getPlanPrice = async (currentPlan, toPlans) => {
   }
 };
 
-
 function notifyMessage(msg, duration = ToastAndroid.LONG) {
   if (Platform.OS === 'android') {
     ToastAndroid.show(msg, duration);
@@ -241,4 +238,13 @@ export function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-export { logEvent, sendClientError, purchase, notifyMessage, initPurchase, readRemoteConfig, planLabels, getPlanPrice };
+export {
+  logEvent,
+  sendClientError,
+  purchase,
+  notifyMessage,
+  initPurchase,
+  readRemoteConfig,
+  planLabels,
+  getPlanPrice
+};

screens/ChatSessionScreen.js

@@ -172,7 +172,7 @@ const ChatSessionScreen = (props) => {
                   textStyle={{ color: Colors.white }}
                   onPress={() => {
                     logEvent('chat_session_pro_button');
-                    navigation.navigate('ProVersion');
+                    navigation.navigate('ProVersion', { highlightFeatureId: 10 });
                   }}>
                   Unlock {planLabels['proPlus']} to use this feature
                 </CromaButton>