fix(storybook): add missing AppLocalizationProvider

Because:

* We want all our Storybook components to load correctly.

This commit:

* Corrects localization wrapper to fix error.

Closes FXA-8393

packages/fxa-payments-server/src/components/NewUserEmailForm/index.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { NewUserEmailForm } from './index';
 import { Meta } from '@storybook/react';
+import AppLocalizationProvider from 'fxa-react/lib/AppLocalizationProvider';
 
 export default {
   title: 'components/NewUserEmailForm',
@@ -55,11 +56,16 @@ const storyWithContext = (
   newsletterLabelTextCode?: string
 ) => {
   const story = () => (
-    <WrapNewUserEmailForm
-      accountExistsReturnValue={accountExistsReturnValue}
-      invalidDomain={invalidDomain}
-      newsletterLabelTextCode={newsletterLabelTextCode}
-    />
+    <AppLocalizationProvider
+      baseDir="./locales"
+      userLocales={navigator.languages}
+    >
+      <WrapNewUserEmailForm
+        accountExistsReturnValue={accountExistsReturnValue}
+        invalidDomain={invalidDomain}
+        newsletterLabelTextCode={newsletterLabelTextCode}
+      />
+    </AppLocalizationProvider>
   );
 
   if (storyName) story.storyName = storyName;

packages/fxa-payments-server/src/components/PayPalButton/index.stories.tsx

@@ -6,6 +6,7 @@ import { CUSTOMER, PLAN } from '../../lib/mock-data';
 import { PickPartial } from '../../lib/types';
 import { Meta } from '@storybook/react';
 import { CheckoutType } from 'fxa-shared/subscriptions/types';
+import AppLocalizationProvider from 'fxa-react/lib/AppLocalizationProvider';
 
 export default {
   title: 'Routes/Product/PaypalButton',
@@ -61,7 +62,15 @@ const Subject = ({
 
 const storyWithContext = (storyName?: string, disabled?: boolean) => {
   const story = () => (
-    <Subject disabled={disabled} checkoutType={CheckoutType.WITHOUT_ACCOUNT} />
+    <AppLocalizationProvider
+      baseDir="./locales"
+      userLocales={navigator.languages}
+    >
+      <Subject
+        disabled={disabled}
+        checkoutType={CheckoutType.WITHOUT_ACCOUNT}
+      />
+    </AppLocalizationProvider>
   );
   if (storyName) story.storyName = storyName;
   return story;

packages/fxa-payments-server/src/components/PaymentProcessing/index.stories.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import { PaymentProcessing } from '.';
 import { Meta } from '@storybook/react';
+import AppLocalizationProvider from 'fxa-react/lib/AppLocalizationProvider';
 
 export default {
   title: 'Components/PaymentProcessing',
   component: PaymentProcessing,
 } as Meta;
 
-const storyWithContext = (storyName?: string) => {
-  const story = () => <PaymentProcessing provider="paypal" />;
-
-  if (storyName) story.storyName = storyName;
-  return story;
+export const Default = () => {
+  return (
+    <AppLocalizationProvider
+      baseDir="./locales"
+      userLocales={navigator.languages}
+    >
+      <PaymentProcessing provider="paypal" />
+    </AppLocalizationProvider>
+  );
 };
-
-export const Default = storyWithContext('default');

packages/fxa-payments-server/src/routes/Product/AcceptedCards/index.stories.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import { AcceptedCards } from './index';
 import { Meta } from '@storybook/react';
+import AppLocalizationProvider from 'fxa-react/lib/AppLocalizationProvider';
 
 export default {
   title: 'routes/Product/AcceptedCards',
   component: AcceptedCards,
 } as Meta;
 
-const storyWithContext = (storyName?: string) => {
-  const story = () => <AcceptedCards />
-
-  if (storyName) story.storyName = storyName;
-  return story;
-}
-
-export const Default = storyWithContext('default');
+export const Default = () => {
+  return (
+    <AppLocalizationProvider
+      baseDir="./locales"
+      userLocales={navigator.languages}
+    >
+      <AcceptedCards />
+    </AppLocalizationProvider>
+  );
+};