Updated the example page. Support for Free | Essentials | Advanced plans

Qualli-Research-Platform · Dec 6, 2023 · 852cf5c · 852cf5c
1 parent ed0c20a
commit 852cf5c
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 22 deletions.
diff --git a/example/assets/bg-1.png b/example/assets/bg-1.png
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,39 +1,37 @@
 import * as React from 'react';
 
-import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import {
+    StyleSheet,
+    View,
+    Image,
+    TouchableWithoutFeedback,
+} from 'react-native';
 import { QualliProvider, useQualli } from '@qualli/qualli-rn-sdk';
 
 const Home = () => {
     const qualli = useQualli();
 
     return (
         <View style={styles.container}>
-            <TouchableOpacity
-                onPress={() => {
-                    qualli.setAttributes({
-                        plan: 'trial',
-                        email: '[email protected]',
-                        first_name: 'John',
-                        last_name: 'Doe',
-                    });
-                }}
-            >
-                <Text>{'Update User Attributes'}</Text>
-            </TouchableOpacity>
+            <Image
+                source={require('./../assets/bg-1.png')}
+                style={styles.bg}
+                resizeMethod="scale"
+                resizeMode="cover"
+            />
 
-            <TouchableOpacity
+            <TouchableWithoutFeedback
                 onPress={() => qualli.performTrigger('SUBSCRIBE')}
-                style={{ marginTop: 20 }}
             >
-                <Text>{'trigger SUBSCRIBE'}</Text>
-            </TouchableOpacity>
+                <View style={{ width: 400, height: 400 }}></View>
+            </TouchableWithoutFeedback>
         </View>
     );
 };
 
 export default function App() {
     return (
-        <QualliProvider apiKey="120wed885-7f8f-4846-9fa8-3lnqbdfa946">
+        <QualliProvider apiKey="YOUR_API_KEY">
             <Home />
         </QualliProvider>
     );
@@ -50,4 +48,13 @@ const styles = StyleSheet.create({
         height: 60,
         marginVertical: 20,
     },
+    bg: {
+        position: 'absolute',
+        height: '100%',
+        width: '100%',
+        top: 20,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    },
 });
diff --git a/src/providers/QualliProvider.tsx b/src/providers/QualliProvider.tsx
@@ -20,6 +20,9 @@ interface AuthState {
     authenticating: boolean;
     sessionKey: string | null;
     userKey: string | null;
+    company: {
+        plan: 'free' | 'essentials' | 'advanced';
+    };
 }
 
 interface QualliContextProps {
@@ -43,6 +46,9 @@ export const QualliProvider: React.FC<QualliProviderProps> = ({
         authenticating: false,
         sessionKey: null,
         userKey: null,
+        company: {
+            plan: 'free',
+        },
     });
 
     const [surveyState, setSurveyState] = useState({
@@ -106,6 +112,9 @@ export const QualliProvider: React.FC<QualliProviderProps> = ({
             authenticating: true,
             sessionKey: response.session_key,
             userKey: response.app_user_key,
+            company: {
+                plan: response.company_info?.plan,
+            },
         };
 
         // in the background set the users latest attributes
@@ -189,6 +198,7 @@ export const QualliProvider: React.FC<QualliProviderProps> = ({
             <SurveyWrapper
                 survey={surveyState?.survey}
                 logSurveyAction={logSurveyAction}
+                companyPlan={authState?.current?.company?.plan || 'free'}
             />
         </QualliContext.Provider>
     );

diff --git a/src/survey/base/heading/heading.tsx b/src/survey/base/heading/heading.tsx
@@ -1,17 +1,31 @@
 import React from 'react';
-import { TouchableOpacity, Image, StyleSheet, View } from 'react-native';
+import { TouchableOpacity, Image, StyleSheet, View, Text } from 'react-native';
 
 interface Props {
     color: string;
+    companyPlan: string;
     onClose: () => void;
 }
 
 const SurveyHeading = (props: Props) => {
-    const { color, onClose } = props;
+    const { color, onClose, companyPlan } = props;
 
     return (
         <View style={styles.container}>
-            <View style={styles.leftContainer} />
+            <View style={styles.leftContainer}>
+                {companyPlan === 'free' && (
+                    <Text
+                        style={[
+                            {
+                                color: color,
+                            },
+                            styles.branding,
+                        ]}
+                    >
+                        {'Powered by Qualli'}
+                    </Text>
+                )}
+            </View>
 
             <TouchableOpacity
                 style={styles.closeIcon}
@@ -30,7 +44,8 @@ const SurveyHeading = (props: Props) => {
 const styles = StyleSheet.create({
     container: {
         width: '100%',
-        padding: 8,
+        paddingTop: 8,
+        paddingBottom: 16,
         paddingRight: 0,
         flexDirection: 'row',
         alignItems: 'flex-start',
@@ -41,6 +56,9 @@ const styles = StyleSheet.create({
     closeIcon: {
         width: 16,
     },
+    branding: {
+        textDecorationLine: 'underline',
+    },
 });
 
 export default SurveyHeading;
diff --git a/src/survey/survey-wrapper.tsx b/src/survey/survey-wrapper.tsx
@@ -10,7 +10,9 @@ interface SurveyComponentProps {
         data: any,
     ) => void;
     survey?: SurveyType;
+    companyPlan: string;
 }
+
 const BASE_SURVEY_STATE = {
     survey: undefined,
     answers: {},
@@ -20,6 +22,7 @@ const BASE_SURVEY_STATE = {
 
 const SurveyWrapper: React.FC<SurveyComponentProps> = ({
     survey,
+    companyPlan,
     logSurveyAction,
 }) => {
     const [currentSurveyState, setCurrentSurveyState] = useState<{
@@ -146,6 +149,7 @@ const SurveyWrapper: React.FC<SurveyComponentProps> = ({
                     isVisible={currentSurveyState.isVisible}
                     survey={currentSurveyState.survey}
                     answers={currentSurveyState.answers}
+                    companyPlan={companyPlan}
                     onComplete={onSurveyComplete}
                     onAbortSurvey={abortSurvey}
                     onAnswer={saveAnswer}

diff --git a/src/survey/survey.tsx b/src/survey/survey.tsx
@@ -18,6 +18,7 @@ interface Props {
     survey?: SurveyType;
     isVisible?: boolean;
     answers: { [key: string]: any };
+    companyPlan: string;
     onComplete: () => void;
     onAbortSurvey: () => void;
     onAnswer: (slideId: string, answer: any) => void;
@@ -259,6 +260,7 @@ const Survey = (props: Props) => {
                 <SurveyHeading
                     color={survey?.theme.title_color}
                     onClose={onAbortSurvey}
+                    companyPlan={props.companyPlan}
                 />
             </View>