feat: Set up streak celebration discount experiment (openedx#431)

As part of this work, the streak celebration has been migrated from a Paragon Modal to a Modal Dialog
AA-759

src/course-home/data/__snapshots__/redux.test.js.snap

@@ -59,6 +59,11 @@ Object {
           },
         ],
         "title": "Demonstration Course",
+        "verifiedMode": Object {
+          "currencySymbol": "$",
+          "price": 10,
+          "upgradeUrl": "test",
+        },
       },
     },
     "dates": Object {
@@ -347,6 +352,11 @@ Object {
           },
         ],
         "title": "Demonstration Course",
+        "verifiedMode": Object {
+          "currencySymbol": "$",
+          "price": 10,
+          "upgradeUrl": "test",
+        },
       },
     },
     "outline": Object {

src/course-home/outline-tab/widgets/UpgradeCard.test.jsx

@@ -145,7 +145,7 @@ describe('Upgrade Card', () => {
     expect(screen.getByText(/Unlock your access/s).textContent).toMatch('Unlock your access to all course activities, including graded assignments');
     expect(screen.getByText(/to course content and materials/s).textContent).toMatch('Full access to course content and materials, even after the course ends');
     expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX');
-    expect(screen.getByText(/Upgrade for/).textContent).toMatch('126.65 (149)');
+    expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)');
     expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout');
   });
 
@@ -174,7 +174,7 @@ describe('Upgrade Card', () => {
     expect(screen.getByText(/Unlock your access/s).textContent).toMatch('Unlock your access to all course activities, including graded assignments');
     expect(screen.getByText(/to course content and materials/s).textContent).toMatch('Full access to course content and materials, even after the course ends');
     expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX');
-    expect(screen.getByText(/Upgrade for/).textContent).toMatch('126.65 (149)');
+    expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)');
     expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout');
   });
 
@@ -203,7 +203,7 @@ describe('Upgrade Card', () => {
     expect(screen.getByText(/Unlock your access/s).textContent).toMatch('Unlock your access to all course activities, including graded assignments');
     expect(screen.getByText(/to course content and materials/s).textContent).toMatch('Full access to course content and materials, even after the course ends');
     expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX');
-    expect(screen.getByText(/Upgrade for/).textContent).toMatch('126.65 (149)');
+    expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)');
     expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout');
   });
 
@@ -230,7 +230,7 @@ describe('Upgrade Card', () => {
     expect(screen.getByText('5 days left')).toBeInTheDocument(); // setting the time to 12 will mean that it's slightly less than 12
     expect(screen.getByText(/You will lose all access to this course.*?on/s).textContent).toMatch('You will lose all access to this course, including any progress, on April 18.');
     expect(screen.getByText(/Upgrading your course enables you/s).textContent).toMatch('Upgrading your course enables you to pursue a verified certificate and unlocks numerous features. Learn more about the benefits of upgrading.');
-    expect(screen.getByText(/Upgrade for/).textContent).toMatch('126.65 (149)');
+    expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)');
     expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout');
   });
 });

src/generic/upgrade-button/FormattedPricing.jsx

@@ -12,9 +12,13 @@ function FormattedPricing(props) {
     verifiedMode,
   } = props;
 
+  let currencySymbol;
+  if (verifiedMode) {
+    currencySymbol = verifiedMode.currencySymbol;
+  }
+
   if (!offer) {
     const {
-      currencySymbol,
       price,
     } = verifiedMode;
     return `${currencySymbol}${price}`;
@@ -49,7 +53,7 @@ function FormattedPricing(props) {
         {intl.formatMessage(messages.srPrices, { discountedPrice, originalPrice })}
       </span>
       <span aria-hidden="true">
-        <span>{discountedPrice}</span> (<del>{originalPrice}</del>)
+        <span>{currencySymbol}{discountedPrice}</span> (<del>{currencySymbol}{originalPrice}</del>)
       </span>
     </>
   );

src/generic/upgrade-button/UpgradeButton.jsx

@@ -9,6 +9,7 @@ function UpgradeButton(props) {
   const {
     intl,
     offer,
+    variant,
     onClick,
     verifiedMode,
     ...rest
@@ -19,7 +20,7 @@ function UpgradeButton(props) {
 
   return (
     <Button
-      variant="primary"
+      variant={variant}
       href={url}
       onClick={onClick}
       {...rest}
@@ -43,6 +44,7 @@ function UpgradeButton(props) {
 UpgradeButton.defaultProps = {
   offer: null,
   onClick: null,
+  variant: 'primary',
 };
 
 UpgradeButton.propTypes = {
@@ -54,6 +56,7 @@ UpgradeButton.propTypes = {
   verifiedMode: PropTypes.shape({
     upgradeUrl: PropTypes.string.isRequired,
   }).isRequired,
+  variant: PropTypes.string,
 };
 
 export default injectIntl(UpgradeButton);

src/generic/upgrade-button/UpgradeNowButton.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import FormattedPricing from './FormattedPricing';
+
+function UpgradeNowButton(props) {
+  const {
+    intl,
+    offer,
+    variant,
+    onClick,
+    verifiedMode,
+    ...rest
+  } = props;
+
+  // Prefer offer's url in case it is ever different (though it is not at time of this writing)
+  const url = offer ? offer.upgradeUrl : verifiedMode.upgradeUrl;
+
+  return (
+    <Button
+      variant={variant}
+      href={url}
+      onClick={onClick}
+      {...rest}
+    >
+      <FormattedMessage
+        id="learning.upgradeNowButton.buttonText"
+        defaultMessage="Upgrade now for {pricing}"
+        values={{
+          pricing: (
+            <FormattedPricing
+              offer={offer}
+              verifiedMode={verifiedMode}
+            />
+          ),
+        }}
+      />
+    </Button>
+  );
+}
+
+UpgradeNowButton.defaultProps = {
+  offer: null,
+  onClick: null,
+  variant: 'primary',
+};
+
+UpgradeNowButton.propTypes = {
+  intl: intlShape.isRequired,
+  offer: PropTypes.shape({
+    upgradeUrl: PropTypes.string.isRequired,
+  }),
+  onClick: PropTypes.func,
+  verifiedMode: PropTypes.shape({
+    upgradeUrl: PropTypes.string.isRequired,
+  }).isRequired,
+  variant: PropTypes.string,
+};
+
+export default injectIntl(UpgradeNowButton);

src/generic/upgrade-button/index.js

@@ -1,7 +1,9 @@
 import FormattedPricing from './FormattedPricing';
 import UpgradeButton from './UpgradeButton';
+import UpgradeNowButton from './UpgradeNowButton';
 
 export {
   FormattedPricing,
   UpgradeButton,
+  UpgradeNowButton,
 };

src/setupTest.js

@@ -36,6 +36,12 @@ window.getComputedStyle = jest.fn(() => ({
   getPropertyValue: jest.fn(),
 }));
 
+// Mock Intersection Observer which is unavailable in the context of a test.
+global.IntersectionObserver = jest.fn(function mockIntersectionObserver() {
+  this.observe = jest.fn();
+  this.disconnect = jest.fn();
+});
+
 // Mock media queries because any component that uses `react-break` for responsive breakpoints will
 // run into `TypeError: window.matchMedia is not a function`. This avoids that for all of our tests now.
 Object.defineProperty(window, 'matchMedia', {

src/shared/data/__factories__/courseMetadataBase.factory.js

@@ -12,6 +12,11 @@ export default new Factory()
     original_user_is_staff: false,
     number: 'DemoX',
     org: 'edX',
+    verifiedMode: {
+      upgradeUrl: 'test',
+      price: 10,
+      currencySymbol: '$',
+    },
   })
   .attr(
     'tabs', ['id', 'host'], (id, host) => {