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

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

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,
 };