Skip to content

Commit

Permalink
feat: [IOCOM-1133,IOCOM-1235,IOCOM-1372] Push Notification Opt In scr…
Browse files Browse the repository at this point in the history
…een, new DS (#5734)

⚠️ This PR depends on #5732 ⚠️
⚠️ This PR depends on
[io-app-design-system#253](pagopa/io-app-design-system#253)
⚠️
⚠️ This PR depends on
[io-app-design-system#256](pagopa/io-app-design-system#256)
⚠️

## Short description
This PR aligns the Push Notifications Opt In screen and the profile push
notification settings to the new DS

|Both on<br/>upper part|Both on<br/>scrolled down|Bottom sheet|
|-|-|-|

|![On1](https://github.com/pagopa/io-app/assets/5150343/66a756b4-9706-4cda-a20a-b5ebf92e6f1d)|![Simulator
Screenshot - iPhone 15 - 2024-05-10 at 12 26
26](https://github.com/pagopa/io-app/assets/5150343/6e6c0ed5-c44c-4e81-ae9c-477ff6e22658)|![OnBS](https://github.com/pagopa/io-app/assets/5150343/9b079428-5262-4f79-b386-bc7e0b6af892)|

|Preview Off<br/>Reminder On|Preview On<br/>Reminder Off|Both Off|
|-|-|-|

|![Pre](https://github.com/pagopa/io-app/assets/5150343/9955c886-ecf5-4401-8e86-7c11a6c7c486)|![Rem](https://github.com/pagopa/io-app/assets/5150343/ea87c7b0-3ca9-435d-993d-2a2994ff9741)|![Off](https://github.com/pagopa/io-app/assets/5150343/0de87ad0-824a-4eca-8251-67ed8ba58ef1)|

|Profile<br/>Both on|Profile<br/>Bottom sheet|
|-|-|

|![ProfileOnPreOnRem](https://github.com/pagopa/io-app/assets/5150343/4bd1d77a-985f-4d8b-89b0-771cedf5ae8c)|![ProfileBS](https://github.com/pagopa/io-app/assets/5150343/a4ab71eb-e5b1-493a-9e4c-d487d1c0e0ec)|

|Profile<br/>On Off|Profile<br/>Off On|Profile<br/>Off Off|
|-|-|-|

|![ProfileOnPreOffRem](https://github.com/pagopa/io-app/assets/5150343/f8fb2554-e94c-46c9-90da-198195d24f28)|![ProfileOffPreOnRem](https://github.com/pagopa/io-app/assets/5150343/4dc52f4a-8165-4495-90cd-771d1009ea63)|![ProfileOffPreOffRem](https://github.com/pagopa/io-app/assets/5150343/494f7064-d6e7-46a2-92c8-5782c161beda)|

## List of changes proposed in this pull request
- All related onboarding screens have been ported to the new DS
- A lot of test snapshot have been updated due to a change in margins on
the DS library

## How to test
Using the io-dev-api-server, configure the profile in order to have both
`reminder_status` and `push_notifications_content_type` set to
undefined. Perform a login and the opt-in screen should appear. Check
that both values are properly set after tapping the "Continue" button.
For the profile screen, navigate to it and change switches' values
  • Loading branch information
Vangaorth committed May 23, 2024
1 parent ca2de78 commit 45d20bc
Show file tree
Hide file tree
Showing 41 changed files with 210,600 additions and 1,081 deletions.
2 changes: 0 additions & 2 deletions .env.local
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,6 @@ PREMIUM_MESSAGES_OPT_IN_ENABLED=YES
CDC_ENABLED = YES
# Scan additional barcodes (E.g. Data Matrix) in the payment section
SCAN_ADDITIONAL_BARCODES_ENABLED = YES
# Opt-in for reminder push notifications
REMINDERS_OPT_IN_ENABLED=YES
# FCI (Firma con IO) feature
FCI_ENABLED=YES
# IDPay
Expand Down
2 changes: 0 additions & 2 deletions .env.production
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,6 @@ PREMIUM_MESSAGES_OPT_IN_ENABLED=YES
CDC_ENABLED = YES
# Scan additional barcodes (E.g. Data Matrix) in the payment section
SCAN_ADDITIONAL_BARCODES_ENABLED = YES
# Opt-in for reminder push notifications
REMINDERS_OPT_IN_ENABLED=YES
# FCI (Firma con IO) feature
FCI_ENABLED=YES
# IDPay
Expand Down
Binary file removed img/onboarding/notification_blue.png
Binary file not shown.
Binary file removed img/onboarding/notification_blue@2x.png
Binary file not shown.
Binary file removed img/onboarding/notification_blue@3x.png
Binary file not shown.
Binary file modified img/onboarding/notification_white.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/onboarding/notification_white@2x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/onboarding/notification_white@3x.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 8 additions & 8 deletions locales/it/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -411,7 +411,7 @@ profile:
additionalInformation:
description: "Per maggiori informazioni, leggi "
cta: "l’Informativa Privacy e i Termini e Condizioni d’uso"
profileSettings: "Potrai modificare questa scelta in ogni momento andando su Profilo > Preferenze"
profileSettings: "Puoi modificare la tua scelta in ogni momento da Profilo > Preferenze"
cta:
shareData: "Condividi"
dontShareData: "Non condividere dati"
Expand Down Expand Up @@ -522,19 +522,19 @@ profile:
contextualHelpContent: !include profile/profile_preferences_notifications.md
header: Notifiche push
title: Personalizza le notifiche
subtitle: Scegli come ricevere aggiornamenti sui messaggi e promemoria.
subtitle: Scegli se mostrare le anteprime e ricevere promemoria, come in questo esempio.
titleExistingUser: Personalizza le notifiche
subtitleExistingUser: Ora puoi vedere subito chi ti ha scritto o ricevere promemoria da messaggi importanti, come in questo esempio.
reminders:
title: Consenti i promemoria
title: Consenti promemoria
description: Su richiesta dell'ente, ricevi notifiche push in prossimità di scadenze o quando hai dei messaggi non letti
preview:
title: Mostra un'anteprima
description: Includi nella notifica push il mittente e l’oggetto del messaggio
link: Più info
title: Mostra anteprime
description: Includi nella notifica push il mittente e l’oggetto del messaggio.
link: Scopri di più
bottomSheet:
title: Mostra un'anteprima
content: Se l’opzione è attiva le notifiche push mostrano il mittente e l’oggetto dei messaggi, anche quando lo schermo è bloccato. Queste informazioni vengono trattate dal gestore del tuo sistema operativo e da app di terze parti eventualmente in esecuzione.
title: Mostra anteprime
content: "Una notifica push è un messaggio che ricevi sul tuo dispositivo anche quando non usi l'app. Se attivi questa opzione, riceverai notifiche push che ti mostreranno il mittente e l'oggetto del messaggio.\nQueste informazioni sono gestite dal sistema operativo del tuo dispositivo e dalle eventuali app di terze parti che stai utilizzando."
cta: Ho capito!
error: Si è verificato un errore con la tua richiesta
userMetadata:
Expand Down
2 changes: 1 addition & 1 deletion ts/components/ui/RNavScreenWithLargeHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export const RNavScreenWithLargeHeader = ({

{description && (
<ContentWrapper>
<VSpacer size={4} />
<VSpacer size={16} />
<Body color="grey-700">{description}</Body>
</ContentWrapper>
)}
Expand Down
3 changes: 0 additions & 3 deletions ts/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -109,9 +109,6 @@ export const cieLoginFlowWithDevServerEnabled =
// Native Login Feature Flag
export const nativeLoginEnabled = Config.NATIVE_LOGIN_ENABLED === "YES";

// Opt-in for reminder push notifications
export const remindersOptInEnabled = Config.REMINDERS_OPT_IN_ENABLED === "YES";

export const isNewServicesEnabled = Config.NEW_SERVICES_ENABLED === "YES";

export const fetchTimeout = pipe(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,16 @@ import {
Icon,
HSpacer,
IOSpacingScale,
IOVisualCostants
Label,
IOStyles,
H6
} from "@pagopa/io-app-design-system";
import { H4 } from "../../../components/core/typography/H4";
import { H5 } from "../../../components/core/typography/H5";
import customVariables from "../../../theme/variables";
import I18n from "../../../i18n";
import { TranslationKeys } from "../../../../locales/locales";
import { IOStyles } from "../../../components/core/variables/IOStyles";

const notificationMarginVertical: IOSpacingScale = 4;
const notificationPaddingVertical: IOSpacingScale = 8;
const notificationPaddingHorizontal: IOSpacingScale = 16;
const notificationPaddingHorizontal: IOSpacingScale = 24;

const styles = StyleSheet.create({
notification: {
Expand All @@ -25,10 +23,9 @@ const styles = StyleSheet.create({
backgroundColor: IOColors.white,
borderWidth: 1,
borderColor: IOColors.bluegreyLight,
borderRadius: customVariables.borderRadiusBase,
minHeight: 72,
borderRadius: 8,
minHeight: 90,
marginVertical: notificationMarginVertical,
marginHorizontal: IOVisualCostants.appMarginDefault,
paddingVertical: notificationPaddingVertical,
paddingHorizontal: notificationPaddingHorizontal
}
Expand Down Expand Up @@ -77,15 +74,13 @@ export const NotificationPreviewSample = ({

return (
<View style={styles.notification}>
<Icon name="productIOAppBlueBg" />
<Icon color="blueIO-450" name="productIOApp" />
<HSpacer />
<View style={IOStyles.flex}>
<H4 weight="SemiBold" color="bluegreyDark">
{I18n.t(titleKey)}
</H4>
<H5 weight="Regular" color="bluegrey">
<H6 weight="SemiBold">{I18n.t(titleKey)}</H6>
<Label fontSize="small" weight="Regular">
{I18n.t(messageKey)}
</H5>
</Label>
</View>
</View>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react";
import { StyleSheet, ImageBackground } from "react-native";
import NotificationBlueBg from "../../../../img/onboarding/notification_blue.png";
import NotificationWhiteBg from "../../../../img/onboarding/notification_white.png";
import { NotificationPreviewSample } from "./NotificationPreviewSample";

Expand All @@ -14,16 +13,14 @@ const styles = StyleSheet.create({
type Props = {
previewEnabled: boolean;
remindersEnabled: boolean;
isFirstOnboarding: boolean;
};

export const NotificationsPreferencesPreview = ({
previewEnabled,
remindersEnabled,
isFirstOnboarding
remindersEnabled
}: Props) => (
<ImageBackground
source={isFirstOnboarding ? NotificationWhiteBg : NotificationBlueBg}
source={NotificationWhiteBg}
resizeMode="contain"
style={styles.container}
>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import {
Banner,
Divider,
ListItemSwitch,
VSpacer
} from "@pagopa/io-app-design-system";
import React from "react";
import I18n from "../../../i18n";
import { usePreviewMoreInfo } from "../hooks/usePreviewMoreInfo";
import { NotificationsPreferencesPreview } from "./NotificationsPreferencesPreview";

type ProfileNotificationSettingsProps = {
disablePreviewSetting: boolean;
disableRemindersSetting: boolean;
isUpdatingPreviewSetting: boolean;
isUpdatingRemindersSetting: boolean;
onPreviewValueChanged?: (value: boolean) => void;
onReminderValueChanged?: (value: boolean) => void;
previewSwitchValue: boolean;
remindersSwitchValue: boolean;
showSettingsPath: boolean;
};

export const ProfileNotificationSettings = ({
disablePreviewSetting,
disableRemindersSetting,
isUpdatingPreviewSetting,
isUpdatingRemindersSetting,
onPreviewValueChanged,
onReminderValueChanged,
previewSwitchValue,
remindersSwitchValue,
showSettingsPath
}: ProfileNotificationSettingsProps) => {
const { present, bottomSheet } = usePreviewMoreInfo();
return (
<>
<VSpacer size={24} />
<NotificationsPreferencesPreview
previewEnabled={previewSwitchValue}
remindersEnabled={remindersSwitchValue}
/>
<VSpacer size={24} />
<ListItemSwitch
label={I18n.t("profile.preferences.notifications.preview.title")}
description={I18n.t(
"profile.preferences.notifications.preview.description"
)}
action={{
label: I18n.t("profile.preferences.notifications.preview.link"),
onPress: present
}}
value={previewSwitchValue}
disabled={disablePreviewSetting}
isLoading={isUpdatingPreviewSetting}
onSwitchValueChange={onPreviewValueChanged}
switchTestID={"previewsPreferenceSwitch"}
/>
<Divider />
<ListItemSwitch
label={I18n.t("profile.preferences.notifications.reminders.title")}
description={I18n.t(
"profile.preferences.notifications.reminders.description"
)}
value={remindersSwitchValue}
disabled={disableRemindersSetting}
isLoading={isUpdatingRemindersSetting}
onSwitchValueChange={onReminderValueChanged}
switchTestID={"remindersPreferenceSwitch"}
/>
{showSettingsPath && <VSpacer size={40} />}
{showSettingsPath && (
<Banner
pictogramName="reactivate"
content={I18n.t(
"profile.main.privacy.shareData.screen.profileSettings"
)}
size="small"
color="neutral"
/>
)}
<VSpacer size={32} />
{bottomSheet}
</>
);
};
Loading

0 comments on commit 45d20bc

Please sign in to comment.