feat(payments): Add feature flag for Coupons (#11048)

* chore(payments): add subscriptionCoupons feature flag
Because:

* We want to have a feature flag for the coupons UI

This commit:

* Adds a feature flag called subscriptionCoupons

Closes # (GH issue linked to epic so i dont want to put anything here that will close that ticket)

packages/fxa-auth-server/config/index.ts

@@ -841,6 +841,14 @@ const conf = convict({
       env: 'SUBSCRIPTIONS_ENABLED',
       default: false,
     },
+    coupons: {
+      enabled: {
+        doc: 'feature flag for enabling coupons',
+        default: false,
+        env: 'COUPONS_ENABLED',
+        format: Boolean,
+      },
+    },
     paymentsServer: {
       url: {
         doc: 'The url of the corresponding fxa-payments-server instance',

packages/fxa-payments-server/.storybook/components/MockApp.tsx

@@ -24,6 +24,9 @@ type MockAppProps = {
 export const defaultAppContextValue: AppContextType = {
   config: {
     ...config,
+    featureFlags: {
+      subscriptionCoupons: true,
+    },
     productRedirectURLs: {
       product_8675309: 'https://example.com/product',
     },

packages/fxa-payments-server/server/config/index.js

@@ -12,7 +12,14 @@ convict.addFormats(require('convict-format-with-moment'));
 convict.addFormats(require('convict-format-with-validator'));
 
 const conf = convict({
-  featureFlags: {},
+  featureFlags: {
+    subscriptionCoupons: {
+      default: false,
+      doc: 'Whether to show the coupon UI',
+      env: 'FEATURE_SHOW_COUPON',
+      format: Boolean,
+    },
+  },
   amplitude: {
     enabled: {
       default: true,

packages/fxa-payments-server/src/routes/Checkout/index.test.tsx

@@ -207,6 +207,20 @@ describe('routes/Checkout', () => {
 
     const termsAndPrivacyEl = getByTestId('terms-and-privacy-component');
     expect(termsAndPrivacyEl).toBeInTheDocument();
+
+    expect(document.getElementById('coupon-container')).not.toBeInTheDocument();
+  });
+
+  it('renders as expected with coupons enabled', async () => {
+    updateConfig({
+      featureFlags: {
+        subscriptionCoupons: true,
+      },
+    });
+
+    const { findByTestId } = render(<Subject planId="testo" />);
+    const element = await findByTestId('coupon-container');
+    expect(element).toBeInTheDocument();
   });
 
   it('displays an error with invalid product ID', async () => {

packages/fxa-payments-server/src/routes/Checkout/index.tsx

@@ -431,6 +431,10 @@ export const Checkout = ({
             showExpandButton: isMobile,
           }}
         />
+        {config.featureFlags.subscriptionCoupons ? (
+          // To be updated in issue #7097
+          <div data-testid="coupon-container"></div>
+        ) : null}
       </div>
     </>
   );