feat: Enrollment text improvements, and reset config update (#597)

AtB-AS · Oct 27, 2020 · 4d34694 · 4d34694
1 parent a58c6c1
commit 4d34694
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 28 deletions.
diff --git a/src/RemoteConfigContext.tsx b/src/RemoteConfigContext.tsx
@@ -34,6 +34,7 @@ const RemoteConfigContextProvider: React.FC = ({children}) => {
   }, []);
 
   async function refresh() {
+    await remoteConfig().reset();
     await remoteConfig().fetchAndActivate();
     const currentConfig = await getConfig();
     setConfig(currentConfig);

diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -5,6 +5,7 @@ import {
   StyleProp,
   ViewStyle,
   TouchableOpacity,
+  TextStyle,
 } from 'react-native';
 import React from 'react';
 import {StyleSheet, Theme} from '../../theme';
@@ -13,6 +14,7 @@ type ButtonProps = {
   onPress(): void;
   mode?: 'primary' | 'destructive' | 'secondary';
   textContainerStyle?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
   IconComponent?: React.ElementType;
   text: string;
 } & TouchableOpacityProperties;
@@ -24,6 +26,7 @@ const Button: React.FC<ButtonProps> = ({
   disabled,
   style,
   textContainerStyle,
+  textStyle,
   ...props
 }) => {
   const css = useButtonStyle();
@@ -50,7 +53,7 @@ const Button: React.FC<ButtonProps> = ({
           </View>
         )}
         <View style={[css.textContainer, textContainerStyle]}>
-          <Text style={styleText}>{text}</Text>
+          <Text style={[styleText, textStyle]}>{text}</Text>
         </View>
       </TouchableOpacity>
     </View>

diff --git a/src/screens/Ticketing/Splash/InviteModal.tsx b/src/screens/Ticketing/Splash/InviteModal.tsx
@@ -65,10 +65,12 @@ export default forwardRef<Modalize, Props>(function InviteModal(
             <ActivityIndicator style={styles.loading} />
           ) : (
             <>
-              <Text style={styles.title}>Lukket beta for billettkjøp</Text>
+              <Text style={styles.title}>
+                Registrer deg som testpilot for billettkjøp
+              </Text>
               <Text style={styles.text}>
-                Her kan du sende inn invitasjonskode du har fått tilsendt fra
-                AtB for å melde deg på beta for billettkjøp.
+                Send oss invitasjonskoden din og bli først ute med å teste
+                billettkjøp direkte fra reiseappen.
               </Text>
               <Input
                 label="Kode"
@@ -79,7 +81,7 @@ export default forwardRef<Modalize, Props>(function InviteModal(
               {hasError && (
                 <MessageBox
                   type="warning"
-                  message="Koden du prøvde å bruke er enten ugyldig eller utgått."
+                  message="Du har sendt en ugyldig invitasjonskode. Prøv igjen, eller kontakt oss i appchat dersom den ikke fungerer."
                   containerStyle={styles.messageBox}
                 />
               )}

diff --git a/src/screens/Ticketing/Splash/index.tsx b/src/screens/Ticketing/Splash/index.tsx
@@ -5,12 +5,13 @@ import Header from '../../../ScreenHeader';
 import useChatIcon from '../../../chat/use-chat-icon';
 import colors from '../../../theme/colors';
 import {ShinyTicketBanner} from '../../../assets/svg/illustrations';
-import {StyleSheet} from '../../../theme';
+import {StyleSheet, useStyle} from '../../../theme';
 import LogoOutline from '../../../ScreenHeader/LogoOutline';
 import {useNavigateHome} from '../../../utils/navigation';
 import InviteModal from './InviteModal';
 import {Modalize} from 'react-native-modalize';
 import {useRemoteConfig} from '../../../RemoteConfigContext';
+import Button from '../../../components/button';
 
 function openOtherTicketingApp() {
   const url =
@@ -23,6 +24,7 @@ function openOtherTicketingApp() {
 }
 
 export default function Splash() {
+  const styles = useStyles();
   const {refresh} = useRemoteConfig();
   const chatIcon = useChatIcon();
   const {width: windowWidth} = useWindowDimensions();
@@ -44,6 +46,12 @@ export default function Splash() {
           accessibilityLabel: 'Gå til startskjerm',
         }}
       />
+      <View style={styles.bannerContainer}>
+        <ShinyTicketBanner
+          width={windowWidth}
+          height={windowWidth / 2}
+        ></ShinyTicketBanner>
+      </View>
       <View style={styles.textContainer}>
         <Text style={[styles.text, styles.bold]}>
           Billettkjøp i app kommer snart!
@@ -57,41 +65,46 @@ export default function Splash() {
             AtB Mobillett
           </Text>
         </Text>
-        <Text style={styles.text}>
-          Hvis du har en kode for å melde deg inn i beta for billettkjøp -{' '}
-          <Text
+        <View style={styles.buttonContainer}>
+          <Button
             onPress={() => modalRef.current?.open()}
-            style={styles.underline}
-          >
-            trykk her
-          </Text>
-        </Text>
-      </View>
-      <View style={styles.bannerContainer}>
-        <ShinyTicketBanner
-          width={windowWidth}
-          height={windowWidth / 2}
-        ></ShinyTicketBanner>
+            text="Jeg har kode til beta for billettkjøp"
+            mode="secondary"
+            style={styles.button}
+            textStyle={styles.buttonText}
+          />
+        </View>
       </View>
       <InviteModal ref={modalRef} onEnrolled={onEnrolled} />
     </SafeAreaView>
   );
 }
 
-const styles = StyleSheet.create({
+const useStyles = StyleSheet.createThemeHook((theme) => ({
   container: {flex: 1, backgroundColor: colors.secondary.cyan},
   textContainer: {
-    paddingHorizontal: 20,
-    paddingVertical: 40,
+    paddingHorizontal: theme.spacings.large,
+    paddingVertical: theme.spacings.xLarge,
     alignItems: 'center',
+    flex: 1,
+  },
+  text: {
+    fontSize: theme.text.sizes.body,
+    lineHeight: 20,
+    textAlign: 'center',
+    marginBottom: theme.spacings.large,
   },
-  text: {fontSize: 16, lineHeight: 20, textAlign: 'center', marginBottom: 20},
   bold: {fontWeight: 'bold'},
   bannerContainer: {
     position: 'absolute',
-    bottom: 20,
-    left: 0,
-    right: 0,
+    bottom: theme.spacings.large,
   },
   underline: {textDecorationLine: 'underline'},
-});
+  buttonContainer: {
+    position: 'absolute',
+    bottom: theme.spacings.medium,
+    width: '100%',
+  },
+  button: {backgroundColor: colors.secondary.blue},
+  buttonText: {color: colors.general.white},
+}));