feat: Better main button text on overview screen (#984)

The old text just said the total price, with no hint regarding the
effect of pressing the button. With this change the total price is
presented somewhere else on the screen, making room for a more
descriptive button text.

In addition some other small changes:
- Generally use 'kr' instead of ',–'.
- Show the VAT amount on the confirmation screen.

src/screens/Ticketing/Purchase/Confirmation/index.tsx

@@ -83,6 +83,11 @@ const Confirmation: React.FC<ConfirmationProps> = ({
     }),
   );
 
+  const vatString = (totalPrice * 0.06).toLocaleString(language, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+
   async function payWithVipps() {
     if (offerExpirationTime && totalPrice > 0) {
       if (offerExpirationTime < Date.now()) {
@@ -148,7 +153,7 @@ const Confirmation: React.FC<ConfirmationProps> = ({
                       {u.count} {getReferenceDataName(u, language)}
                     </ThemeText>
                     <ThemeText>
-                      {u.count * (u.offer.prices[0].amount_float || 0)},-
+                      {u.count * (u.offer.prices[0].amount_float || 0)} kr
                     </ThemeText>
                   </View>
                 ))}
@@ -195,7 +200,7 @@ const Confirmation: React.FC<ConfirmationProps> = ({
               {t(PurchaseConfirmationTexts.totalCost.title)}
             </ThemeText>
             <ThemeText type="label" color="secondary">
-              {t(PurchaseConfirmationTexts.totalCost.label)}
+              {t(PurchaseConfirmationTexts.totalCost.label(vatString))}
             </ThemeText>
           </View>
 

src/screens/Ticketing/Purchase/Overview/index.tsx

@@ -27,6 +27,8 @@ import {tariffZonesSummary, TariffZoneWithMetadata} from '../TariffZones';
 import useOfferState from './use-offer-state';
 import {getPurchaseFlow} from '@atb/screens/Ticketing/Purchase/utils';
 import {formatToLongDateTime} from '@atb/utils/date';
+import ThemeText from '@atb/components/text';
+import {ArrowRight} from '@atb/assets/svg/icons/navigation';
 
 export type OverviewProps = {
   navigation: DismissableStackNavigationProp<
@@ -170,18 +172,19 @@ const PurchaseOverview: React.FC<OverviewProps> = ({
               accessibilityHint: t(PurchaseOverviewTexts.tariffZones.a11yHint),
             }}
           />
+          <Sections.GenericItem>
+            <ThemeText style={styles.totalSection} type="paragraphHeadline">
+              {t(PurchaseOverviewTexts.totalPrice(totalPrice))}
+            </ThemeText>
+          </Sections.GenericItem>
         </Sections.Section>
       </View>
 
       <View style={styles.toPaymentButton}>
         <Button
           color="primary_2"
-          text={t(PurchaseOverviewTexts.primaryButton.text(totalPrice))}
+          text={t(PurchaseOverviewTexts.primaryButton)}
           disabled={isSearchingOffer || !totalPrice || !!error}
-          accessibilityLabel={t(
-            PurchaseOverviewTexts.primaryButton.a11yLabel(totalPrice),
-          )}
-          accessibilityHint={t(PurchaseOverviewTexts.primaryButton.a11yHint)}
           onPress={() => {
             navigation.navigate('Confirmation', {
               fromTariffZone,
@@ -192,6 +195,8 @@ const PurchaseOverview: React.FC<OverviewProps> = ({
               headerLeftButton: {type: 'back'},
             });
           }}
+          icon={ArrowRight}
+          iconPosition="right"
         />
       </View>
     </SafeAreaView>
@@ -266,6 +271,7 @@ const useStyles = StyleSheet.createThemeHook((theme) => ({
     marginBottom: theme.spacings.medium,
   },
   selectionLinks: {margin: theme.spacings.medium},
+  totalSection: {flex: 1, textAlign: 'center'},
   toPaymentButton: {marginHorizontal: theme.spacings.medium},
 }));
 

src/translations/screens/subscreens/PurchaseConfirmation.ts

@@ -27,7 +27,8 @@ const PurchaseConfirmationTexts = {
   },
   totalCost: {
     title: _('Totalt', 'Total'),
-    label: _('Inkl. 6% mva', 'Incl. 6% VAT'),
+    label: (vatString: string) =>
+      _(`Inkl. 6% mva (${vatString} kr)`, `Incl. 6% VAT (${vatString} kr)`),
   },
   infoText: {
     validNow: _(

src/translations/screens/subscreens/PurchaseOverview.ts

@@ -40,15 +40,8 @@ const PurchaseOverviewTexts = {
       'Activate to select ticket type',
     ),
   },
-  primaryButton: {
-    text: (totalPrice: number) =>
-      _(`Total: ${totalPrice},-`, `Total: ${totalPrice},-`),
-    a11yLabel: (totalPrice: number) =>
-      _(`Betal totalt ${totalPrice}`, `Pay a total of ${totalPrice}`),
-    a11yHint: _(
-      'Aktivér for å gå til betaling',
-      'Activate to continue to purchase',
-    ),
-  },
+  totalPrice: (totalPrice: number) =>
+    _(`Totalt: ${totalPrice} kr`, `Total: ${totalPrice} kr`),
+  primaryButton: _('Gå til betaling', 'Go to payment'),
 };
 export default PurchaseOverviewTexts;