Merge pull request #19520 from mozilla/FXA-12475

feat(pocket): Remove Pocket front-end code

Author: LZoog

libs/shared/assets/src/images/pocket-text-logo.svg

@@ -48,7 +48,6 @@
 -product-mozilla-monitor-short = Monitor
 -product-firefox-relay = Firefox Relay
 -product-firefox-relay-short = Relay
--product-pocket = Pocket
 
 -brand-apple = Apple
 -brand-apple-pay = Apple Pay

libs/shared/l10n/src/lib/branding.ftl

@@ -70,7 +70,8 @@ export const WithSeparateSubheadingDefaultServiceName = storyWithProps(
     headingText: MOCK_HEADING,
     headingTextFtlId: MOCK_DEFAULT_HEADING_FTL_ID,
     subheadingWithDefaultServiceFtlId: MOCK_DEFAULT_HEADING_FTL_ID,
-    subheadingWithLogoFtlId: MOCK_DEFAULT_HEADING_FTL_ID,
+    subheadingWithCustomServiceFtlId: MOCK_CUSTOM_HEADING_FTL_ID,
+    serviceName: MozServices.Default,
   },
   'Separate l10n for subheading, with default service'
 );
@@ -80,19 +81,8 @@ export const WithSeparateSubheadingCustomServiceName = storyWithProps(
     serviceName: MOCK_SERVICE_NAME,
     headingText: MOCK_HEADING,
     headingTextFtlId: MOCK_DEFAULT_HEADING_FTL_ID,
+    subheadingWithDefaultServiceFtlId: MOCK_DEFAULT_HEADING_FTL_ID,
     subheadingWithCustomServiceFtlId: MOCK_CUSTOM_HEADING_FTL_ID,
-    subheadingWithLogoFtlId: MOCK_CUSTOM_HEADING_FTL_ID,
   },
   'Separate l10n for subheading, with custom service name'
 );
-
-export const WithSeparateSubheadingLogo = storyWithProps(
-  {
-    serviceName: MozServices.Pocket,
-    headingText: MOCK_HEADING,
-    headingTextFtlId: MOCK_DEFAULT_HEADING_FTL_ID,
-    subheadingWithCustomServiceFtlId: MOCK_CUSTOM_HEADING_FTL_ID,
-    subheadingWithLogoFtlId: MOCK_DEFAULT_HEADING_FTL_ID,
-  },
-  'Separate l10n for subheading, with logo'
-);

packages/fxa-settings/src/components/CardHeader/index.stories.tsx

@@ -6,7 +6,6 @@ import React from 'react';
 import { ReactElement } from 'react';
 import { FtlMsg } from 'fxa-react/lib/utils';
 import { MozServices } from '../../lib/types';
-import PocketTextLogo from '@fxa/shared/assets/images/pocket-text-logo.svg';
 
 // NOTE: this component is heavily tested in components that use it and has complete line
 // coverage. However, we may file an issue out of FXA-6589 to add more explicit coverage.
@@ -40,7 +39,6 @@ interface CardHeaderSeparateSubheadingProps extends CardHeaderRequiredProps {
   headingTextFtlId: string;
   subheadingWithDefaultServiceFtlId: string;
   subheadingWithCustomServiceFtlId: string;
-  subheadingWithLogoFtlId?: string;
   serviceName: MozServices;
 }
 
@@ -109,9 +107,7 @@ function isDefaultService(
   );
 }
 
-function isCmsHeader(
-  props: CardHeaderProps
-): props is CardHeaderCmsProps {
+function isCmsHeader(props: CardHeaderProps): props is CardHeaderCmsProps {
   return (
     (props as CardHeaderCmsProps).cmsLogoUrl !== undefined ||
     (props as CardHeaderCmsProps).cmsLogoAltText !== undefined ||
@@ -131,33 +127,6 @@ function isBasicWithCustomSubheading(
   );
 }
 
-const serviceLogos: {
-  [key in MozServices]?: ReactElement;
-} = {
-  // This is not inlined because text inside of an SVG can have rendering problems
-  [MozServices.Pocket]: (
-    <img
-      src={PocketTextLogo}
-      alt={MozServices.Pocket}
-      className="inline w-22 ps-0.5"
-    />
-  ),
-};
-
-// TODO in FXA-8290: do we want to check against these unique client IDs instead
-// of serviceName? We have a service names enum, but in theory an RP could change their
-// service name and we'd have to update the enum, vs these that don't change.
-// export const POCKET_CLIENTIDS = [
-//   '7377719276ad44ee', // pocket-mobile
-//   '749818d3f2e7857f', // pocket-web
-// ];
-// This also applies to Monitor
-// export const MONITOR_CLIENTIDS = [
-// '802d56ef2a9af9fa', // Mozilla Monitor
-// '946bfd23df91404c', // Mozilla Monitor stage
-// 'edd29a80019d61a1', // Mozilla Monitor local dev
-// };
-
 const CardHeader = (props: CardHeaderProps) => {
   const { headingText } = props;
 
@@ -173,9 +142,7 @@ const CardHeader = (props: CardHeaderProps) => {
           />
         )}
         <h1 className="card-header">{cmsHeadline}</h1>
-        <p className="card-subheader">
-          {cmsDescription}
-        </p>
+        <p className="card-subheader">{cmsDescription}</p>
       </>
     );
   }
@@ -221,25 +188,13 @@ const CardHeader = (props: CardHeaderProps) => {
   if (isSeparateSubheading(props)) {
     const { serviceName = MozServices.Default } = props;
     const isDefaultService = isDefaultServiceName(serviceName);
-    const logo = serviceLogos[serviceName];
-    const logoElem = <span>{logo}</span>;
 
     const subheadingFtlMsgProps = {
-      // If a logo corresponds to the service name and a logo FTL ID is provided, use that FTL ID.
-      // Otherwise, if the service is the default service, use the default service FTL ID.
-      // If non-default, use the custom service FTL ID.
-      id:
-        logo && props.subheadingWithLogoFtlId
-          ? props.subheadingWithLogoFtlId
-          : isDefaultService
-          ? props.subheadingWithDefaultServiceFtlId
-          : props.subheadingWithCustomServiceFtlId,
-      // include `vars={{ serviceName }}` if non-default and no logo
-      ...(!isDefaultService && !logo && { vars: { serviceName } }),
-      // include `elems={{ span: logo }}` if serviceName is given a logo in serviceLogos
-      ...(logo && {
-        elems: { span: logo },
-      }),
+      id: isDefaultService
+        ? props.subheadingWithDefaultServiceFtlId
+        : props.subheadingWithCustomServiceFtlId,
+      // include `vars={{ serviceName }}` if non-default
+      ...(!isDefaultService && { vars: { serviceName } }),
     };
 
     return (
@@ -248,9 +203,7 @@ const CardHeader = (props: CardHeaderProps) => {
           <FtlMsg id={props.headingTextFtlId}>{headingText}</FtlMsg>
         </h1>
         <FtlMsg {...subheadingFtlMsgProps}>
-          <p className="card-subheader">
-            Continue to {logo ? logoElem : serviceName}
-          </p>
+          <p className="card-subheader">Continue to {serviceName}</p>
         </FtlMsg>
       </>
     );

packages/fxa-settings/src/components/CardHeader/index.tsx

@@ -5,7 +5,6 @@ bento-menu-tagline = More products from { -brand-mozilla } that protect your pri
 
 bento-menu-vpn-2 = { -product-mozilla-vpn }
 bento-menu-monitor-3 = { -product-mozilla-monitor }
-bento-menu-pocket-2 = { -product-pocket }
 bento-menu-firefox-relay-2 = { -product-firefox-relay }
 bento-menu-firefox-desktop = { -brand-firefox } Browser for Desktop
 bento-menu-firefox-mobile = { -brand-firefox } Browser for Mobile

packages/fxa-settings/src/components/Settings/BentoMenu/en.ftl

@@ -19,7 +19,6 @@ jest.mock('../../../lib/glean', () => ({
       bentoFirefoxDesktop: jest.fn(),
       bentoFirefoxMobile: jest.fn(),
       bentoMonitor: jest.fn(),
-      bentoPocket: jest.fn(),
       bentoRelay: jest.fn(),
       bentoVpn: jest.fn(),
     },
@@ -83,10 +82,6 @@ describe('BentoMenu', () => {
       'href',
       'https://monitor.mozilla.org/?utm_source=moz-account&utm_medium=mozilla-websites&utm_term=bento&utm_content=monitor&utm_campaign=permanent'
     );
-    expect(screen.getByRole('link', { name: /Pocket/ })).toHaveAttribute(
-      'href',
-      'https://app.adjust.com/hr2n0yz?redirect_macos=https%3A%2F%2Fgetpocket.com%2Fpocket-and-firefox&redirect_windows=https%3A%2F%2Fgetpocket.com%2Fpocket-and-firefox&engagement_type=fallback_click&fallback=https%3A%2F%2Fgetpocket.com%2Ffirefox_learnmore%3Fsrc%3Dff_bento&fallback_lp=https%3A%2F%2Fapps.apple.com%2Fapp%2Fpocket-save-read-grow%2Fid309601447'
-    );
     expect(screen.getByRole('link', { name: /Firefox Relay/ })).toHaveAttribute(
       'href',
       'https://relay.firefox.com/?utm_source=moz-account&utm_medium=mozilla-websites&utm_term=bento&utm_content=relay&utm_campaign=permanent'
@@ -187,19 +182,6 @@ describe('BentoMenu', () => {
       });
     });
 
-    it('logs metrics event for Pocket link click', async () => {
-      renderWithLocalizationProvider(<BentoMenu />);
-
-      userEvent.click(screen.getByRole('button', { name: /Mozilla products/ }));
-      await waitFor(() => {
-        expect(screen.getByRole('link', { name: /Pocket/ })).toBeVisible();
-      });
-      userEvent.click(screen.getByRole('link', { name: /Pocket/ }));
-      await waitFor(() => {
-        expect(GleanMetrics.accountPref.bentoPocket).toHaveBeenCalledTimes(1);
-      });
-    });
-
     it('logs metrics event for Firefox Relay link click', async () => {
       renderWithLocalizationProvider(<BentoMenu />);
 

packages/fxa-settings/src/components/Settings/BentoMenu/index.test.tsx

@@ -9,7 +9,6 @@ import LinkExternal from 'fxa-react/components/LinkExternal';
 import { useEscKeydownEffect } from '../../../lib/hooks';
 
 import monitorIcon from './monitor.svg';
-import pocketIcon from '@fxa/shared/assets/images/pocket.svg';
 import desktopIcon from './desktop.svg';
 import mobileIcon from './mobile.svg';
 import relayIcon from './relay.svg';
@@ -220,19 +219,6 @@ export const BentoMenu = () => {
                       <FtlMsg id="bento-menu-vpn-2">Mozilla VPN</FtlMsg>
                     </LinkExternal>
                   </li>
-                  <li>
-                    <LinkExternal
-                      data-testid="pocket-link"
-                      href="https://app.adjust.com/hr2n0yz?redirect_macos=https%3A%2F%2Fgetpocket.com%2Fpocket-and-firefox&redirect_windows=https%3A%2F%2Fgetpocket.com%2Fpocket-and-firefox&engagement_type=fallback_click&fallback=https%3A%2F%2Fgetpocket.com%2Ffirefox_learnmore%3Fsrc%3Dff_bento&fallback_lp=https%3A%2F%2Fapps.apple.com%2Fapp%2Fpocket-save-read-grow%2Fid309601447"
-                      className="block p-2 ps-6 hover:bg-grey-100 focus-visible:rounded-sm focus-visible-default"
-                      onClick={() => GleanMetrics.accountPref.bentoPocket()}
-                    >
-                      <div className={iconClassNames}>
-                        <img src={pocketIcon} alt="" />
-                      </div>
-                      <FtlMsg id="bento-menu-pocket-2">Pocket</FtlMsg>
-                    </LinkExternal>
-                  </li>
                 </ul>
               </div>
               <LinkExternal

packages/fxa-settings/src/components/Settings/BentoMenu/index.tsx

@@ -132,13 +132,6 @@ describe('Connected Services', () => {
     expect(groupedByName['Mozilla Monitor'].length).toEqual(2);
   });
 
-  it('should show the pocket icon and link', async () => {
-    await getIconAndServiceLink('Pocket', 'pocket-icon').then((result) => {
-      expect(result.icon).toBeTruthy();
-      expect(result.link).toHaveAttribute('href', 'https://getpocket.com/');
-    });
-  });
-
   it('should show the monitor icon and link', async () => {
     await getIconAndServiceLink('Mozilla Monitor', 'monitor-icon').then(
       (result) => {

packages/fxa-settings/src/components/Settings/ConnectedServices/index.test.tsx

@@ -12,16 +12,15 @@ delete-account-product-mozilla-account = { -product-mozilla-account }
 delete-account-product-mozilla-vpn = { -product-mozilla-vpn }
 delete-account-product-mdn-plus = { -product-mdn-plus }
 delete-account-product-mozilla-hubs = { -product-mozilla-hubs }
-delete-account-product-pocket = { -product-pocket }
 delete-account-product-mozilla-monitor = { -product-mozilla-monitor }
 delete-account-product-firefox-relay = { -product-firefox-relay }
 delete-account-product-firefox-sync = Syncing { -brand-firefox } data
 delete-account-product-firefox-addons = { -brand-firefox } Add-ons
 
 delete-account-acknowledge = Please acknowledge that by deleting your account:
 
-delete-account-chk-box-1-v3 =
- .label = Any paid subscriptions you have will be canceled (Except { -product-pocket })
+delete-account-chk-box-1-v4 =
+ .label = Any paid subscriptions you have will be canceled
 delete-account-chk-box-2 =
  .label = You may lose saved information and features within { -brand-mozilla } products
 delete-account-chk-box-3 =
@@ -34,8 +33,6 @@ delete-account-continue-button = Continue
 
 delete-account-password-input =
  .label = Enter password
-pocket-delete-notice = If you subscribe to Pocket Premium, please make sure that you <a>cancel your subscription</a> before deleting your account.
-pocket-delete-notice-marketing = To stop receiving marketing emails from Mozilla Corporation and Mozilla Foundation, you must <a>request deletion of your marketing data.</a>
 
 delete-account-cancel-button = Cancel
 delete-account-delete-button-2 = Delete

packages/fxa-settings/src/components/Settings/PageDeleteAccount/en.ftl

@@ -100,7 +100,6 @@ describe('PageDeleteAccount', () => {
         "Mozilla Monitor",
         "MDN Plus",
         "Mozilla Hubs",
-        "Pocket",
       ]
     `);
   });