💻 6103 allow existing users to subscribe to the newsletter

app.py

@@ -55,7 +55,7 @@
 from website.log_fetcher import log_fetcher
 from website.frontend_types import Adventure, Program, ExtraStory, SaveInfo
 from website.flask_hedy import g_db
-from website.newsletter import add_used_slides_to_subscription
+from website.newsletter import add_used_slides_to_subscription, get_subscription_status
 
 logConfig(LOGGING_CONFIG)
 logger = logging.getLogger(__name__)
@@ -2259,6 +2259,10 @@ def profile_page(user):
     else:
         session['messages'] = 0
 
+    subscription_status = ''
+    if profile.get('is_teacher', False):
+        subscription_status = get_subscription_status(user.get('email'))
+
     return render_template(
         'profile.html',
         page_title=gettext('title_my-profile'),
@@ -2268,6 +2272,7 @@ def profile_page(user):
         public_settings=public_profile_settings,
         user_classes=classes,
         current_page='my-profile',
+        subscription_status=subscription_status,
         javascript_page_options=dict(
             page='my-profile',
         ))

build-tools/heroku/tailwind/styles.css

@@ -791,6 +791,10 @@ p.close-dialog {
   @apply bg-blue-200 px-8 py-2 rounded-lg text-3xl cursor-pointer;
 }
 
+.section-header-important {
+  @apply bg-red-300 px-8 py-2 rounded-lg text-3xl cursor-pointer;
+}
+
 .profile-section-body-header {
   @apply mb-4 pb-2 border-b inline-block w-full;
 }
@@ -1022,4 +1026,4 @@ div[class^="ace_incorrect_hedy_code"] {
 
 .adventure-item.selected .text-gray-500 {
   @apply text-white !important;
-}
+}

messages.pot

@@ -479,6 +479,9 @@ msgstr ""
 msgid "customize_class"
 msgstr ""
 
+msgid "danger_zone"
+msgstr ""
+
 msgid "dash"
 msgstr ""
 
@@ -527,6 +530,9 @@ msgstr ""
 msgid "destroy_profile"
 msgstr ""
 
+msgid "destroy_profile_message"
+msgstr ""
+
 msgid "developers_mode"
 msgstr ""
 
@@ -1025,6 +1031,9 @@ msgstr ""
 msgid "newline"
 msgstr ""
 
+msgid "newsletter"
+msgstr ""
+
 msgid "next_adventure"
 msgstr ""
 
@@ -1631,12 +1640,24 @@ msgstr ""
 msgid "subscribe"
 msgstr ""
 
+msgid "subscribe_message"
+msgstr ""
+
 msgid "subscribe_newsletter"
 msgstr ""
 
+msgid "subscribed_header"
+msgstr ""
+
+msgid "subscribed_message"
+msgstr ""
+
 msgid "successful_runs"
 msgstr ""
 
+msgid "successfully_subscribed"
+msgstr ""
+
 msgid "suggestion_color"
 msgstr ""
 
@@ -1802,6 +1823,12 @@ msgstr ""
 msgid "unsubmitted"
 msgstr ""
 
+msgid "unsubscribed_header"
+msgstr ""
+
+msgid "unsubscribed_message"
+msgstr ""
+
 msgid "update_adventure_prompt"
 msgstr ""
 

static/css/generated.full.css

@@ -344824,6 +344824,18 @@ p.close-dialog {
   font-size: 1.875rem;
 }
 
+.section-header-important {
+  cursor: pointer;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 178 178 / var(--tw-bg-opacity));
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 1.875rem;
+}
+
 .profile-section-body-header {
   margin-bottom: 1rem;
   display: inline-block;
@@ -347418,4 +347430,4 @@ div[class^="ace_incorrect_hedy_code"] {
 
 :is(.dark .dark\:\[\&\>svg\]\:fill-white>svg) {
   fill: #fff;
-}
+}

static/js/appbundle.js

@@ -60316,6 +60316,7 @@ ${o3}` : i3;
     stopit: () => stopit,
     store_parsons_attempt: () => store_parsons_attempt,
     submit_program: () => submit_program,
+    subscribe_to_newsletter: () => subscribe_to_newsletter,
     success: () => success,
     theGlobalDebugger: () => theGlobalDebugger,
     theGlobalEditor: () => theGlobalEditor2,
@@ -125301,6 +125302,14 @@ def note_with_error(value, err):
       }, 2e3);
     });
   }
+  async function subscribe_to_newsletter() {
+    tryCatchPopup(async () => {
+      const response = await postJson("/auth/subscribe-to-newsletter");
+      modal.notifySuccess(response.message);
+      $("#subscribe_panel").hide();
+      $("#subscribed_panel").show();
+    });
+  }
   function initializeFormSubmits() {
     $("form#signup").on("submit", async function(e) {
       e.preventDefault();

static/js/auth.ts

@@ -85,6 +85,15 @@ export async function turn_into_teacher_account() {
   });
 }
 
+export async function subscribe_to_newsletter() {
+  tryCatchPopup(async () => {
+    const response = await postJson('/auth/subscribe-to-newsletter');
+    modal.notifySuccess(response.message);
+    $('#subscribe_panel').hide();
+    $('#subscribed_panel').show();
+  });
+}
+
 // *** User forms ***
 
 export function initializeFormSubmits() {
@@ -279,4 +288,4 @@ async function afterLogin(loginData: Dict<boolean>) {
   }
   // Otherwise, redirect to the programs page
   redirect('');
-}
+}

templates/profile.html

@@ -30,6 +30,31 @@ <h2 class="profile-section-body-header">{{_('my_messages')}}</h2>
              {% endfor %}
            </div>
        {% endif %}
+
+       {% if user_data['is_teacher'] %}
+         <h1 class="section-header" id="my_subscription" onclick="$ ('#subscription').toggle()">{{_('newsletter')}}</h1>
+         <div id="subscription" data-cy="messages" class="profile-section-body"
+              {% if not invitations and subscription_status != "subscribed" %} style="display: block;" {% endif %}>
+           {% if subscription_status == "subscribed" %}
+             <h2 class="profile-section-body-header">{{_('subscribed_header')}}</h2>
+             <p class="mt-0 mb-6">{{_('subscribed_message')}}</p>
+           {% elif subscription_status == "unsubscribed" %}
+             <h2 class="profile-section-body-header">{{_('unsubscribed_header')}}</h2>
+             <p class="mt-0 mb-6">{{_('unsubscribed_message')}}</p>
+           {% else %}
+             <div id="subscribe_panel">
+               <h2 class="profile-section-body-header">{{_('subscribe_newsletter')}}</h2>
+               <p class="mt-0 mb-6">{{_('subscribe_message')}}</p>
+               <button class="green-btn" onclick="hedyApp.subscribe_to_newsletter();">{{_('subscribe')}}</button>
+             </div>
+             <div id="subscribed_panel" class="hidden">
+               <h2 class="profile-section-body-header">{{_('subscribed_header')}}</h2>
+               <p class="mt-0 mb-6">{{_('subscribed_message')}}</p>
+             </div>
+           {% endif %}
+         </div>
+       {% endif %}
+
        <h1 data-cy="profile_button" class="section-header" onclick="$ ('#public_profile_body').toggle()">{{_('public_profile')}}</h1>
        <div id="public_profile_body" class="profile-section-body" {% if request.args.get('open') == "public-profile" %} style="display: inline;"{% endif %}>
             <h2 class="profile-section-body-header">{{_('public_profile')}}</h2>
@@ -63,7 +88,8 @@ <h3 class="px-2 pt-0 pb-2 my-0 font-semibold">{{_('favourite_program')}}</h3>
                      </div>
                  {% endif %}
                  <div class="flex flex-row gap-4 items-center border-gray-400 border p-4 rounded-lg">
-                    <input type="checkbox" name="agree_terms" data-cy="agree_terms" required class="" {% if public_settings %}checked{% endif %}>
+                    <input id="agree_terms"  type="checkbox" name="agree_terms" data-cy="agree_terms" required
+                           class="" {% if public_settings %}checked{% endif %}>
                     <label for="agree_terms" class="cursor-pointer w-full">{{_('public_profile_info')}}</label>
                  </div>
                  <div class="flex flex-row">
@@ -136,7 +162,7 @@ <h2 class="profile-section-body-header">{{_('settings')}}</h2>
                   <option value="o" {% if user_data['gender'] == "o" %}selected{% endif %}>{{_('other')}}</option>
                 </select>
             </div>
-            <div class="flex flex-row items-center mb-2">
+            <div class="flex flex-row items-center mb-6">
                 <label for="country" class="inline-block w-72">{{_('country')}}</label>
                 <select id="country" name="country" class="personal-input">
                     <option value="">{{_('select')}}</option>
@@ -146,7 +172,6 @@ <h2 class="profile-section-body-header">{{_('settings')}}</h2>
                 </select>
             </div>
         </form>
-        <button class="red-btn" onclick="hedyApp.destroy('{{_('are_you_sure')}}')" data-cy="delete_profile_button">{{_('destroy_profile')}}</button>
        </div>
       <h1 id="password_toggle" class="section-header" onclick="$ ('#change_password_body').toggle()">{{_('change_password')}}</h1>
         <div class="profile-section-body" id="change_password_body">
@@ -157,7 +182,7 @@ <h2 class="profile-section-body-header">{{_('change_password')}}</h2>
                     <input id="old_password" name="old_password" class="personal-input" minlength="6" type=password role="presentation" autocomplete="off" required>
                 </div>
                 <div class="flex flex-row items-center mb-2">
-                    <label for="new-password" class="inline-block w-72">{{_('new_password')}}</label>
+                    <label for="new_password" class="inline-block w-72">{{_('new_password')}}</label>
                     <input id="new_password" name="new-password" class="personal-input" minlength="6" type=password role="presentation" autocomplete="new-password" required>
                 </div>
                 <div class="flex flex-row items-center mb-2">
@@ -173,6 +198,14 @@ <h1 id="teacher_toggle" class="section-header" onclick="$ ('#turn_into_teacher_b
                 <button class="blue-btn" onclick="hedyApp.turn_into_teacher_account();">{{_('request_teacher_account')}}</button>
             </div>
         {% endif %}
+
+        <h1 id="danger_zone" class="section-header-important" data-cy="delete_profile"
+            onclick="$ ('#danger_zone_body').toggle()">{{_('danger_zone')}}</h1>
+          <div class="profile-section-body" id="danger_zone_body">
+            <h2 class="profile-section-body-header">{{_('destroy_profile')}}</h2>
+            <p class="mt-0 mb-6">{{_('destroy_profile_message')}}</p>
+            <button class="red-btn" onclick="hedyApp.destroy('{{_('are_you_sure')}}')" data-cy="delete_profile_button">{{_('destroy_profile')}}</button>
+          </div>
    </div>
 </div>
 {% endblock %}

tests/cypress/e2e/signup_page/signup.cy.js

@@ -45,7 +45,7 @@ it('Is able to sign up as a student', () => {
 
     // delete profile
     goToProfilePage();
-    cy.getDataCy('personal_settings').click()
+    cy.getDataCy('delete_profile').click()
     cy.getDataCy('delete_profile_button').click()
     cy.intercept('/auth/destroy').as('delete_user')
     cy.getDataCy('modal_yes_button').click()
@@ -98,7 +98,7 @@ it('Is able to sign up as a teacher', () => {
 
     //delete profile
     goToProfilePage();
-    cy.getDataCy('personal_settings').click()
+    cy.getDataCy('delete_profile').click()
     cy.getDataCy('delete_profile_button').click()
     cy.intercept('/auth/destroy').as('delete_user')
     cy.getDataCy('modal_yes_button').click()

translations/ar/LC_MESSAGES/messages.po

@@ -579,6 +579,9 @@ msgstr "تخصيص مغامرة"
 msgid "customize_class"
 msgstr "تخصيص الصف"
 
+msgid "danger_zone"
+msgstr ""
+
 msgid "dash"
 msgstr "علامة الشرطة"
 
@@ -630,6 +633,9 @@ msgstr ""
 msgid "destroy_profile"
 msgstr "حذف الملف الشخصي"
 
+msgid "destroy_profile_message"
+msgstr ""
+
 msgid "developers_mode"
 msgstr "وضع المبرمج"
 
@@ -1221,6 +1227,9 @@ msgstr ""
 msgid "newline"
 msgstr "سطر جديد"
 
+msgid "newsletter"
+msgstr ""
+
 #, fuzzy
 msgid "next_adventure"
 msgstr ""
@@ -1904,13 +1913,25 @@ msgstr "هذا برنامج تسليمه ولا يمكن نعديله."
 msgid "subscribe"
 msgstr "اشترك"
 
+msgid "subscribe_message"
+msgstr ""
+
 msgid "subscribe_newsletter"
 msgstr "اشترك في النشرة الإخبارية"
 
+msgid "subscribed_header"
+msgstr ""
+
+msgid "subscribed_message"
+msgstr ""
+
 #, fuzzy
 msgid "successful_runs"
 msgstr ""
 
+msgid "successfully_subscribed"
+msgstr ""
+
 #, fuzzy
 msgid "suggestion_color"
 msgstr ""
@@ -2107,6 +2128,12 @@ msgstr ""
 msgid "unsubmitted"
 msgstr ""
 
+msgid "unsubscribed_header"
+msgstr ""
+
+msgid "unsubscribed_message"
+msgstr ""
+
 msgid "update_adventure_prompt"
 msgstr "هل أنت متأكد أنك تريد تعديل هذه المغامرة؟"