[Payment due @ZhenjaHorbach] [Personal Karma] Add NewDot toggle flow under Save The World

src/CONST/index.ts

@@ -1106,6 +1106,7 @@ const CONST = {
     BULK_UPLOAD_HELP_URL: 'https://help.expensify.com/articles/new-expensify/reports-and-expenses/Create-an-Expense#option-4-bulk-upload-receipts-desktop-only',
     ENCRYPTION_AND_SECURITY_HELP_URL: 'https://help.expensify.com/articles/new-expensify/settings/Encryption-and-Data-Security',
     PLAN_TYPES_AND_PRICING_HELP_URL: 'https://help.expensify.com/articles/new-expensify/billing-and-subscriptions/Plan-types-and-pricing',
+    PERSONAL_AND_CORPORATE_KARMA_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/expensify-billing/Personal-and-Corporate-Karma',
     COLLECT_UPGRADE_HELP_URL: 'https://help.expensify.com/Hidden/collect-upgrade',
     MERGE_ACCOUNT_HELP_URL: 'https://help.expensify.com/articles/new-expensify/settings/Merge-Accounts',
     CONNECT_A_BUSINESS_BANK_ACCOUNT_HELP_URL: 'https://help.expensify.com/articles/new-expensify/expenses-&-payments/Connect-a-Business-Bank-Account',

src/ONYXKEYS.ts

@@ -232,6 +232,9 @@ const ONYXKEYS = {
     /** Store the state of the subscription */
     NVP_PRIVATE_SUBSCRIPTION: 'nvp_private_subscription',
 
+    /** Store the state of Personal Karma donations */
+    NVP_PERSONAL_OFFSETS: 'nvp_expensify_enablePersonalOffsets',
+
     /** Store the state of the private tax-exempt */
     NVP_PRIVATE_TAX_EXEMPT: 'nvp_private_taxExempt',
 
@@ -1317,6 +1320,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.NVP_DISMISSED_REFERRAL_BANNERS]: OnyxTypes.DismissedReferralBanners;
     [ONYXKEYS.NVP_HAS_SEEN_TRACK_TRAINING]: boolean;
     [ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION]: OnyxTypes.PrivateSubscription;
+    [ONYXKEYS.NVP_PERSONAL_OFFSETS]: boolean;
     [ONYXKEYS.NVP_PRIVATE_STRIPE_CUSTOMER_ID]: OnyxTypes.StripeCustomerID;
     [ONYXKEYS.NVP_PRIVATE_BILLING_DISPUTE_PENDING]: number;
     [ONYXKEYS.NVP_PRIVATE_BILLING_STATUS]: OnyxTypes.BillingStatus;

src/components/BillingCardDetails.tsx

@@ -0,0 +1,58 @@
+import type {ReactNode} from 'react';
+import React, {useMemo} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import DateUtils from '@libs/DateUtils';
+import {getPaymentMethodDescription} from '@libs/PaymentUtils';
+import type Fund from '@src/types/onyx/Fund';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import Text from './Text';
+import Icon from './Icon';
+
+type BillingCardDetailsProps = {
+    /** The billing card data */
+    card?: Fund;
+
+    /** Optional right side content (e.g. action menu) */
+    rightComponent?: ReactNode;
+
+    /** Optional wrapper styles */
+    wrapperStyle?: StyleProp<ViewStyle>;
+};
+
+function BillingCardDetails({card, rightComponent, wrapperStyle}: BillingCardDetailsProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const {translate} = useLocalize();
+    const icons = useMemoizedLazyExpensifyIcons(['CreditCard']);
+
+    const cardMonth = useMemo(() => DateUtils.getMonthNames()[(card?.accountData?.cardMonth ?? 1) - 1], [card?.accountData?.cardMonth]);
+
+    if (!card?.accountData || isEmptyObject(card?.accountData)) {
+        return null;
+    }
+
+    return (
+        <View style={[styles.flexRow, styles.flex1, styles.gap3, wrapperStyle]}>
+            <Icon
+                src={icons.CreditCard}
+                additionalStyles={styles.subscriptionAddedCardIcon}
+                fill={theme.icon}
+                medium
+            />
+            <View style={styles.flex1}>
+                <Text style={styles.textStrong}>{getPaymentMethodDescription(card.accountType, card.accountData, translate)}</Text>
+                <Text style={styles.mutedNormalTextLabel}>
+                    {translate('subscription.cardSection.cardInfo', card.accountData.addressName ?? '', `${cardMonth} ${card.accountData.cardYear ?? ''}`, card.accountData.currency ?? '')}
+                </Text>
+            </View>
+            {rightComponent}
+        </View>
+    );
+}
+
+export default BillingCardDetails;

src/components/SectionSubtitleHTML.tsx

@@ -0,0 +1,37 @@
+import type {ComponentProps} from 'react';
+import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
+import RenderHTML from './RenderHTML';
+
+type SectionSubtitleHTMLProps = {
+    /** Subtitle HTML content */
+    html: string;
+
+    /** Whether the subtitle text should be muted */
+    subtitleMuted?: boolean;
+
+    /** Optional link press handler */
+    onLinkPress?: ComponentProps<typeof RenderHTML>['onLinkPress'];
+
+    /** Optional wrapper style */
+    wrapperStyle?: StyleProp<ViewStyle>;
+};
+
+function SectionSubtitleHTML({html, subtitleMuted = false, onLinkPress, wrapperStyle}: SectionSubtitleHTMLProps) {
+    const styles = useThemeStyles();
+    const shouldWrapWithMutedText = subtitleMuted && !/<\s*muted-text(?:-[a-z]+)?(?:\s|>)/.test(html);
+    const subtitleHTML = shouldWrapWithMutedText ? `<muted-text>${html}</muted-text>` : html;
+
+    return (
+        <View style={[styles.flexRow, styles.w100, styles.mt2, styles.renderHTML, wrapperStyle]}>
+            <RenderHTML
+                html={subtitleHTML}
+                onLinkPress={onLinkPress}
+            />
+        </View>
+    );
+}
+
+export default SectionSubtitleHTML;

src/languages/de.ts

@@ -7654,6 +7654,12 @@ Fordern Sie Spesendetails wie Belege und Beschreibungen an, legen Sie Limits und
             'Schließ dich Expensify.org an, um Ungerechtigkeit auf der ganzen Welt zu beseitigen. Die aktuelle „Teachers Unite“-Kampagne unterstützt Lehrkräfte überall, indem sie die Kosten für grundlegende Schulmaterialien teilt.',
         iKnowATeacher: 'Ich kenne eine Lehrkraft',
         iAmATeacher: 'Ich bin Lehrer',
+        personalKarma: {
+            title: 'Persönliches Karma',
+            description: 'Spende 1 $ an Expensify.org für jeweils 500 $, die du pro Monat ausgibst',
+            addPaymentCardPrompt: 'Füge eine Zahlungskarte hinzu, um persönliche Karma-Spenden zu aktivieren.',
+            stopDonationsPrompt: 'Bist du sicher? Deine monatliche Karma-Spende bewirkt viel.',
+        },
         getInTouch: 'Ausgezeichnet! Bitte teile ihre Kontaktdaten, damit wir sie erreichen können.',
         introSchoolPrincipal: 'Einführung für Ihre Schulleitung',
         schoolPrincipalVerifyExpense:

src/languages/en.ts

@@ -7614,6 +7614,12 @@ const translations = {
             'Join Expensify.org in eliminating injustice around the world. The current "Teachers Unite" campaign supports educators everywhere by splitting the costs of essential school supplies.',
         iKnowATeacher: 'I know a teacher',
         iAmATeacher: 'I am a teacher',
+        personalKarma: {
+            title: 'Personal Karma',
+            description: 'Donate $1 to Expensify.org for every $500 you spend each month',
+            addPaymentCardPrompt: 'Add a payment card to enable Personal Karma donations.',
+            stopDonationsPrompt: 'Are you sure? Your monthly Karma donation makes a huge impact.',
+        },
         getInTouch: 'Excellent! Please share their information so we can get in touch with them.',
         introSchoolPrincipal: 'Intro to your school principal',
         schoolPrincipalVerifyExpense:

src/languages/es.ts

@@ -7932,6 +7932,12 @@ ${amount} para ${merchant} - ${date}`,
         joinExpensifyOrg: 'Únete a Expensify.org para eliminar la injusticia en todo el mundo y ayuda a los profesores a dividir sus gastos para las aulas más necesitadas.',
         iKnowATeacher: 'Yo conozco a un profesor',
         iAmATeacher: 'Soy profesor',
+        personalKarma: {
+            title: 'Karma personal',
+            description: 'Dona $1 a Expensify.org por cada $500 que gastes cada mes',
+            addPaymentCardPrompt: 'Agrega una tarjeta de pago para habilitar las donaciones de Karma personal.',
+            stopDonationsPrompt: '¿Estás seguro? Tu donación mensual de Karma tiene un gran impacto.',
+        },
         getInTouch: '¡Excelente! Por favor, comparte tu información para que podamos ponernos en contacto con ellos.',
         introSchoolPrincipal: 'Introducción al director del colegio',
         schoolPrincipalVerifyExpense:

src/languages/fr.ts

@@ -7676,6 +7676,12 @@ Rendez obligatoires des informations de dépense comme les reçus et les descrip
             'Rejoignez Expensify.org pour éliminer l’injustice dans le monde entier. La campagne actuelle « Teachers Unite » soutient les enseignants partout en partageant le coût des fournitures scolaires essentielles.',
         iKnowATeacher: 'Je connais un enseignant',
         iAmATeacher: 'Je suis enseignant',
+        personalKarma: {
+            title: 'Karma personnel',
+            description: 'Faites un don de 1 $ à Expensify.org pour chaque tranche de 500 $ dépensée chaque mois',
+            addPaymentCardPrompt: 'Ajoutez une carte de paiement pour activer les dons de Karma personnel.',
+            stopDonationsPrompt: 'Êtes-vous sûr ? Votre don mensuel Karma a un impact considérable.',
+        },
         getInTouch: 'Excellent ! Veuillez partager leurs coordonnées afin que nous puissions les contacter.',
         introSchoolPrincipal: 'Présentation de la direction de votre école',
         schoolPrincipalVerifyExpense:

src/languages/it.ts

@@ -7640,6 +7640,12 @@ Richiedi dettagli sulle spese come ricevute e descrizioni, imposta limiti e valo
             'Unisciti a Expensify.org per eliminare le ingiustizie in tutto il mondo. L’attuale campagna “Teachers Unite” supporta gli insegnanti ovunque, dividendo i costi delle forniture scolastiche essenziali.',
         iKnowATeacher: 'Conosco un insegnante',
         iAmATeacher: 'Sono un insegnante',
+        personalKarma: {
+            title: 'Karma personale',
+            description: 'Dona 1 $ a Expensify.org per ogni 500 $ che spendi ogni mese',
+            addPaymentCardPrompt: 'Aggiungi una carta di pagamento per abilitare le donazioni di Karma personale.',
+            stopDonationsPrompt: 'Sei sicuro? La tua donazione mensile Karma ha un grande impatto.',
+        },
         getInTouch: 'Eccellente! Condividi le loro informazioni così possiamo metterci in contatto con loro.',
         introSchoolPrincipal: 'Introduzione al dirigente scolastico',
         schoolPrincipalVerifyExpense:

src/languages/ja.ts

@@ -7555,6 +7555,12 @@ ${reportName}
             'Expensify.org に参加して、世界中の不公正の解消に取り組みましょう。現在実施中の「Teachers Unite」キャンペーンでは、必需の学用品の費用を分担することで、すべての教育者を支援しています。',
         iKnowATeacher: '私は先生を知っています',
         iAmATeacher: '私は教師です',
+        personalKarma: {
+            title: 'パーソナルカルマ',
+            description: '毎月の支出500ドルごとに1ドルをExpensify.orgに寄付します',
+            addPaymentCardPrompt: 'パーソナルカルマの寄付を有効にするには、支払いカードを追加してください。',
+            stopDonationsPrompt: '本当によろしいですか？毎月のKarma寄付は大きな影響をもたらします。',
+        },
         getInTouch: '素晴らしいです！その方の情報を共有していただければ、こちらからご連絡いたします。',
         introSchoolPrincipal: '学校校長への紹介',
         schoolPrincipalVerifyExpense: 'Expensify.org は、低所得世帯の生徒がより良い学習体験を得られるよう、必要な学用品の費用を分担します。あなたの経費は、校長により確認されます。',

src/languages/nl.ts

@@ -7619,6 +7619,12 @@ Vereis onkostendetails zoals bonnen en beschrijvingen, stel limieten en standaar
             'Sluit je aan bij Expensify.org om onrecht overal ter wereld uit te bannen. De huidige campagne “Teachers Unite” ondersteunt onderwijzers overal door de kosten van essentiële schoolbenodigdheden te delen.',
         iKnowATeacher: 'Ik ken een leraar',
         iAmATeacher: 'Ik ben een leraar',
+        personalKarma: {
+            title: 'Persoonlijke karma',
+            description: 'Doneer $1 aan Expensify.org voor elke $500 die je elke maand uitgeeft',
+            addPaymentCardPrompt: 'Voeg een betaalkaart toe om persoonlijke karma-donaties in te schakelen.',
+            stopDonationsPrompt: 'Weet je het zeker? Je maandelijkse Karma-donatie heeft een grote impact.',
+        },
         getInTouch: 'Uitstekend! Deel hun gegevens zodat we contact met hen kunnen opnemen.',
         introSchoolPrincipal: 'Introductie bij je schooldirecteur',
         schoolPrincipalVerifyExpense:

src/languages/pl.ts

@@ -7607,6 +7607,12 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i
             'Dołącz do Expensify.org w eliminowaniu niesprawiedliwości na całym świecie. Obecna kampania „Teachers Unite” wspiera nauczycieli wszędzie, dzieląc koszty niezbędnych przyborów szkolnych.',
         iKnowATeacher: 'Znam nauczyciela',
         iAmATeacher: 'Jestem nauczycielem',
+        personalKarma: {
+            title: 'Karma osobista',
+            description: 'Przekaż 1 USD na Expensify.org za każde 500 USD wydane w miesiącu',
+            addPaymentCardPrompt: 'Dodaj kartę płatniczą, aby włączyć darowizny w ramach Osobistej Karmy.',
+            stopDonationsPrompt: 'Czy na pewno? Twoja comiesięczna darowizna Karma ma ogromny wpływ.',
+        },
         getInTouch: 'Świetnie! Udostępnij ich dane kontaktowe, abyśmy mogli się z nimi skontaktować.',
         introSchoolPrincipal: 'Wprowadzenie dla dyrektora szkoły',
         schoolPrincipalVerifyExpense:

src/languages/pt-BR.ts

@@ -7611,6 +7611,12 @@ Exija dados de despesas como recibos e descrições, defina limites e padrões e
             'Junte-se à Expensify.org para eliminar as injustiças ao redor do mundo. A atual campanha “Teachers Unite” apoia educadores em todos os lugares ao dividir os custos de materiais escolares essenciais.',
         iKnowATeacher: 'Eu conheço um professor',
         iAmATeacher: 'Sou professor(a)',
+        personalKarma: {
+            title: 'Karma pessoal',
+            description: 'Doe US$ 1 para o Expensify.org a cada US$ 500 que você gastar por mês',
+            addPaymentCardPrompt: 'Adicione um cartão de pagamento para ativar as doações do Karma pessoal.',
+            stopDonationsPrompt: 'Tem certeza? Sua doação mensal de Karma causa um grande impacto.',
+        },
         getInTouch: 'Excelente! Compartilhe as informações deles para que possamos entrar em contato.',
         introSchoolPrincipal: 'Apresentação ao diretor da sua escola',
         schoolPrincipalVerifyExpense:

src/languages/zh-hans.ts

@@ -7435,6 +7435,12 @@ ${reportName}
         joinExpensifyOrg: '加入 Expensify.org，一起消除世界各地的不公现象。当前的“教师联合”活动通过分担基本学习用品的费用来支持全世界的教育工作者。',
         iKnowATeacher: '我认识一位老师',
         iAmATeacher: '我是老师',
+        personalKarma: {
+            title: '个人 Karma',
+            description: '您每月每消费 500 美元，就向 Expensify.org 捐赠 1 美元',
+            addPaymentCardPrompt: '请添加支付卡以启用个人 Karma 捐赠。',
+            stopDonationsPrompt: '您确定吗？您每月的 Karma 捐赠会带来巨大影响。',
+        },
         getInTouch: '太好了！请分享他们的联系方式，以便我们与他们取得联系。',
         introSchoolPrincipal: '向你们学校校长的介绍',
         schoolPrincipalVerifyExpense: 'Expensify.org 会分摊基本学习用品的费用，让来自低收入家庭的学生能够拥有更好的学习体验。我们会请你的校长核实你的报销。',

src/libs/API/parameters/UpdatePersonalKarmaParams.ts

@@ -0,0 +1,5 @@
+type UpdatePersonalKarmaParams = {
+    enabled: boolean;
+};
+
+export default UpdatePersonalKarmaParams;

src/libs/API/parameters/index.ts

@@ -292,6 +292,7 @@ export type {default as UpdateSubscriptionTypeParams} from './UpdateSubscription
 export type {default as SignUpUserParams} from './SignUpUserParams';
 export type {default as UpdateSubscriptionAutoRenewParams} from './UpdateSubscriptionAutoRenewParams';
 export type {default as UpdateSubscriptionAddNewUsersAutomaticallyParams} from './UpdateSubscriptionAddNewUsersAutomaticallyParams';
+export type {default as UpdatePersonalKarmaParams} from './UpdatePersonalKarmaParams';
 export type {default as GenerateSpotnanaTokenParams} from './GenerateSpotnanaTokenParams';
 export type {default as UpdateSubscriptionSizeParams} from './UpdateSubscriptionSizeParams';
 export type {default as SetPromoCodeParams} from './SetPromoCodeParams';

src/libs/API/types.ts

@@ -367,6 +367,7 @@ const WRITE_COMMANDS = {
     SIGN_UP_USER: 'SignUpUser',
     UPDATE_SUBSCRIPTION_AUTO_RENEW: 'UpdateSubscriptionAutoRenew',
     UPDATE_SUBSCRIPTION_ADD_NEW_USERS_AUTOMATICALLY: 'UpdateSubscriptionAddNewUsersAutomatically',
+    UPDATE_PERSONAL_KARMA: 'UpdatePersonalKarma',
     UPDATE_SUBSCRIPTION_SIZE: 'UpdateSubscriptionSize',
     REPORT_EXPORT: 'Report_Export',
     MARK_AS_EXPORTED: 'MarkAsExported',
@@ -943,6 +944,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.SIGN_UP_USER]: Parameters.SignUpUserParams;
     [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_AUTO_RENEW]: Parameters.UpdateSubscriptionAutoRenewParams;
     [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_ADD_NEW_USERS_AUTOMATICALLY]: Parameters.UpdateSubscriptionAddNewUsersAutomaticallyParams;
+    [WRITE_COMMANDS.UPDATE_PERSONAL_KARMA]: Parameters.UpdatePersonalKarmaParams;
     [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_SIZE]: Parameters.UpdateSubscriptionSizeParams;
     [WRITE_COMMANDS.SET_PROMO_CODE]: Parameters.SetPromoCodeParams;
     [WRITE_COMMANDS.REQUEST_TAX_EXEMPTION]: null;

src/libs/actions/Subscription.ts

@@ -1,7 +1,13 @@
 import type {OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import * as API from '@libs/API';
-import type {CancelBillingSubscriptionParams, UpdateSubscriptionAddNewUsersAutomaticallyParams, UpdateSubscriptionAutoRenewParams, UpdateSubscriptionTypeParams} from '@libs/API/parameters';
+import type {
+    CancelBillingSubscriptionParams,
+    UpdatePersonalKarmaParams,
+    UpdateSubscriptionAddNewUsersAutomaticallyParams,
+    UpdateSubscriptionAutoRenewParams,
+    UpdateSubscriptionTypeParams,
+} from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils';
 import CONST from '@src/CONST';
@@ -197,6 +203,33 @@ function updateSubscriptionAddNewUsersAutomatically(addNewUsersAutomatically: bo
     });
 }
 
+function updatePersonalKarma(enabled: boolean) {
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PERSONAL_OFFSETS>> = [
+        {
+            onyxMethod: Onyx.METHOD.SET,
+            key: ONYXKEYS.NVP_PERSONAL_OFFSETS,
+            value: enabled,
+        },
+    ];
+
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.NVP_PERSONAL_OFFSETS>> = [
+        {
+            onyxMethod: Onyx.METHOD.SET,
+            key: ONYXKEYS.NVP_PERSONAL_OFFSETS,
+            value: !enabled,
+        },
+    ];
+
+    const parameters: UpdatePersonalKarmaParams = {
+        enabled,
+    };
+
+    API.write(WRITE_COMMANDS.UPDATE_PERSONAL_KARMA, parameters, {
+        optimisticData,
+        failureData,
+    });
+}
+
 function updateSubscriptionSize(newSubscriptionSize: number, currentSubscriptionSize: number) {
     const onyxData: OnyxData<typeof ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION> = {
         optimisticData: [
@@ -378,6 +411,7 @@ export {
     openSubscriptionPage,
     updateSubscriptionAutoRenew,
     updateSubscriptionAddNewUsersAutomatically,
+    updatePersonalKarma,
     updateSubscriptionSize,
     clearUpdateSubscriptionSizeError,
     updateSubscriptionType,