Skip to content

Commit

Permalink
feat: adding explicit accept TC steps in the onboarding flow
Browse files Browse the repository at this point in the history
  • Loading branch information
Nicolas Burtey committed Apr 24, 2024
1 parent b4b40d0 commit f2e3f67
Show file tree
Hide file tree
Showing 15 changed files with 235 additions and 59 deletions.
30 changes: 17 additions & 13 deletions .storybook/storybook.requires.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
/* do not change this file, it is auto generated by storybook. */
import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"
import "@storybook/addon-ondevice-actions/register"
import "@storybook/addon-ondevice-backgrounds/register"
import "@storybook/addon-ondevice-controls/register"
import "@storybook/addon-ondevice-knobs/register"
import "@storybook/addon-ondevice-notes/register"

import {
configure,
addDecorator,
addParameters,
addArgsEnhancer,
clearDecorators,
} from "@storybook/react-native"
} from "@storybook/react-native";

global.STORIES = [
{
Expand All @@ -21,10 +16,18 @@ global.STORIES = [
importPathMatcher:
"^\\.[\\\\/](?:app(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx)?)$",
},
]
];

import "@storybook/addon-ondevice-notes/register";
import "@storybook/addon-ondevice-controls/register";
import "@storybook/addon-ondevice-knobs/register";
import "@storybook/addon-ondevice-backgrounds/register";
import "@storybook/addon-ondevice-actions/register";

import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs";

try {
argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer))
argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
} catch {}

const getStories = () => {
Expand Down Expand Up @@ -61,10 +64,11 @@ const getStories = () => {
"./app/rne-theme/colors.stories.tsx": require("../app/rne-theme/colors.stories.tsx"),
"./app/rne-theme/text.stories.tsx": require("../app/rne-theme/text.stories.tsx"),
"./app/rne-theme/theme.stories.tsx": require("../app/rne-theme/theme.stories.tsx"),
"./app/screens/accept-t-and-c/accept-t-and-c.stories.tsx": require("../app/screens/accept-t-and-c/accept-t-and-c.stories.tsx"),
"./app/screens/authentication-screen/authentication-check-screen.stories.tsx": require("../app/screens/authentication-screen/authentication-check-screen.stories.tsx"),
"./app/screens/authentication-screen/authentication-screen.stories.tsx": require("../app/screens/authentication-screen/authentication-screen.stories.tsx"),
"./app/screens/authentication-screen/pin-screen.stories.tsx": require("../app/screens/authentication-screen/pin-screen.stories.tsx"),
"./app/screens/conversation/conversation.stories.tsx": require("../app/screens/chatbot-screen/chatbot.stories.tsx"),
"./app/screens/chatbot-screen/chatbot.stories.tsx": require("../app/screens/chatbot-screen/chatbot.stories.tsx"),
"./app/screens/conversion-flow/conversion-success-screen.stories.tsx": require("../app/screens/conversion-flow/conversion-success-screen.stories.tsx"),
"./app/screens/earns-map-screen/earns-map-screen.stories.tsx": require("../app/screens/earns-map-screen/earns-map-screen.stories.tsx"),
"./app/screens/earns-screen/earns-quiz.stories.tsx": require("../app/screens/earns-screen/earns-quiz.stories.tsx"),
Expand Down Expand Up @@ -102,7 +106,7 @@ const getStories = () => {
"./app/screens/settings-screen/settings.stories.tsx": require("../app/screens/settings-screen/settings.stories.tsx"),
"./app/screens/settings-screen/theme-screen.stories.tsx": require("../app/screens/settings-screen/theme-screen.stories.tsx"),
"./app/screens/transaction-detail-screen/transaction-detail-screen.stories.tsx": require("../app/screens/transaction-detail-screen/transaction-detail-screen.stories.tsx"),
}
}
};
};

configure(getStories, module, false)
configure(getStories, module, false);
2 changes: 1 addition & 1 deletion .storybook/storybook.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ RNBootSplash.hide({ fade: true })
const StorybookUI = getStorybookUI({
enableWebsockets: true,
onDeviceUI: true,
initialSelection: { kind: "ChatBot Screen", name: "Default" },
initialSelection: { kind: "Failed device account modal", name: "Default" },
shouldPersistSelection: false,
})

Expand Down
7 changes: 7 additions & 0 deletions app/i18n/en/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@ const en: BaseTranslation = {
howToUseYourCashRegisterExplainer:
"Allow people to collect payments via the Cash Register link, without accessing your wallet.\n\nThey can create invoices and payments will be sent directly to your {bankName: string} Wallet.",
},
AcceptTermsAndConditionsScreen: {
title: "Terms and Conditions",
accept: "Accept",
termsAndConditions: "View terms and Conditions",
prohibitedCountry: "View prohibited countries",
text: "By clicking 'Accept', you agree to our Terms And Conditions. You also agree that you are not a resident or citizen from one of the prohibited countries",
},
SetAccountModal: {
title: "Set default account",
description:
Expand Down
44 changes: 44 additions & 0 deletions app/i18n/i18n-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,28 @@ type RootTranslation = {
*/
howToUseYourCashRegisterExplainer: RequiredParams<'bankName'>
}
AcceptTermsAndConditionsScreen: {
/**
* T​e​r​m​s​ ​a​n​d​ ​C​o​n​d​i​t​i​o​n​s
*/
title: string
/**
* A​c​c​e​p​t
*/
accept: string
/**
* V​i​e​w​ ​t​e​r​m​s​ ​a​n​d​ ​C​o​n​d​i​t​i​o​n​s
*/
termsAndConditions: string
/**
* V​i​e​w​ ​p​r​o​h​i​b​i​t​e​d​ ​c​o​u​n​t​r​i​e​s
*/
prohibitedCountry: string
/**
* B​y​ ​c​l​i​c​k​i​n​g​ ​'​A​c​c​e​p​t​'​,​ ​y​o​u​ ​a​g​r​e​e​ ​t​o​ ​o​u​r​ ​T​e​r​m​s​ ​A​n​d​ ​C​o​n​d​i​t​i​o​n​s​.​ ​Y​o​u​ ​a​l​s​o​ ​a​g​r​e​e​ ​t​h​a​t​ ​y​o​u​ ​a​r​e​ ​n​o​t​ ​a​ ​r​e​s​i​d​e​n​t​ ​o​r​ ​c​i​t​i​z​e​n​ ​f​r​o​m​ ​o​n​e​ ​o​f​ ​t​h​e​ ​p​r​o​h​i​b​i​t​e​d​ ​c​o​u​n​t​r​i​e​s
*/
text: string
}
SetAccountModal: {
/**
* S​e​t​ ​d​e​f​a​u​l​t​ ​a​c​c​o​u​n​t
Expand Down Expand Up @@ -9184,6 +9206,28 @@ export type TranslationFunctions = {
*/
howToUseYourCashRegisterExplainer: (arg: { bankName: string }) => LocalizedString
}
AcceptTermsAndConditionsScreen: {
/**
* Terms and Conditions
*/
title: () => LocalizedString
/**
* Accept
*/
accept: () => LocalizedString
/**
* View terms and Conditions
*/
termsAndConditions: () => LocalizedString
/**
* View prohibited countries
*/
prohibitedCountry: () => LocalizedString
/**
* By clicking 'Accept', you agree to our Terms And Conditions. You also agree that you are not a resident or citizen from one of the prohibited countries
*/
text: () => LocalizedString
}
SetAccountModal: {
/**
* Set default account
Expand Down
7 changes: 7 additions & 0 deletions app/i18n/raw-i18n/source/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,13 @@
"howToUseYourPaycodeExplainer": "You can print your Paycode (technically, this is an lnurl-pay address) and display it in your business to receive payments. Individuals can pay you by scanning it with a Lightning-enabled wallet.\n\nHowever, be aware that some wallets can’t scan a Paycode such as:",
"howToUseYourCashRegisterExplainer": "Allow people to collect payments via the Cash Register link, without accessing your wallet.\n\nThey can create invoices and payments will be sent directly to your {bankName: string} Wallet."
},
"AcceptTermsAndConditionsScreen": {
"title": "Terms and Conditions",
"accept": "Accept",
"termsAndConditions": "View terms and Conditions",
"prohibitedCountry": "View prohibited countries",
"text": "By clicking 'Accept', you agree to our Terms And Conditions. You also agree that you are not a resident or citizen from one of the prohibited countries"
},
"SetAccountModal": {
"title": "Set default account",
"description": "This account will be initially selected for sending and receiving payments. It can be changed at any time.",
Expand Down
8 changes: 8 additions & 0 deletions app/navigation/root-navigator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ import {
PrimaryStackParamList,
RootStackParamList,
} from "./stack-param-lists"
import { AcceptTermsAndConditionsScreen } from "@app/screens/accept-t-and-c"

const RootNavigator = createStackNavigator<RootStackParamList>()

Expand Down Expand Up @@ -347,6 +348,13 @@ export const RootStack = () => {
title: LL.common.transactionLimits(),
}}
/>
<RootNavigator.Screen
name="acceptTermsAndConditions"
component={AcceptTermsAndConditionsScreen}
options={{
title: LL.AcceptTermsAndConditionsScreen.title(),
}}
/>
<RootNavigator.Screen
name="emailRegistrationInitiate"
component={EmailRegistrationInitiateScreen}
Expand Down
3 changes: 3 additions & 0 deletions app/navigation/stack-param-lists.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export type RootStackParamList = {
accountScreen: undefined
notificationSettingsScreen: undefined
transactionLimitsScreen: undefined
acceptTermsAndConditions: NewAccountFlowParamsList
emailRegistrationInitiate: undefined
emailRegistrationValidate: { email: string; emailRegistrationId: string }
emailLoginInitiate: undefined
Expand Down Expand Up @@ -130,3 +131,5 @@ export type PrimaryStackParamList = {
Earn: undefined
Web: undefined
}

export type NewAccountFlowParamsList = { flow: "phone" | "trial" }
12 changes: 12 additions & 0 deletions app/screens/accept-t-and-c/accept-t-and-c.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react"

import { StoryScreen } from "../../../.storybook/views"
import { AcceptTermsAndConditionsScreen } from "./accept-t-and-c"

export default {
title: "AcceptTAndC",
component: AcceptTermsAndConditionsScreen,
decorators: [(Story) => <StoryScreen>{Story()}</StoryScreen>],
}

export const Default = () => <AcceptTermsAndConditionsScreen />
123 changes: 123 additions & 0 deletions app/screens/accept-t-and-c/accept-t-and-c.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import * as React from "react"
import { View } from "react-native"

import { GaloyPrimaryButton } from "@app/components/atomic/galoy-primary-button"
import { useI18nContext } from "@app/i18n/i18n-react"
import { RootStackParamList } from "@app/navigation/stack-param-lists"
import { RouteProp, useNavigation, useRoute } from "@react-navigation/native"
import { StackNavigationProp } from "@react-navigation/stack"
import { Text, makeStyles } from "@rneui/themed"

import { GaloySecondaryButton } from "@app/components/atomic/galoy-secondary-button"
import InAppBrowser from "react-native-inappbrowser-reborn"
import { Screen } from "../../components/screen"
import { PhoneLoginInitiateType } from "../phone-auth-screen"
import { DeviceAccountModal } from "../get-started-screen/device-account-modal"

export const AcceptTermsAndConditionsScreen: React.FC = () => {
const styles = useStyles()

const navigation =
useNavigation<StackNavigationProp<RootStackParamList, "acceptTermsAndConditions">>()

const { LL } = useI18nContext()

const route = useRoute<RouteProp<RootStackParamList, "acceptTermsAndConditions">>()
const { flow } = route.params || { flow: "phone" }

const [confirmationModalVisible, setConfirmationModalVisible] = React.useState(false)
const openConfirmationModal = () => setConfirmationModalVisible(true)
const closeConfirmationModal = () => {
setConfirmationModalVisible(false)
}

const action = () => {
if (flow === "phone") {
navigation.navigate("phoneFlow", {
screen: "phoneLoginInitiate",
params: {
type: PhoneLoginInitiateType.CreateAccount,
},
})
} else {
openConfirmationModal()
}
}

return (
<Screen
preset="scroll"
style={styles.screenStyle}
keyboardOffset="navigationHeader"
keyboardShouldPersistTaps="handled"
>
<DeviceAccountModal
isVisible={confirmationModalVisible}
closeModal={closeConfirmationModal}
/>
<View style={styles.viewWrapper}>
<View style={styles.textContainer}>
<Text type={"p1"}>{LL.AcceptTermsAndConditionsScreen.text()}</Text>
</View>

<View style={styles.textContainer}>
<GaloySecondaryButton
title={LL.AcceptTermsAndConditionsScreen.termsAndConditions()}
onPress={() => InAppBrowser.open("https://www.blink.sv/en/terms-conditions")}
/>
</View>
<View style={styles.textContainer}>
<GaloySecondaryButton
title={LL.AcceptTermsAndConditionsScreen.prohibitedCountry()}
onPress={() =>
InAppBrowser.open(
"https://faq.blink.sv/creating-a-blink-account/which-countries-are-unable-to-download-and-activate-blink",
)
}
/>
</View>

<View style={styles.buttonsContainer}>
<GaloyPrimaryButton
title={LL.AcceptTermsAndConditionsScreen.accept()}
onPress={action}
/>
</View>
</View>
</Screen>
)
}

const useStyles = makeStyles(({ colors }) => ({
screenStyle: {
padding: 20,
flexGrow: 1,
},
buttonsContainer: {
flex: 1,
justifyContent: "flex-end",
},

inputContainer: {
marginBottom: 20,
flexDirection: "row",
alignItems: "stretch",
minHeight: 48,
},
textContainer: {
marginBottom: 20,
},
viewWrapper: { flex: 1 },

inputContainerStyle: {
flex: 1,
borderWidth: 2,
borderBottomWidth: 2,
paddingHorizontal: 10,
borderColor: colors.primary5,
borderRadius: 8,
},
errorContainer: {
marginBottom: 20,
},
}))
1 change: 1 addition & 0 deletions app/screens/accept-t-and-c/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./accept-t-and-c"
6 changes: 1 addition & 5 deletions app/screens/earns-screen/earns-section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { makeStyles, useTheme } from "@rneui/themed"
import { Screen } from "../../components/screen"
import type { RootStackParamList } from "../../navigation/stack-param-lists"
import { useQuizServer } from "../earns-map-screen/use-quiz-server"
import { PhoneLoginInitiateType } from "../phone-auth-screen"
import { SVGs } from "./earn-svg-factory"
import {
augmentCardWithGqlData,
Expand Down Expand Up @@ -219,10 +218,7 @@ export const EarnSection = ({ route }: Props) => {
{
text: "OK",
onPress: () =>
navigation.navigate("phoneFlow", {
screen: "phoneLoginInitiate",
params: { type: PhoneLoginInitiateType.CreateAccount },
}),
navigation.navigate("acceptTermsAndConditions", { flow: "phone" }),
},
])
return
Expand Down
Loading

0 comments on commit f2e3f67

Please sign in to comment.