From ce5b976f5edb06482a70ba24c4af2d16dfb2c563 Mon Sep 17 00:00:00 2001
From: Matthew Piatetsky <mpiatetsky@edx.org>
Date: Mon, 3 Jun 2019 17:06:23 -0400
Subject: [PATCH] update local currency code

---
 .../course_modes/tests/test_views.py          |  7 +++--
 .../course_modes/_upgrade_button.html         | 25 +++++++++++++++
 lms/templates/course_modes/choose.html        | 26 ++--------------
 .../fixtures/course-currency-fragment.html    |  3 +-
 .../static/course_experience/js/currency.js   | 31 +++++++++++++------
 .../js/spec/Currency_spec.js                  |  9 ++++--
 .../course_modes/_upgrade_button.html         | 25 +++++++++++++++
 .../lms/templates/course_modes/choose.html    | 26 ++--------------
 8 files changed, 88 insertions(+), 64 deletions(-)
 create mode 100644 lms/templates/course_modes/_upgrade_button.html
 create mode 100644 themes/edx.org/lms/templates/course_modes/_upgrade_button.html

diff --git a/common/djangoapps/course_modes/tests/test_views.py b/common/djangoapps/course_modes/tests/test_views.py
index 78a4ea34fe..d267da32de 100644
--- a/common/djangoapps/course_modes/tests/test_views.py
+++ b/common/djangoapps/course_modes/tests/test_views.py
@@ -422,9 +422,10 @@ class CourseModeViewTest(CatalogIntegrationMixin, UrlResetMixin, ModuleStoreTest
         bannerText = u'''<div class="first-purchase-offer-banner"><span class="first-purchase-offer-banner-bold">
                      15% off your first upgrade.</span> Discount automatically applied.</div>'''
         button = u'''<button type="submit" name="verified_mode">
-                         Pursue a Verified Certificate ($8.50 USD
-                             <del>$10 USD</del>)
-                     </button>'''
+                    <span>Pursue a Verified Certificate</span>
+                    (<span class="upgrade-price-string">$8.50 USD</span>
+                    <del> <span class="upgrade-price-string">$10 USD</span></del>)
+                    </button>'''
         self.assertContains(response, bannerText, html=True)
         self.assertContains(response, button, html=True)
 
diff --git a/lms/templates/course_modes/_upgrade_button.html b/lms/templates/course_modes/_upgrade_button.html
new file mode 100644
index 0000000000..c4482ab82c
--- /dev/null
+++ b/lms/templates/course_modes/_upgrade_button.html
@@ -0,0 +1,25 @@
+<%page args="content_gating_enabled, course_duration_limit_enabled, min_price, price_before_discount" expression_filter="h"/>
+
+<%!
+from django.utils.translation import ugettext as _
+from openedx.core.djangolib.markup import HTML, Text
+%>
+
+<%namespace name='static' file='../static_content.html'/>
+
+<li class="action action-select">
+    <input type="hidden" name="contribution" value="${price_before_discount or min_price}" />
+    % if content_gating_enabled or course_duration_limit_enabled:
+        <button type="submit" name="verified_mode">
+            <span>${_('Pursue the Verified Track')}</span>
+    % else:
+        <button type="submit" name="verified_mode">
+            <span>${_('Pursue a Verified Certificate')}</span>
+    % endif
+        % if price_before_discount:
+        (<span class="upgrade-price-string">$${min_price} USD</span> <del> <span class="upgrade-price-string">${Text('${price} USD').format(price=price_before_discount)}</span></del>)
+        % else:
+        (<span class="upgrade-price-string">$${min_price} USD</span>)
+        % endif
+        </button>
+</li>
\ No newline at end of file
diff --git a/lms/templates/course_modes/choose.html b/lms/templates/course_modes/choose.html
index 80dc286566..20ee9dcaf4 100644
--- a/lms/templates/course_modes/choose.html
+++ b/lms/templates/course_modes/choose.html
@@ -124,14 +124,7 @@ from openedx.core.djangolib.markup import HTML, Text
                                                 </div>
                                                 <div class="copy-inline list-actions">
                                                     <ul class="list-actions">
-                                                        <li class="action action-select">
-                                                            <input type="hidden" name="contribution" value="${price_before_discount or min_price}" />
-                                                            <button type="submit" name="verified_mode">
-                                                                ${_('Pursue a Verified Certificate')} ($${min_price} USD${Text(' {open}${price} USD{close})').format(price=price_before_discount,
-                                                                open=HTML('<del>'),
-                                                                close=HTML('</del>')) if price_before_discount else ')'}
-                                                            </button>
-                                                        </li>
+                                                        <%include file='_upgrade_button.html' args='content_gating_enabled=content_gating_enabled, course_duration_limit_enabled=course_duration_limit_enabled, min_price=min_price, price_before_discount=price_before_discount' />
                                                     </ul>
                                                 </div>
                                             </div>
@@ -172,22 +165,7 @@ from openedx.core.djangolib.markup import HTML, Text
                                                 </div>
                                                 <div class="copy-inline list-actions">
                                                     <ul class="list-actions">
-                                                        <li class="action action-select">
-                                                            <input type="hidden" name="contribution" value="${price_before_discount or min_price}" />
-                                                            % if content_gating_enabled or course_duration_limit_enabled:
-                                                                <button type="submit" name="verified_mode">
-                                                                    ${_('Pursue the Verified Track')}  ($${min_price} USD${Text(' {open}${price} USD{close})').format(price=price_before_discount,
-                                                                    open=HTML('<del>'),
-                                                                    close=HTML('</del>')) if price_before_discount else ')'}
-                                                                </button>
-                                                            % else:
-                                                                <button type="submit" name="verified_mode">
-                                                                    ${_('Pursue a Verified Certificate')} ($${min_price} USD${Text(' {open}${price} USD{close})').format(price=price_before_discount,
-                                                                    open=HTML('<del>'),
-                                                                    close=HTML('</del>')) if price_before_discount else ')'}
-                                                                </button>
-                                                            % endif
-                                                        </li>
+                                                        <%include file='_upgrade_button.html' args='content_gating_enabled=content_gating_enabled, course_duration_limit_enabled=course_duration_limit_enabled, min_price=min_price, price_before_discount=price_before_discount' />
                                                     </ul>
                                                 </div>
                                             </div>
diff --git a/openedx/features/course_experience/static/course_experience/fixtures/course-currency-fragment.html b/openedx/features/course_experience/static/course_experience/fixtures/course-currency-fragment.html
index 9a65d28651..2bbec514f4 100644
--- a/openedx/features/course_experience/static/course_experience/fixtures/course-currency-fragment.html
+++ b/openedx/features/course_experience/static/course_experience/fixtures/course-currency-fragment.html
@@ -1,2 +1,3 @@
 <div id="currency_data" value='{"CAN": {"rate": 2.2, "code": "CAD", "symbol": "$"}}'></div>
-<input type="submit" name="verified_mode" value="Pursue a Verified Certificate ($100 USD)">
+<button type="submit" class="no-discount" name="verified_mode"><span>Pursue a Verified Certificate</span>(<span class="upgrade-price-string">$100 USD</span>)</button>
+<button type="submit" class="discount" name="verified_mode"><span>Pursue a Verified Certificate</span>(<span class="upgrade-price-string">$90 USD</span> <del><span class="upgrade-price-string">$100 USD</span></del>)</button>
diff --git a/openedx/features/course_experience/static/course_experience/js/currency.js b/openedx/features/course_experience/static/course_experience/js/currency.js
index be5c3c63a0..d9fa2a80ef 100644
--- a/openedx/features/course_experience/static/course_experience/js/currency.js
+++ b/openedx/features/course_experience/static/course_experience/js/currency.js
@@ -4,17 +4,28 @@ import $ from 'jquery'; // eslint-disable-line import/extensions
 
 export class Currency {  // eslint-disable-line import/prefer-default-export
 
-  setPrice() {
+  editText(price) {
     const l10nCookie = this.countryL10nData;
-    const lmsregex = /(\$)(\d*)( USD)/g;
-    const price = $('input[name="verified_mode"]').filter(':visible')[0];
-    const regexMatch = lmsregex.exec(price.value);
-    const dollars = parseFloat(regexMatch[2]);
-    const converted = dollars * l10nCookie.rate;
-    const string = `${l10nCookie.symbol}${Math.round(converted)} ${l10nCookie.code}`;
-    // Use regex to change displayed price on track selection
-    // based on edx-price-l10n cookie currency_data
-    price.value = price.value.replace(regexMatch[0], string);
+    const lmsregex = /(\$)([\d|.]*)( USD)/g;
+    const priceText = price.text();
+    const regexMatch = lmsregex.exec(priceText);
+    if (regexMatch) {
+      const currentPrice = regexMatch[2];
+      const dollars = parseFloat(currentPrice);
+      const newPrice = dollars * l10nCookie.rate;
+      const newPriceString = `${l10nCookie.symbol}${Math.round(newPrice)} ${l10nCookie.code}`;
+      // Change displayed price based on edx-price-l10n cookie currency_data
+      price.text(newPriceString);
+    }
+  }
+
+  setPrice() {
+    $('.upgrade-price-string').each((i, price) => {
+      // When the button includes two prices (discounted and previous)
+      // we call the method twice, since it modifies one price at a time.
+      // Could also be used to modify all prices on any page
+      this.editText($(price));
+    });
   }
 
   getCountry() {
diff --git a/openedx/features/course_experience/static/course_experience/js/spec/Currency_spec.js b/openedx/features/course_experience/static/course_experience/js/spec/Currency_spec.js
index f6f57de098..45e59ee254 100644
--- a/openedx/features/course_experience/static/course_experience/js/spec/Currency_spec.js
+++ b/openedx/features/course_experience/static/course_experience/js/spec/Currency_spec.js
@@ -36,12 +36,17 @@ describe('Currency factory', () => {
     it('when location is the default (US)', () => {
       $.cookie('edx-price-l10n', '{"rate":1,"code":"USD","symbol":"$","countryCode":"US"}', { path: '/' });
       currency = new Currency();
-      expect($('input[name="verified_mode"]').filter(':visible')[0].value).toEqual('Pursue a Verified Certificate ($100 USD)');
+      expect($('[name="verified_mode"].no-discount').filter(':visible').text()).toEqual('Pursue a Verified Certificate($100 USD)');
     });
     it('when cookie is set to a different country', () => {
       $.cookie('edx-price-l10n', '{"rate":2.2,"code":"CAD","symbol":"$","countryCode":"CAN"}', { expires: 1 });
       currency = new Currency();
-      expect($('input[name="verified_mode"]').filter(':visible')[0].value).toEqual('Pursue a Verified Certificate ($220 CAD)');
+      expect($('[name="verified_mode"].no-discount').filter(':visible').text()).toEqual('Pursue a Verified Certificate($220 CAD)');
+    });
+    it('when cookie is set to a different country with a discount', () => {
+      $.cookie('edx-price-l10n', '{"rate":2.2,"code":"CAD","symbol":"$","countryCode":"CAN"}', { expires: 1 });
+      currency = new Currency();
+      expect($('[name="verified_mode"].discount').filter(':visible').text()).toEqual('Pursue a Verified Certificate($198 CAD $220 CAD)');
     });
   });
 });
diff --git a/themes/edx.org/lms/templates/course_modes/_upgrade_button.html b/themes/edx.org/lms/templates/course_modes/_upgrade_button.html
new file mode 100644
index 0000000000..c4482ab82c
--- /dev/null
+++ b/themes/edx.org/lms/templates/course_modes/_upgrade_button.html
@@ -0,0 +1,25 @@
+<%page args="content_gating_enabled, course_duration_limit_enabled, min_price, price_before_discount" expression_filter="h"/>
+
+<%!
+from django.utils.translation import ugettext as _
+from openedx.core.djangolib.markup import HTML, Text
+%>
+
+<%namespace name='static' file='../static_content.html'/>
+
+<li class="action action-select">
+    <input type="hidden" name="contribution" value="${price_before_discount or min_price}" />
+    % if content_gating_enabled or course_duration_limit_enabled:
+        <button type="submit" name="verified_mode">
+            <span>${_('Pursue the Verified Track')}</span>
+    % else:
+        <button type="submit" name="verified_mode">
+            <span>${_('Pursue a Verified Certificate')}</span>
+    % endif
+        % if price_before_discount:
+        (<span class="upgrade-price-string">$${min_price} USD</span> <del> <span class="upgrade-price-string">${Text('${price} USD').format(price=price_before_discount)}</span></del>)
+        % else:
+        (<span class="upgrade-price-string">$${min_price} USD</span>)
+        % endif
+        </button>
+</li>
\ No newline at end of file
diff --git a/themes/edx.org/lms/templates/course_modes/choose.html b/themes/edx.org/lms/templates/course_modes/choose.html
index 557328a2e4..ea35afc96e 100644
--- a/themes/edx.org/lms/templates/course_modes/choose.html
+++ b/themes/edx.org/lms/templates/course_modes/choose.html
@@ -137,14 +137,7 @@ from openedx.core.djangolib.markup import HTML, Text
                                                 </div>
                                                 <div class="copy-inline list-actions">
                                                     <ul class="list-actions">
-                                                        <li class="action action-select">
-                                                            <input type="hidden" name="contribution" value="${price_before_discount or min_price}" />
-                                                            <button type="submit" name="verified_mode">
-                                                                ${_('Pursue a Verified Certificate')} ($${min_price} USD${Text(' {open}${price} USD{close})').format(price=price_before_discount,
-                                                                open=HTML('<del>'),
-                                                                close=HTML('</del>')) if price_before_discount else ')'}
-                                                            </button>
-                                                        </li>
+                                                        <%include file='_upgrade_button.html' args='content_gating_enabled=content_gating_enabled, course_duration_limit_enabled=course_duration_limit_enabled, min_price=min_price, price_before_discount=price_before_discount' />
                                                     </ul>
                                                 </div>
                                             </div>
@@ -187,22 +180,7 @@ from openedx.core.djangolib.markup import HTML, Text
                                                 </div>
                                                 <div class="copy-inline list-actions">
                                                     <ul class="list-actions">
-                                                        <li class="action action-select">
-                                                            <input type="hidden" name="contribution" value="${price_before_discount or min_price}" />
-                                                            % if content_gating_enabled or course_duration_limit_enabled:
-                                                                <button type="submit" name="verified_mode">
-                                                                    ${_('Pursue the Verified Track')} ($${min_price} USD${Text(' {open}${price} USD{close})').format(price=price_before_discount,
-                                                                    open=HTML('<del>'),
-                                                                    close=HTML('</del>')) if price_before_discount else ')'}
-                                                                </button>
-                                                            % else:
-                                                                <button type="submit" name="verified_mode">
-                                                                    ${_('Pursue a Verified Certificate')} ($${min_price} USD${Text(' {open}${price} USD{close})').format(price=price_before_discount,
-                                                                    open=HTML('<del>'),
-                                                                    close=HTML('</del>')) if price_before_discount else ')'}
-                                                                </button>
-                                                            % endif
-                                                        </li>
+                                                        <%include file='_upgrade_button.html' args='content_gating_enabled=content_gating_enabled, course_duration_limit_enabled=course_duration_limit_enabled, min_price=min_price, price_before_discount=price_before_discount' />
                                                     </ul>
                                                 </div>
                                             </div>