chore: update to paragon 17.0.0

- Drop our custom breakpoints (identical to paragon's)
- Drop our custom useWindowSize (and adapt to paragon's version
  not providing a size initially at component mount)
- Drop our dependency on react-responsive
- Drop our dependency on react-break

src/shared/streak-celebration/StreakCelebrationModal.jsx

@@ -8,9 +8,8 @@ import {
 } from '@edx/frontend-platform/i18n';
 import { Lightbulb, MoneyFilled } from '@edx/paragon/icons';
 import {
-  Alert, Icon, ModalDialog, Spinner,
+  Alert, breakpoints, Icon, ModalDialog, Spinner, useWindowSize,
 } from '@edx/paragon';
-import { layoutGenerator } from 'react-break';
 import { useDispatch } from 'react-redux';
 import { UpgradeNowButton } from '../../generic/upgrade-button';
 
@@ -69,13 +68,7 @@ function StreakModal({
   const [discountPercent, setDiscountPercent] = useState(-1);
   const queryingDiscount = discountPercent < 0;
 
-  const layout = layoutGenerator({
-    mobile: 0,
-    desktop: 575,
-  });
-
-  const OnMobile = layout.is('mobile');
-  const OnDesktop = layout.isAtLeast('desktop');
+  const wideScreen = useWindowSize().width >= breakpoints.small.minWidth;
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -169,12 +162,8 @@ function StreakModal({
       <ModalDialog.Body className="modal-body">
         <p>{intl.formatMessage(messages.streakBody)}</p>
         <p className="modal-image">
-          <OnMobile>
-            <img src={StreakMobileImage} alt="" className="img-fluid" />
-          </OnMobile>
-          <OnDesktop>
-            <img src={StreakDesktopImage} alt="" className="img-fluid" />
-          </OnDesktop>
+          {!wideScreen && <img src={StreakMobileImage} alt="" className="img-fluid" />}
+          {wideScreen && <img src={StreakDesktopImage} alt="" className="img-fluid" />}
         </p>
         { queryingDiscount && (
           <Spinner animation="border" variant="primary" role="status" />
@@ -211,29 +200,33 @@ function StreakModal({
       <ModalDialog.Footer className="modal-footer d-block">
         { !queryingDiscount && showOffer && (
           <>
-            <OnMobile>
-              <UpgradeNowButton
-                className="upgrade mb-3"
-                size="sm"
-                offer={offer}
-                variant="brand"
-                verifiedMode={mode}
-              />
-              <ModalDialog.CloseButton variant="outline-brand" className="btn-sm">
-                {intl.formatMessage(messages.streakButtonAA759)}
-              </ModalDialog.CloseButton>
-            </OnMobile>
-            <OnDesktop>
-              <UpgradeNowButton
-                className="upgrade mb-3"
-                offer={offer}
-                variant="brand"
-                verifiedMode={mode}
-              />
-              <ModalDialog.CloseButton variant="outline-brand">
-                {intl.formatMessage(messages.streakButtonAA759)}
-              </ModalDialog.CloseButton>
-            </OnDesktop>
+            {!wideScreen && (
+              <>
+                <UpgradeNowButton
+                  className="upgrade mb-3"
+                  size="sm"
+                  offer={offer}
+                  variant="brand"
+                  verifiedMode={mode}
+                />
+                <ModalDialog.CloseButton variant="outline-brand" className="btn-sm">
+                  {intl.formatMessage(messages.streakButtonAA759)}
+                </ModalDialog.CloseButton>
+              </>
+            )}
+            {wideScreen && (
+              <>
+                <UpgradeNowButton
+                  className="upgrade mb-3"
+                  offer={offer}
+                  variant="brand"
+                  verifiedMode={mode}
+                />
+                <ModalDialog.CloseButton variant="outline-brand">
+                  {intl.formatMessage(messages.streakButtonAA759)}
+                </ModalDialog.CloseButton>
+              </>
+            )}
           </>
         )}
         { !queryingDiscount && !showOffer && (

src/shared/streak-celebration/StreakCelebrationModal.test.jsx

@@ -3,6 +3,7 @@ import { Factory } from 'rosie';
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { breakpoints } from '@edx/paragon';
 import MockAdapter from 'axios-mock-adapter';
 
 import {
@@ -56,6 +57,10 @@ describe('Loaded Tab Page', () => {
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
   });
 
+  beforeEach(() => {
+    global.innerWidth = breakpoints.medium.minWidth;
+  });
+
   it('shows streak celebration modal', async () => {
     await renderModal();
 
@@ -86,22 +91,7 @@ describe('Loaded Tab Page', () => {
   });
 
   it('shows discount version of streak celebration modal when available', async () => {
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(query => {
-        const matches = !!(query === 'screen and (min-width: 575px)');
-        return {
-          matches,
-          media: query,
-          onchange: null,
-          addListener: jest.fn(), // deprecated
-          removeListener: jest.fn(), // deprecated
-          addEventListener: jest.fn(),
-          removeEventListener: jest.fn(),
-          dispatchEvent: jest.fn(),
-        };
-      }),
-    });
+    global.innerWidth = breakpoints.extraSmall.maxWidth;
     setDiscount(14);
     await renderModal();