diff --git a/src/courseware/course/sequence/Unit.jsx b/src/courseware/course/sequence/Unit.jsx index 17bce39e..7a2e785a 100644 --- a/src/courseware/course/sequence/Unit.jsx +++ b/src/courseware/course/sequence/Unit.jsx @@ -18,6 +18,7 @@ import { processEvent } from '../../../course-home/data/thunks'; import { fetchCourse } from '../../data/thunks'; const LockPaywall = React.lazy(() => import('./lock-paywall')); +const LockPaywallValuePropExperiment = React.lazy(() => import('./lock-paywall-value-prop')); /** * We discovered an error in Firefox where - upon iframe load - React would cease to call any @@ -66,6 +67,14 @@ function Unit({ const [iframeHeight, setIframeHeight] = useState(0); const [hasLoaded, setHasLoaded] = useState(false); const [modalOptions, setModalOptions] = useState({ open: false }); + const [rev1512ValuePropExperimentLock, setRev1512ValuePropExperimentLock] = useState( + window.rev1512ValuePropExperimentLock, + ); + /* TODO: The code block below + code referencing it should be deleted after REV1512 value prop experiment */ + window.rev1512ToggleValuePropPaywallLock = () => { + window.rev1512ValuePropExperimentLock = !rev1512ValuePropExperimentLock; + setRev1512ValuePropExperimentLock(!rev1512ValuePropExperimentLock); + }; const unit = useModel('units', id); const course = useModel('courses', courseId); @@ -125,9 +134,9 @@ function Unit({ /> )} > - + {(rev1512ValuePropExperimentLock) + ? + : } )} {!hasLoaded && ( diff --git a/src/courseware/course/sequence/lock-paywall-value-prop/LockPaywall.jsx b/src/courseware/course/sequence/lock-paywall-value-prop/LockPaywall.jsx new file mode 100644 index 00000000..19893d99 --- /dev/null +++ b/src/courseware/course/sequence/lock-paywall-value-prop/LockPaywall.jsx @@ -0,0 +1,235 @@ +/* TODO: This file should be deleted after REV1512 value prop experiment */ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faLock } from '@fortawesome/free-solid-svg-icons'; +import { faCheckCircle } from '@fortawesome/free-regular-svg-icons'; +import { + injectIntl, getLocale, +} from '@edx/frontend-platform/i18n'; +import { Button } from '@edx/paragon'; +import classNames from 'classnames'; + +import VerifiedCert from '../../../../generic/assets/edX_verified_certificate.png'; +import { useModel } from '../../../../generic/model-store'; +import './LockPaywall.scss'; + +function LockPaywall({ + courseId, +}) { + const course = useModel('courses', courseId); + const { + verifiedMode, + } = course; + if (!verifiedMode) { + return null; + } + const { + currencySymbol, + price, + upgradeUrl, + } = verifiedMode; + + const isSpanish = getLocale() === 'es-419'; + + let upgradeButtonText; + + if (document.querySelector('.price.discount') !== null) { + let discountPrice = document.querySelector('.price.discount').textContent; + if (discountPrice !== null) { + discountPrice = discountPrice.replace(/[^0-9.]/g, ''); + } + + if (isSpanish) { + upgradeButtonText = ( + <> + + Cómpralo por {currencySymbol}{discountPrice} + + + ({currencySymbol}{price}) + + + ); + } else { + upgradeButtonText = ( + <> + + Upgrade for {currencySymbol}{discountPrice} + + + ({currencySymbol}{price}) + + + ); + } + } else if (isSpanish) { + upgradeButtonText = ( + <> + + Cómpralo por {currencySymbol}{price} + + + ); + } else { + upgradeButtonText = ( + <> + + Upgrade for {currencySymbol}{price} + + + ); + } + + const circleCheckIcon = ( +