-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [#175708197] Report an issue about credit card onboarding (#2378)
* [#175708197] list of credit card onboarding attempts * [#175708197] add credit card attempts list, detail, instabug report * [#175708197] fix * [#175708197] fixes * [#175708197] add comment * [#175708197] fix * [#175708197] update texts * Update ts/utils/profile.ts Co-authored-by: fabriziofff <[email protected]>
- Loading branch information
1 parent
f68b937
commit c19cf41
Showing
19 changed files
with
546 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Access the [payment methods added status](ioit://CREDIT_CARD_ONBOARDING_ATTEMPTS_SCREEN) page to select the failed operations from the list and contact support. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| If you have had problems during a payment and do not know if it has been successful, or why it has failed, check the [status of your payments](ioit://PAYMENTS_HISTORY_SCREEN). From the list you can select the failed operations and contact support. | ||
| Access the [status of your payments](ioit://PAYMENTS_HISTORY_SCREEN) page to select the failed operations from the list and contact support. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Accedi alla pagina [stato aggiunta metodi di pagamento](ioit://CREDIT_CARD_ONBOARDING_ATTEMPTS_SCREEN) per selezionare dalla lista le operazioni fallite e contattare l’assistenza. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| Se hai avuto problemi durante un pagamento e non sai se sia andato a buon fine, o perché sia fallito, controlla lo [stato dei tuoi pagamenti](ioit://PAYMENTS_HISTORY_SCREEN). Dalla lista potrai selezionare le operazioni che risultano fallite e contattare l'assistenza. | ||
| Accedi alla pagina [stato dei tuoi pagamenti](ioit://PAYMENTS_HISTORY_SCREEN) per selezionare dalla lista le operazioni fallite e contattare l’assistenza. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
158 changes: 158 additions & 0 deletions
158
ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| import { Content, Text, View } from "native-base"; | ||
| import * as React from "react"; | ||
| import { FlatList, ListRenderItemInfo, StyleSheet } from "react-native"; | ||
| import variables from "../../../theme/variables"; | ||
| import I18n from "../../../i18n"; | ||
| import ItemSeparatorComponent from "../../ItemSeparatorComponent"; | ||
| import { EdgeBorderComponent } from "../../screens/EdgeBorderComponent"; | ||
| import { formatDateAsLocal } from "../../../utils/dates"; | ||
| import { | ||
| CreditCardInsertion, | ||
| CreditCardInsertionState | ||
| } from "../../../store/reducers/wallet/creditCard"; | ||
| import TouchableDefaultOpacity from "../../TouchableDefaultOpacity"; | ||
| import { BadgeComponent } from "../../screens/BadgeComponent"; | ||
| import IconFont from "../../ui/IconFont"; | ||
| import customVariables from "../../../theme/variables"; | ||
| import { Label } from "../../core/typography/Label"; | ||
| import { IOStyles } from "../../core/variables/IOStyles"; | ||
|
|
||
| type Props = Readonly<{ | ||
| title: string; | ||
| creditCardAttempts: CreditCardInsertionState; | ||
| onAttemptPress: (attempt: CreditCardInsertion) => void; | ||
| ListEmptyComponent: React.ReactNode; | ||
| }>; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| whiteContent: { | ||
| backgroundColor: variables.colorWhite, | ||
| flex: 1 | ||
| }, | ||
| subHeaderContent: { | ||
| flexDirection: "row", | ||
| alignItems: "baseline", | ||
| justifyContent: "space-between" | ||
| } | ||
| }); | ||
|
|
||
| const itemStyles = StyleSheet.create({ | ||
| verticalPad: { | ||
| paddingVertical: customVariables.spacerHeight | ||
| }, | ||
| spaced: { | ||
| justifyContent: "flex-start", | ||
| flexDirection: "row", | ||
| alignItems: "center" | ||
| }, | ||
| text11: { | ||
| paddingLeft: 8 | ||
| }, | ||
| icon: { | ||
| width: 64, | ||
| alignItems: "flex-end", | ||
| alignContent: "center", | ||
| alignSelf: "center", | ||
| justifyContent: "center" | ||
| } | ||
| }); | ||
|
|
||
| const FOUR_UNICODE_CIRCLES = "●".repeat(4); | ||
| const ICON_WIDTH = 24; | ||
| const labelColor = "bluegrey"; | ||
| export const getPanDescription = (attempt: CreditCardInsertion) => | ||
| `${FOUR_UNICODE_CIRCLES} ${attempt.blurredPan}\n ${I18n.t( | ||
| "cardComponent.validUntil" | ||
| ).toLowerCase()} ${attempt.expireMonth}/${attempt.expireYear}`; | ||
|
|
||
| const getAttemptData = (attempt: CreditCardInsertion) => { | ||
| const conditionalData = attempt.onboardingComplete | ||
| ? { | ||
| color: "green", | ||
| header: I18n.t("wallet.creditCard.onboardingAttempts.success") | ||
| } | ||
| : { | ||
| color: "red", | ||
| header: I18n.t("wallet.creditCard.onboardingAttempts.failure") | ||
| }; | ||
| const startDate = new Date(attempt.startDate); | ||
| const when = `${formatDateAsLocal( | ||
| startDate, | ||
| true, | ||
| true | ||
| )} - ${startDate.toLocaleTimeString()}`; | ||
| return { | ||
| panAndExpiringDate: getPanDescription(attempt), | ||
| when, | ||
| ...conditionalData | ||
| }; | ||
| }; | ||
|
|
||
| /** | ||
| * This component shows a list with the last credit card onboarding attempts | ||
| */ | ||
| export const CreditCardAttemptsList: React.FC<Props> = (props: Props) => { | ||
| const { ListEmptyComponent, creditCardAttempts } = props; | ||
| const renderCreditCardAttempt = ( | ||
| info: ListRenderItemInfo<CreditCardInsertion> | ||
| ) => { | ||
| const attemptData = getAttemptData(info.item); | ||
| return ( | ||
| <View style={IOStyles.flex}> | ||
| <TouchableDefaultOpacity | ||
| onPress={() => props.onAttemptPress(info.item)} | ||
| style={itemStyles.verticalPad} | ||
| > | ||
| <View style={[IOStyles.flex, IOStyles.row]}> | ||
| <View style={IOStyles.flex}> | ||
| <View style={itemStyles.spaced}> | ||
| <BadgeComponent color={attemptData.color} /> | ||
| <Label color={labelColor} style={itemStyles.text11}> | ||
| {attemptData.header} | ||
| </Label> | ||
| </View> | ||
| <View small={true} /> | ||
| <Label color={labelColor} weight={"Regular"}> | ||
| {attemptData.panAndExpiringDate} | ||
| </Label> | ||
| <Label color={labelColor} weight={"Regular"}> | ||
| {attemptData.when} | ||
| </Label> | ||
| </View> | ||
| <View style={itemStyles.icon}> | ||
| <IconFont | ||
| name={"io-right"} | ||
| size={ICON_WIDTH} | ||
| color={customVariables.contentPrimaryBackground} | ||
| /> | ||
| </View> | ||
| </View> | ||
| </TouchableDefaultOpacity> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <Content style={styles.whiteContent}> | ||
| <View> | ||
| <View style={styles.subHeaderContent}> | ||
| <Text>{props.title}</Text> | ||
| </View> | ||
| </View> | ||
|
|
||
| <FlatList | ||
| scrollEnabled={false} | ||
| data={creditCardAttempts} | ||
| renderItem={renderCreditCardAttempt} | ||
| ListEmptyComponent={ListEmptyComponent} | ||
| ItemSeparatorComponent={() => ( | ||
| <ItemSeparatorComponent noPadded={true} /> | ||
| )} | ||
| ListFooterComponent={ | ||
| creditCardAttempts.length > 0 && <EdgeBorderComponent /> | ||
| } | ||
| keyExtractor={c => c.hashedPan} | ||
| /> | ||
| </Content> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.