From 5d8e84e5412d8999cc704cca74d762e7708e5a6c Mon Sep 17 00:00:00 2001
From: Olha <olha.mittatb.no>
Date: Wed, 5 Mar 2025 14:28:53 +0100
Subject: [PATCH] fix: split components into three

---
 .../Root_PurchaseConfirmationScreen.tsx       | 101 +++++-----
 .../components/PaymentBrand.tsx               |   7 +-
 .../components/PaymentCard.tsx                | 138 +++++++++++++
 .../components/SelectPaymentMethodSheet.tsx   | 186 ++++++++++++++++--
 .../Profile_PaymentMethodsScreen.tsx          |  48 ++++-
 .../screens/subscreens/AnonymousPurchases.ts  |   5 +
 .../screens/subscreens/PaymentMethods.ts      |   3 +-
 .../subscreens/PurchaseConfirmation.ts        |  35 ++--
 .../subscreens/SelectPaymentMethodTexts.ts    |   4 +-
 9 files changed, 435 insertions(+), 92 deletions(-)
 create mode 100644 src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/PaymentCard.tsx

diff --git a/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/Root_PurchaseConfirmationScreen.tsx b/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/Root_PurchaseConfirmationScreen.tsx
index 0b604f165b..1002afd362 100644
--- a/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/Root_PurchaseConfirmationScreen.tsx
+++ b/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/Root_PurchaseConfirmationScreen.tsx
@@ -1,10 +1,4 @@
 import {useAnalyticsContext} from '@atb/analytics';
-import {
-  Amex,
-  MasterCard,
-  Vipps,
-  Visa,
-} from '@atb/assets/svg/color/icons/ticketing';
 import {useBottomSheetContext} from '@atb/components/bottom-sheet';
 import {Button} from '@atb/components/button';
 import {MessageInfoBox} from '@atb/components/message-info-box';
@@ -52,6 +46,9 @@ import {closeInAppBrowseriOS} from '@atb/in-app-browser';
 import {openInAppBrowser} from '@atb/in-app-browser/in-app-browser';
 import {APP_SCHEME} from '@env';
 import {useAuthContext} from '@atb/auth';
+import {GenericSectionItem, Section} from '@atb/components/sections';
+import {formatNumberToString} from '@atb/utils/numbers';
+import {PaymentSelectionCard} from './components/PaymentCard';
 
 type Props = RootStackScreenProps<'Root_PurchaseConfirmationScreen'>;
 
@@ -61,7 +58,7 @@ export const Root_PurchaseConfirmationScreen: React.FC<Props> = ({
 }) => {
   const styles = useStyles();
   const {theme} = useThemeContext();
-  const {t} = useTranslation();
+  const {t, language} = useTranslation();
   const {userId} = useAuthContext();
 
   const interactiveColor = theme.color.interactive[0];
@@ -108,6 +105,7 @@ export const Root_PurchaseConfirmationScreen: React.FC<Props> = ({
       offer_id,
     }),
   );
+  const totalPriceString = formatNumberToString(totalPrice, language);
 
   const reserveMutation = useReserveOfferMutation({
     offers,
@@ -191,28 +189,6 @@ export const Root_PurchaseConfirmationScreen: React.FC<Props> = ({
     }
   }
 
-  function getPaymentMethodTexts(method: PaymentMethod): string {
-    let str;
-    switch (method.paymentType) {
-      case PaymentType.Vipps:
-        str = t(PurchaseConfirmationTexts.payWithVipps.text);
-        break;
-      case PaymentType.Visa:
-        str = t(PurchaseConfirmationTexts.payWithVisa.text);
-        break;
-      case PaymentType.Mastercard:
-        str = t(PurchaseConfirmationTexts.payWithMasterCard.text);
-        break;
-      case PaymentType.Amex:
-        str = t(PurchaseConfirmationTexts.payWithAmex.text);
-        break;
-    }
-    if (method.recurringCard) {
-      str = str + ` (**** ${method.recurringCard.masked_pan})`;
-    }
-    return str;
-  }
-
   async function selectPaymentMethod() {
     openBottomSheet(() => {
       return (
@@ -318,6 +294,16 @@ export const Root_PurchaseConfirmationScreen: React.FC<Props> = ({
             type="error"
           />
         )}
+        {paymentMethod && (
+          <Section>
+            <GenericSectionItem>
+              <PaymentSelectionCard
+                card={paymentMethod}
+                startAction={selectPaymentMethod}
+              />
+            </GenericSectionItem>
+          </Section>
+        )}
         {isSearchingOffer ? (
           <ActivityIndicator
             size="large"
@@ -330,12 +316,11 @@ export const Root_PurchaseConfirmationScreen: React.FC<Props> = ({
               <View style={styles.flexColumn}>
                 <Button
                   expanded={true}
-                  text={getPaymentMethodTexts(paymentMethod)}
+                  text={t(
+                    PurchaseConfirmationTexts.payTotal.text(totalPriceString),
+                  )}
                   interactiveColor={interactiveColor}
                   disabled={!!offerError}
-                  rightIcon={{
-                    svg: getPaymentTypeSvg(paymentMethod.paymentType),
-                  }}
                   onPress={() => {
                     analytics.logEvent(
                       'Ticketing',
@@ -401,19 +386,6 @@ export const Root_PurchaseConfirmationScreen: React.FC<Props> = ({
   );
 };
 
-function getPaymentTypeSvg(paymentType: PaymentType) {
-  switch (paymentType) {
-    case PaymentType.Mastercard:
-      return MasterCard;
-    case PaymentType.Vipps:
-      return Vipps;
-    case PaymentType.Visa:
-      return Visa;
-    case PaymentType.Amex:
-      return Amex;
-  }
-}
-
 const useStyles = StyleSheet.createThemeHook((theme) => ({
   container: {
     flex: 1,
@@ -422,6 +394,7 @@ const useStyles = StyleSheet.createThemeHook((theme) => ({
   flexColumn: {
     flex: 1,
     flexDirection: 'column',
+    marginVertical: theme.spacing.medium,
   },
   flexRowCenter: {
     flex: 1,
@@ -441,4 +414,40 @@ const useStyles = StyleSheet.createThemeHook((theme) => ({
   purchaseInformation: {
     marginBottom: theme.spacing.medium,
   },
+  content: {
+    padding: theme.spacing.medium,
+    rowGap: theme.spacing.medium,
+  },
+  card: {flex: 1, paddingVertical: theme.spacing.small},
+  cardTop: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  cardIcons: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+  },
+  paymentMethod: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: theme.spacing.xSmall,
+    paddingLeft: theme.spacing.medium,
+    marginRight: 'auto',
+  },
+  maskedPan: {
+    color: theme.color.foreground.dynamic.secondary,
+  },
+
+  actionButton: {
+    marginLeft: theme.spacing.medium,
+    display: 'flex',
+    flexDirection: 'row',
+    columnGap: theme.spacing.small,
+    paddingHorizontal: theme.spacing.medium,
+  },
 }));
diff --git a/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/PaymentBrand.tsx b/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/PaymentBrand.tsx
index 4261e0b73b..89494cdc35 100644
--- a/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/PaymentBrand.tsx
+++ b/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/PaymentBrand.tsx
@@ -8,9 +8,10 @@ import {
   Visa,
 } from '@atb/assets/svg/color/icons/ticketing';
 import {useFontScale} from '@atb/utils/use-font-scale';
+import {Card} from '@atb/assets/svg/mono-icons/ticketing';
 
 export type Brand = {
-  paymentType: PaymentType;
+  paymentType: PaymentType | undefined;
   size?: number;
 };
 
@@ -26,7 +27,7 @@ export const PaymentBrand: React.FC<Brand> = ({paymentType, size = 20}) => {
 const Logo = ({
   paymentType,
 }: {
-  paymentType: PaymentType;
+  paymentType: PaymentType | undefined;
 }): JSX.Element | null => {
   switch (paymentType) {
     case PaymentType.Visa:
@@ -38,6 +39,6 @@ const Logo = ({
     case PaymentType.Amex:
       return <Amex height="100%" width="100%" />;
     default:
-      return null;
+      return <Card height="100%" width="100%" />;
   }
 };
diff --git a/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/PaymentCard.tsx b/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/PaymentCard.tsx
new file mode 100644
index 0000000000..83f9e3290e
--- /dev/null
+++ b/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/PaymentCard.tsx
@@ -0,0 +1,138 @@
+import {PressableOpacity} from '@atb/components/pressable-opacity';
+import {ThemeText} from '@atb/components/text';
+
+import {StyleSheet, useThemeContext} from '@atb/theme';
+import {humanizePaymentType, PaymentType} from '@atb/ticketing';
+import {useTranslation} from '@atb/translations';
+import React from 'react';
+
+import {useFontScale} from '@atb/utils/use-font-scale';
+import {PaymentBrand} from './PaymentBrand';
+import PaymentMethodsTexts from '@atb/translations/screens/subscreens/PaymentMethods';
+import {MessageInfoText} from '@atb/components/message-info-text';
+import SelectPaymentMethodTexts from '@atb/translations/screens/subscreens/SelectPaymentMethodTexts';
+import SvgEdit from '@atb/assets/svg/mono-icons/actions/Edit';
+import {View} from 'react-native';
+import {PaymentMethod} from '@atb/stacks-hierarchy/types';
+
+export type Brand = {
+  paymentType: PaymentType | undefined;
+  size?: number;
+};
+
+export const PaymentSelectionCard = (props: {
+  card: PaymentMethod;
+  startAction: Function;
+}) => {
+  const {card, startAction} = props;
+  const paymentName = humanizePaymentType(card.paymentType);
+  const style = useStyles();
+  const {theme} = useThemeContext();
+  const {t} = useTranslation();
+  const fontScale = useFontScale();
+  const multiplePaymentMethods = !(
+    card.recurringCard || card.paymentType === PaymentType.Vipps
+  );
+
+  return (
+    <View style={style.card}>
+      <View style={style.cardTop}>
+        <PaymentBrand
+          paymentType={multiplePaymentMethods ? undefined : card.paymentType}
+        />
+        <View style={style.paymentMethod}>
+          <ThemeText>
+            {multiplePaymentMethods
+              ? t(SelectPaymentMethodTexts.multiple_payment.title)
+              : paymentName}
+          </ThemeText>
+          {!multiplePaymentMethods &&
+            card.paymentType !== PaymentType.Vipps && (
+              <ThemeText
+                style={style.maskedPan}
+                accessibilityLabel={t(
+                  PaymentMethodsTexts.a11y.cardInfo(
+                    paymentName,
+                    card.recurringCard?.masked_pan ?? '',
+                  ),
+                )}
+              >
+                **** {card.recurringCard?.masked_pan}
+              </ThemeText>
+            )}
+        </View>
+
+        <View style={style.cardIcons}>
+          <PressableOpacity
+            accessibilityLabel={t(
+              PaymentMethodsTexts.a11y.deleteCardIcon(
+                paymentName,
+                card.recurringCard?.masked_pan ?? '',
+              ),
+            )}
+            style={style.actionButton}
+            onPress={() => {
+              startAction();
+            }}
+          >
+            <ThemeText>{t(PaymentMethodsTexts.editPaymentMethod)}</ThemeText>
+            <SvgEdit
+              height={21 * fontScale}
+              width={21 * fontScale}
+              fill={theme.color.foreground.dynamic.primary}
+            />
+          </PressableOpacity>
+        </View>
+      </View>
+      {false && (
+        <>
+          {/* this is just a template for the future message implementation */}
+          <MessageInfoText
+            style={style.warningMessage}
+            message="Expiration messsage"
+            type="warning"
+          />
+        </>
+      )}
+    </View>
+  );
+};
+
+const useStyles = StyleSheet.createThemeHook((theme) => ({
+  warningMessage: {
+    marginBottom: theme.spacing.medium,
+  },
+
+  card: {flex: 1, paddingVertical: theme.spacing.small},
+  cardTop: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  cardIcons: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+  },
+  paymentMethod: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: theme.spacing.xSmall,
+    paddingLeft: theme.spacing.medium,
+    marginRight: 'auto',
+  },
+  maskedPan: {
+    color: theme.color.foreground.dynamic.secondary,
+  },
+
+  actionButton: {
+    marginLeft: theme.spacing.medium,
+    display: 'flex',
+    flexDirection: 'row',
+    columnGap: theme.spacing.small,
+    paddingHorizontal: theme.spacing.medium,
+  },
+}));
diff --git a/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/SelectPaymentMethodSheet.tsx b/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/SelectPaymentMethodSheet.tsx
index e8066e5d13..91ac0d244e 100644
--- a/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/SelectPaymentMethodSheet.tsx
+++ b/src/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/SelectPaymentMethodSheet.tsx
@@ -19,6 +19,8 @@ import {
 import {useAuthContext} from '@atb/auth';
 import {PaymentType, humanizePaymentType} from '@atb/ticketing';
 import {RadioIcon, getRadioA11y} from '@atb/components/radio';
+import {MessageInfoText} from '@atb/components/message-info-text';
+import AnonymousPurchases from '@atb/translations/screens/subscreens/AnonymousPurchases';
 
 type Props = {
   onSelect: (
@@ -43,6 +45,7 @@ export const SelectPaymentMethodSheet: React.FC<Props> = ({
   const [shouldSave, setShouldSave] = useState(
     currentOptions?.shouldSavePaymentMethod ?? false,
   );
+  const {authenticationType} = useAuthContext();
 
   const {paymentTypes} = useFirestoreConfigurationContext();
   const defaultPaymentMethods: PaymentMethod[] = paymentTypes.map(
@@ -51,6 +54,16 @@ export const SelectPaymentMethodSheet: React.FC<Props> = ({
       savedType: SavedPaymentMethodType.Normal,
     }),
   );
+  const singlePaymentMethod = defaultPaymentMethods.filter(
+    (method) =>
+      method.paymentType !== PaymentType.Amex &&
+      method.paymentType !== PaymentType.Mastercard &&
+      method.paymentType !== PaymentType.Visa,
+  );
+
+  const multiplePaymentMethod = defaultPaymentMethods.filter(
+    (method) => method.paymentType !== PaymentType.Vipps,
+  );
   const [selectedMethod, setSelectedMethod] = useState(
     currentOptions?.paymentMethod,
   );
@@ -59,13 +72,18 @@ export const SelectPaymentMethodSheet: React.FC<Props> = ({
     <BottomSheetContainer
       title={t(SelectPaymentMethodTexts.header.text)}
       fullHeight
+      maxHeightValue={
+        authenticationType !== 'phone'
+          ? 0.33
+          : 0.33 + (recurringPaymentMethods?.length ?? 0) * 0.13
+      }
     >
       <View style={{flex: 1}}>
         <View style={{flexShrink: 1, flexGrow: 1}}>
           <ScrollView style={styles.paymentMethods}>
-            {defaultPaymentMethods.map((method, index) => {
+            {singlePaymentMethod.map((method, index) => {
               return (
-                <PaymentMethodView
+                <SinglePaymentMethod
                   key={method.paymentType}
                   paymentMethod={method}
                   shouldSave={shouldSave}
@@ -83,6 +101,34 @@ export const SelectPaymentMethodSheet: React.FC<Props> = ({
               );
             })}
 
+            {/*  I don't know what to pass to selected and onSelect, so I will avoid having a conflict with the types. */}
+
+            <MultiplePaymentMethodsRadioSection
+              shouldSave={shouldSave}
+              onSetShouldSave={setShouldSave}
+              selected={
+                !selectedMethod?.recurringCard &&
+                selectedMethod?.paymentType ===
+                  multiplePaymentMethod[0]?.paymentType
+              }
+              onSelect={() => {
+                setShouldSave(true);
+                setSelectedMethod(multiplePaymentMethod[0]);
+              }}
+              paymentGroup={multiplePaymentMethod}
+              index={2}
+            />
+
+            {authenticationType !== 'phone' && (
+              <MessageInfoText
+                style={styles.warningMessageAnonym}
+                message={t(
+                  AnonymousPurchases.consequences.select_payment_method,
+                )}
+                type="warning"
+              />
+            )}
+
             {recurringPaymentMethods && recurringPaymentMethods?.length > 0 && (
               <View style={styles.listHeading}>
                 <ThemeText>
@@ -91,7 +137,7 @@ export const SelectPaymentMethodSheet: React.FC<Props> = ({
               </View>
             )}
             {recurringPaymentMethods?.map((method, index) => (
-              <PaymentMethodView
+              <SinglePaymentMethod
                 key={method.recurringCard?.id}
                 paymentMethod={method}
                 selected={
@@ -127,6 +173,107 @@ export const SelectPaymentMethodSheet: React.FC<Props> = ({
   );
 };
 
+type MultiplePaymentMethodsProps = {
+  paymentMethod?: PaymentMethod;
+  selected: boolean;
+  onSelect: (value: PaymentMethod[]) => void;
+  shouldSave: boolean;
+  onSetShouldSave: (val: boolean) => void;
+  paymentGroup: PaymentMethod[];
+  index: number;
+};
+
+const MultiplePaymentMethodsRadioSection: React.FC<
+  MultiplePaymentMethodsProps
+> = ({selected, onSelect, shouldSave, onSetShouldSave, paymentGroup}) => {
+  const {t} = useTranslation();
+  const styles = useStyles();
+  const {authenticationType} = useAuthContext();
+  const {theme} = useThemeContext();
+  const radioColor = theme.color.interactive[2].outline.background;
+
+  function getPaymentTexts(method: PaymentMethod[]): {
+    label: string;
+    hint: string;
+  } {
+    const methods = method
+      .map((payment) => humanizePaymentType(payment.paymentType))
+      .join(', ');
+
+    return {
+      label: t(
+        PurchaseConfirmationTexts.paymentWithMultiplePaymentMethods.a11yLabel(
+          methods,
+        ),
+      ),
+      hint: t(
+        PurchaseConfirmationTexts.paymentWithMultiplePaymentMethods.a11Hint,
+      ),
+    };
+  }
+
+  const paymentTexts = getPaymentTexts(paymentGroup);
+  const canSaveCard = authenticationType === 'phone';
+
+  return (
+    <View style={styles.card}>
+      <PressableOpacity
+        style={[styles.paymentMethod, styles.centerRow]}
+        onPress={() => onSelect(paymentGroup)}
+        accessibilityHint={paymentTexts.hint}
+        {...getRadioA11y(paymentTexts.label, selected, t)}
+        testID="multiple payment methods"
+      >
+        <View style={styles.column}>
+          <View style={styles.row}>
+            <View style={styles.centerRow}>
+              <RadioIcon checked={selected} color={radioColor} />
+              <View style={styles.reccuringCard}>
+                <ThemeText>
+                  {t(SelectPaymentMethodTexts.multiple_payment.title)}
+                </ThemeText>
+              </View>
+              <View style={styles.paymentIconsGroup}>
+                {paymentGroup.map((payment) => (
+                  <PaymentBrand paymentType={payment.paymentType} />
+                ))}
+              </View>
+            </View>
+          </View>
+        </View>
+      </PressableOpacity>
+      {selected && canSaveCard && (
+        <PressableOpacity
+          onPress={() => onSetShouldSave(!shouldSave)}
+          style={styles.saveMethodSection}
+        >
+          <ThemeText>
+            {t(SelectPaymentMethodTexts.multiple_payment.text)}
+          </ThemeText>
+          <ThemeText typography="body__secondary" color="secondary">
+            {t(SelectPaymentMethodTexts.multiple_payment.information)}
+          </ThemeText>
+          <View style={styles.saveButton}>
+            <Checkbox
+              style={styles.saveButtonCheckbox}
+              checked={shouldSave}
+              accessibility={{
+                accessibilityHint: t(
+                  shouldSave
+                    ? SelectPaymentMethodTexts.a11yHint.notSave
+                    : SelectPaymentMethodTexts.a11yHint.save,
+                ),
+              }}
+              testID="saveCard"
+            />
+            <ThemeText>{t(SelectPaymentMethodTexts.save_card)}</ThemeText>
+          </View>
+        </PressableOpacity>
+      )}
+    </View>
+  );
+};
+
 type PaymentMethodProps = {
   paymentMethod: PaymentMethod;
   selected: boolean;
@@ -136,7 +283,7 @@ type PaymentMethodProps = {
   index: number;
 };
 
-const PaymentMethodView: React.FC<PaymentMethodProps> = ({
+const SinglePaymentMethod: React.FC<PaymentMethodProps> = ({
   paymentMethod,
   selected,
   onSelect,
@@ -147,8 +294,6 @@ const PaymentMethodView: React.FC<PaymentMethodProps> = ({
   const {t} = useTranslation();
   const styles = useStyles();
   const {authenticationType} = useAuthContext();
-  const {theme} = useThemeContext();
-  const radioColor = theme.color.interactive[2].outline.background;
 
   function getPaymentTexts(method: PaymentMethod): {
     text: string;
@@ -194,6 +339,8 @@ const PaymentMethodView: React.FC<PaymentMethodProps> = ({
     authenticationType === 'phone' &&
     paymentMethod.savedType === 'normal' &&
     paymentMethod.paymentType !== PaymentType.Vipps;
+  const {theme} = useThemeContext();
+  const radioColor = theme.color.interactive[2].outline.background;
 
   return (
     <View style={styles.card}>
@@ -222,6 +369,15 @@ const PaymentMethodView: React.FC<PaymentMethodProps> = ({
               <PaymentBrand paymentType={paymentMethod.paymentType} />
             </View>
           </View>
+
+          {/* this is just a template for the future message implementation
+          {paymentMethod.recurringCard && (
+            <MessageInfoText
+              style={styles.warningMessage}
+              message="Expiration messsage"
+              type="warning"
+            />
+          )} */}
         </View>
       </PressableOpacity>
       {selected && canSaveCard && (
@@ -230,13 +386,10 @@ const PaymentMethodView: React.FC<PaymentMethodProps> = ({
           style={styles.saveMethodSection}
         >
           <ThemeText>
-            {t(SelectPaymentMethodTexts.save_payment_method_description.text)}
+            {t(SelectPaymentMethodTexts.multiple_payment.text)}
           </ThemeText>
           <ThemeText typography="body__secondary" color="secondary">
-            {t(
-              SelectPaymentMethodTexts.save_payment_method_description
-                .information,
-            )}
+            {t(SelectPaymentMethodTexts.multiple_payment.information)}
           </ThemeText>
           <View style={styles.saveButton}>
             <Checkbox
@@ -360,9 +513,20 @@ const useStyles = StyleSheet.createThemeHook((theme) => ({
     rowGap: theme.spacing.xSmall,
     paddingLeft: theme.spacing.medium,
     marginRight: 'auto',
+    color: theme.color.foreground.dynamic.secondary,
   },
 
   warningMessage: {
     paddingTop: theme.spacing.medium,
   },
+  warningMessageAnonym: {
+    paddingTop: theme.spacing.medium,
+    paddingLeft: theme.spacing.medium,
+  },
+
+  paymentIconsGroup: {
+    display: 'flex',
+    flexDirection: 'row',
+    columnGap: theme.spacing.medium,
+  },
 }));
diff --git a/src/stacks-hierarchy/Root_TabNavigatorStack/TabNav_ProfileStack/Profile_PaymentMethodsScreen.tsx b/src/stacks-hierarchy/Root_TabNavigatorStack/TabNav_ProfileStack/Profile_PaymentMethodsScreen.tsx
index e998ea5f5a..7819cdf755 100644
--- a/src/stacks-hierarchy/Root_TabNavigatorStack/TabNav_ProfileStack/Profile_PaymentMethodsScreen.tsx
+++ b/src/stacks-hierarchy/Root_TabNavigatorStack/TabNav_ProfileStack/Profile_PaymentMethodsScreen.tsx
@@ -10,7 +10,6 @@ import {
 import {ThemeText} from '@atb/components/text';
 import {ThemeIcon} from '@atb/components/theme-icon';
 import {PaymentBrand} from '@atb/stacks-hierarchy/Root_PurchaseConfirmationScreen/components/PaymentBrand';
-import {getExpireDate} from '@atb/stacks-hierarchy/utils';
 import {StyleSheet, Theme, useThemeContext} from '@atb/theme';
 import {
   addPaymentMethod,
@@ -179,18 +178,20 @@ const Card = (props: {
   return (
     <View style={style.card}>
       <View style={style.cardTop}>
-        <View>
+        <PaymentBrand paymentType={card.payment_type} />
+        <View style={style.paymentMethod}>
+          <ThemeText>{paymentName}</ThemeText>
           <ThemeText
+            style={style.maskedPan}
             accessibilityLabel={t(
               PaymentMethodsTexts.a11y.cardInfo(paymentName, card.masked_pan),
             )}
           >
-            {paymentName} **** {card.masked_pan}
+            **** {card.masked_pan}
           </ThemeText>
         </View>
 
         <View style={style.cardIcons}>
-          <PaymentBrand paymentType={card.payment_type} />
           <PressableOpacity
             accessibilityLabel={t(
               PaymentMethodsTexts.a11y.deleteCardIcon(
@@ -198,7 +199,7 @@ const Card = (props: {
                 card.masked_pan,
               ),
             )}
-            style={{marginLeft: theme.spacing.medium}}
+            style={style.actionButton}
             onPress={() => {
               destructiveAlert({
                 alertTitleString: t(PaymentMethodsTexts.deleteModal.title),
@@ -213,18 +214,25 @@ const Card = (props: {
               });
             }}
           >
+            <ThemeText>
+              {t(PaymentMethodsTexts.deleteModal.confirmButton)}
+            </ThemeText>
             <SvgDelete
               height={21 * fontScale}
               width={21 * fontScale}
-              fill={theme.color.interactive.destructive.default.background}
+              fill={theme.color.foreground.dynamic.primary}
             />
           </PressableOpacity>
         </View>
       </View>
-
-      <ThemeText color="secondary" typography="body__secondary">
-        {getExpireDate(card.expires_at)}
-      </ThemeText>
+      {/* this is just a template for the future message implementation
+          {paymentMethod.recurringCard && (
+            <MessageInfoText
+              style={styles.warningMessage}
+              message="Expiration messsage"
+              type="warning"
+            />
+          )} */}
     </View>
   );
 };
@@ -318,4 +326,24 @@ const useStyles = StyleSheet.createThemeHook((theme: Theme) => ({
     flexGrow: 1,
     justifyContent: 'flex-end',
   },
+  paymentMethod: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: theme.spacing.xSmall,
+    paddingLeft: theme.spacing.medium,
+    marginRight: 'auto',
+  },
+  maskedPan: {
+    color: theme.color.foreground.dynamic.secondary,
+  },
+
+  actionButton: {
+    marginLeft: theme.spacing.medium,
+    display: 'flex',
+    flexDirection: 'row',
+    columnGap: theme.spacing.xSmall,
+  },
+  warningMessage: {
+    paddingTop: theme.spacing.medium,
+  },
 }));
diff --git a/src/translations/screens/subscreens/AnonymousPurchases.ts b/src/translations/screens/subscreens/AnonymousPurchases.ts
index 82536321bd..e5a904f85d 100644
--- a/src/translations/screens/subscreens/AnonymousPurchases.ts
+++ b/src/translations/screens/subscreens/AnonymousPurchases.ts
@@ -89,6 +89,11 @@ const AnonymousPurchases = {
         ),
       },
     },
+    select_payment_method: _(
+      'Logg inn for å lagre kort for fremtidige kjøp',
+      'Log in to save cards for future purchases',
+      'Logg inn for å lagra kort for framtidige kjøp',
+    ),
   },
   unknown_error: _(
     'Oops - noe gikk galt. Supert om du prøver på nytt 🤞',
diff --git a/src/translations/screens/subscreens/PaymentMethods.ts b/src/translations/screens/subscreens/PaymentMethods.ts
index 7448737090..bf83d9dd87 100644
--- a/src/translations/screens/subscreens/PaymentMethods.ts
+++ b/src/translations/screens/subscreens/PaymentMethods.ts
@@ -25,7 +25,7 @@ const PaymentMethodsTexts = {
       'Are you sure you want to remove this payment card?',
       'Er du sikker på at du vil fjerne dette betalingskortet?',
     ),
-    confirmButton: _('Fjern', 'Remove', 'Fjern'),
+    confirmButton: _('Fjern kort', 'Remove card', 'Fjern kort'),
     cancelButton: _('Avbryt', 'Cancel', 'Avbryt'),
   },
   a11y: {
@@ -52,6 +52,7 @@ const PaymentMethodsTexts = {
     'Payment with Vipps is available when purchasing a ticket',
     'Betaling med Vipps er tilgjengeleg ved kjøp av billett',
   ),
+  editPaymentMethod: _('Endre', 'Edit', 'Endre'),
 };
 
 export default PaymentMethodsTexts;
diff --git a/src/translations/screens/subscreens/PurchaseConfirmation.ts b/src/translations/screens/subscreens/PurchaseConfirmation.ts
index 338cadf0c5..bdafa225a9 100644
--- a/src/translations/screens/subscreens/PurchaseConfirmation.ts
+++ b/src/translations/screens/subscreens/PurchaseConfirmation.ts
@@ -131,6 +131,17 @@ const PurchaseConfirmationTexts = {
       'Aktivér for å velje dette kortet',
     ),
   },
+
+  paymentWithMultiplePaymentMethods: {
+    a11yLabel: (brands: string) =>
+      _(`Betal med ${brands}`, `Pay with ${brands}`, `Betal med $${brands}`),
+    a11Hint: _(
+      'Aktivér for velge disse betalingsmåtene',
+      'Activate to select these payment methods',
+      'Aktivér for å velje desse betalingsmåtane',
+    ),
+  },
+
   choosePaymentMethod: {
     text: _('Velg betalingsmåte', 'Choose payment option', 'Vel betalingsmåte'),
     a11yHint: _(
@@ -151,26 +162,12 @@ const PurchaseConfirmationTexts = {
       'Aktiver for å endre betalingsmåte',
     ),
   },
-  payWithVipps: {
-    text: _('Betal med Vipps', 'Pay with Vipps', 'Betale med Vipps'),
-  },
-  payWithVisa: {
-    text: _('Betal med Visa', 'Pay with Visa', 'Betale med Visa'),
-  },
-  payWithMasterCard: {
-    text: _(
-      'Betal med MasterCard',
-      'Pay with MasterCard',
-      'Betal med MasterCard',
-    ),
-  },
-  payWithAmex: {
-    text: _(
-      'Betal med American Express',
-      'Pay with American Express',
-      'Betal med American Express',
-    ),
+
+  payTotal: {
+    text: (total: string) =>
+      _(`Betal ${total} kr`, `Pay ${total} kr`, `Betal ${total} kr`),
   },
+
   ordinaryPricePrefix: _(`Ord. pris`, `Ord. price`, `Ord. pris`),
   ordinaryPricePrefixA11yLabel: _(
     `Ordinær pris`,
diff --git a/src/translations/screens/subscreens/SelectPaymentMethodTexts.ts b/src/translations/screens/subscreens/SelectPaymentMethodTexts.ts
index 491408f9d3..e30b1b7ca7 100644
--- a/src/translations/screens/subscreens/SelectPaymentMethodTexts.ts
+++ b/src/translations/screens/subscreens/SelectPaymentMethodTexts.ts
@@ -16,13 +16,13 @@ const SelectPaymentMethodTexts = {
       'Aktiver for å bekrefte val av betalingsmåte',
     ),
   },
-  save_payment_method_description: {
+  multiple_payment: {
+    title: _('Nytt kort', 'New card', 'Nytt kort'),
     text: _(
       'Vil du lagre bankkortet for fremtidige betalinger?',
       'Would you like to save your bank card for future payments?',
       'Vil du lagre bankkortet for framtidige betalingar?',
     ),
-
     information: _(
       'Vi lagrer kortinformasjonen i opptil 3 år.',
       'We store the card information for up to 3 years.',