feat: Only request value code onPress, handle error (#4569) (#4571)

* Only request value code onPress, handle error

* typo

* Use standard retry text

* Refactor to use mutation

* Use mutateAsync instead of onSuccess

src/mobility/components/OperatorActionButton.tsx

@@ -1,14 +1,15 @@
 import {useAnalytics} from '@atb/analytics';
 import {getTextForLanguage, useTranslation} from '@atb/translations';
 import {useAppMissingAlert} from '@atb/mobility/use-app-missing-alert';
-import React from 'react';
+import React, {useCallback} from 'react';
 import {Button} from '@atb/components/button';
 import {MobilityTexts} from '@atb/translations/screens/subscreens/MobilityTexts';
 import {OperatorBenefitType} from '@atb-as/config-specs/lib/mobility-operators';
 import {ExternalLink} from '@atb/assets/svg/mono-icons/navigation';
 import {ActivityIndicator, Linking} from 'react-native';
-import {useValueCodeQuery} from '@atb/mobility/queries/use-value-code-query';
+import {useValueCodeMutation} from '@atb/mobility/queries/use-value-code-mutation';
 import {useIsEligibleForBenefit} from '@atb/mobility/use-is-eligible-for-benefit';
+import {MessageInfoBox} from '@atb/components/message-info-box';
 
 type OperatorActionButtonProps = {
   operatorId: string | undefined;
@@ -111,17 +112,38 @@ const OperatorActionButtonWithValueCode = ({
   buttonOnPress,
   buttonText,
 }: OperatorActionButtonWithValueCodeProps) => {
-  const {data: valueCode, isLoading: isLoadingValueCode} =
-    useValueCodeQuery(operatorId);
+  const {t} = useTranslation();
 
-  if (isLoadingValueCode) {
+  const {
+    mutateAsync: fetchValueCode,
+    isLoading: isFetchingValueCode,
+    isError: isFetchingValueCodeError,
+  } = useValueCodeMutation(operatorId);
+
+  const appSwitchButtonOnPress = useCallback(async () => {
+    const valueCode = await fetchValueCode();
+    valueCode && buttonOnPress(valueCode);
+  }, [buttonOnPress, fetchValueCode]);
+
+  if (isFetchingValueCode) {
     return <ActivityIndicator />;
+  } else if (isFetchingValueCodeError) {
+    return (
+      <MessageInfoBox
+        type="error"
+        title={t(MobilityTexts.errorLoadingValueCode.title)}
+        message={t(MobilityTexts.errorLoadingValueCode.text)}
+        onPressConfig={{
+          action: appSwitchButtonOnPress,
+          text: t(MobilityTexts.errorLoadingValueCode.retry),
+        }}
+      />
+    );
   }
 
   return (
     <AppSwitchButton
-      // would be nice to handle invalid valueCode as well here at some point
-      buttonOnPress={() => valueCode && buttonOnPress(valueCode)}
+      buttonOnPress={appSwitchButtonOnPress}
       buttonText={buttonText}
     />
   );

src/mobility/queries/use-value-code-mutation.tsx

@@ -0,0 +1,11 @@
+import {useMutation} from '@tanstack/react-query';
+import {getValueCode} from '@atb/mobility/api/api';
+import {useAuthState} from '@atb/auth';
+
+export const useValueCodeMutation = (operatorId: string | undefined) => {
+  const {userId} = useAuthState();
+  return useMutation({
+    mutationKey: ['mobilityValueCode', userId, operatorId],
+    mutationFn: () => getValueCode(operatorId),
+  });
+};

src/translations/screens/subscreens/MobilityTexts.ts

@@ -93,6 +93,19 @@ export const MobilityTexts = {
     'Activate to show in map',
     'Aktiver for å sjå i kart',
   ),
+  errorLoadingValueCode: {
+    title: _(
+      'Henting av verdikode feilet',
+      'Fetching value code failed',
+      'Henting av verdikode feila',
+    ),
+    text: _(
+      'Et problem oppstod ved henting av verdikode. Denne er nødvendig for å få med fordelen over til den andre appen.',
+      'A problem occured while fetching the value code. This is required to get the benefit in the other app.',
+      'Et problem oppstod ved henting av verdikode. Denne er nødvendig for å få med fordelen over til den andre appen.',
+    ),
+    retry: _('Prøv på nytt', 'Try again', `Prøv på nytt`),
+  },
 };
 
 export const ScooterTexts = {