feat(content): update support form for product config

Because:

* Need to update the subscription support form to use the firestore
  product configuration if the feature flag is enabled.

This commit:

* Uses product configuration if plan has configuration set, otherwise it
  continues to use the product metadata.

Closes #10359

packages/fxa-shared/subscriptions/metadata.ts

@@ -144,7 +144,7 @@ export const productDetailsFromPlan = (
  * Parse out the 'support:app:' metadata into a dictionary keyed by the product
  * id.  This is used for the app/service select on the support form.
  *
- * TODO update to handle Firestore product config feature flag in FXA-3956
+ * TODO - Remove metadata logic once Firestore product config is used.
  */
 export const getProductSupportApps =
   (subscriptions: MozillaSubscription[]) => (plans: AbbrevPlan[]) => {
@@ -152,20 +152,28 @@ export const getProductSupportApps =
     return plans.reduce((acc: { [keys: string]: string[] }, p) => {
       if (
         !acc[p.product_id] &&
-        subscriptions.some((s) => p.product_id === s.product_id) &&
-        Object.keys(p.product_metadata).some((k) =>
-          k.startsWith(metadataPrefix)
-        )
+        subscriptions.some((s) => p.product_id === s.product_id)
       ) {
-        acc[p.product_id] = Object.entries(p.product_metadata).reduce(
-          (apps: string[], [k, v]) => {
-            if (k.startsWith(metadataPrefix)) {
-              apps.push(v);
-            }
-            return apps;
-          },
-          []
-        );
+        // Only if p.configuration, the Firestore product config, is not
+        // provided at all, should we read the data from product_metadata.
+        if (p.configuration?.support?.app) {
+          acc[p.product_id] = p.configuration?.support?.app;
+        } else if (
+          !p.configuration &&
+          Object.keys(p.product_metadata).some((k) =>
+            k.startsWith(metadataPrefix)
+          )
+        ) {
+          acc[p.product_id] = Object.entries(p.product_metadata).reduce(
+            (apps: string[], [k, v]) => {
+              if (k.startsWith(metadataPrefix)) {
+                apps.push(v);
+              }
+              return apps;
+            },
+            []
+          );
+        }
       }
       return acc;
     }, {});

packages/fxa-shared/test/subscriptions/metadata.ts

@@ -13,6 +13,7 @@ import {
   productDetailsFromPlan,
   getProductSupportApps,
 } from '../../subscriptions/metadata';
+import { PlanConfigurationDtoT } from '../../dto/auth/payments/plan-configuration';
 
 const NULL_METADATA = {
   productSet: null,
@@ -279,6 +280,31 @@ describe('subscriptions/metadata', () => {
         configuration: null,
       },
     ];
+    const planConfiguration: PlanConfigurationDtoT[] = [
+      {
+        stripePriceId: 'price_1KGUhNBVqmGyQTMai6nMkbsq',
+        urls: {
+          webIcon:
+            'https://accounts-static.cdn.mozilla.net/legal/mozilla_vpn_tos',
+          termsOfService:
+            'https://accounts-static.cdn.mozilla.net/legal/mozilla_vpn_tos',
+          privacyNoticeDownload:
+            'https://accounts-static.cdn.mozilla.net/legal/mozilla_vpn_tos',
+          successActionButton: 'https://foxkeh.com/buttons/',
+          termsOfServiceDownload:
+            'https://accounts-static.cdn.mozilla.net/legal/mozilla_vpn_tos',
+          privacyNotice:
+            'https://accounts-static.cdn.mozilla.net/legal/mozilla_vpn_tos',
+          cancellationSurvey:
+            'https://accounts-static.cdn.mozilla.net/legal/mozilla_cancellation_survey_url',
+        },
+        uiContent: { details: ['Testing Foxkeh', 'Product Detail line 2'] },
+        styles: {},
+        locales: {},
+        support: {},
+        productSet: 'foxkeh',
+      },
+    ];
 
     it('returns an empty dictionary when there are no matching products', () => {
       const actual = getProductSupportApps(subscriptions)(plans);
@@ -299,7 +325,7 @@ describe('subscriptions/metadata', () => {
       expect(actual).to.deep.equal({});
     });
 
-    it('returns a dictionary keyed by product ids', () => {
+    it('returns, from product metadata, a dictionary keyed by product ids', () => {
       const matchingPlanNoMetadata = [
         {
           ...plans[0],
@@ -311,5 +337,36 @@ describe('subscriptions/metadata', () => {
       );
       expect(actual).to.deep.equal({ prod_GjeBkx6iQFoVgg: ['Pop!_OS'] });
     });
+
+    it('returns an empty dictionary when theres no firestore product config', () => {
+      const matchingPlanNoMetadata = [
+        {
+          ...plans[0],
+          product_id: 'prod_GjeBkx6iQFoVgg',
+          configuration: planConfiguration[0],
+        },
+      ];
+      const actual = getProductSupportApps(subscriptions)(
+        matchingPlanNoMetadata
+      );
+      expect(actual).to.deep.equal({});
+    });
+
+    it('returns, from firestore product config, a dictionary keyed by product ids', () => {
+      const matchingPlanNoMetadata = [
+        {
+          ...plans[0],
+          product_id: 'prod_GjeBkx6iQFoVgg',
+          configuration: {
+            ...planConfiguration[0],
+            support: { app: ['Bam!_OS'] },
+          },
+        },
+      ];
+      const actual = getProductSupportApps(subscriptions)(
+        matchingPlanNoMetadata
+      );
+      expect(actual).to.deep.equal({ prod_GjeBkx6iQFoVgg: ['Bam!_OS'] });
+    });
   });
 });