Merge pull request #19758 from overleaf/jel-modal-light-touch

[web] Update group modal on plans page light touch redesign

GitOrigin-RevId: 26cce2996bed263c46d06b1b1fced8206fc9d8c1

services/web/app/views/subscriptions/plans-light-design.pug

@@ -51,6 +51,6 @@ block content
 
 				include ./plans/_faq_new
 
-	include ./plans/_group_plan_modal
+			include ./plans/light-redesign/_group_plan_modal
 
 	!= moduleIncludes("contactModalGeneral-marketing", locals)

services/web/app/views/subscriptions/plans/light-redesign/_group_plan_modal.pug

@@ -0,0 +1,116 @@
+div.modal.fade.group-customize-subscription-modal.website-redesign-modal(tabindex="-1" role="dialog" data-ol-group-plan-modal)
+	.modal-dialog(role="document")
+		.modal-content
+			.modal-header
+				button.close(
+					type="button"
+					data-dismiss="modal"
+					aria-label=translate("close")
+				)
+					i.material-symbols(aria-hidden="true") close
+				h1.modal-title #{translate("customize_your_group_subscription")}
+				h2.modal-subtitle #{translate("save_30_percent_or_more_uppercase")}
+			.modal-body
+				.container-fluid
+					.row
+						.col-md-6.text-center
+							.circle.circle-lg
+								.group-price
+									span(data-ol-group-plan-display-price) ...
+									span  /#{translate('year')}
+								.group-price-per-user(data-ol-group-plan-price-per-user=translate('per_user')) ...
+							.group-modal-features
+								| #{translate('each_user_will_have_access_to')}:
+								ul.list-unstyled
+									li(
+										hidden=(groupPlanModalDefaults.plan_code !== 'collaborator')
+										data-ol-group-plan-plan-code='collaborator'
+									)
+										strong #{translate("collabs_per_proj", {collabcount:10})}
+									li(
+										hidden=(groupPlanModalDefaults.plan_code !== 'professional')
+										data-ol-group-plan-plan-code='professional'
+									)
+										strong #{translate("unlimited_collabs")}
+									li.list-item-pro-features-header #{translate('all_premium_features')}
+									li #{translate('sync_dropbox_github')}
+									li #{translate('full_doc_history')}
+									li #{translate('track_changes')}
+									li + #{translate('more_lowercase')}
+						.col-md-6
+							form.form(data-ol-group-plan-form)
+								.form-group
+									label(for='plan_code')
+										| #{translate('plan')}
+									for plan_code in groupPlanModalOptions.plan_codes
+										label.group-plan-option
+											input(
+												type="radio"
+												name="plan_code"
+												checked=(plan_code.code === groupPlanModalDefaults.plan_code)
+												value=plan_code.code
+												data-ol-group-plan-code=plan_code.code
+											)
+											span #{translate(plan_code.i18n)}
+								.form-group
+									label(for='size')
+										| #{translate('number_of_users')}
+									select.form-control(
+										id="size"
+										event-tracking="groups-modal-group-size"
+										event-tracking-mb="true"
+										event-tracking-trigger="click"
+										event-tracking-element="select"
+									)
+										for size in groupPlanModalOptions.sizes
+											option(
+												value=size
+												selected=(size === groupPlanModalDefaults.size)
+											) #{size}
+								.form-group(data-ol-group-plan-form-currency)
+									label(for='currency')
+										| #{translate('currency')}
+									select.form-control(id="currency")
+										for currency in groupPlanModalOptions.currencies
+											option(
+												value=currency.code
+												selected=(currency.code === groupPlanModalDefaults.currency)
+											) #{currency.display}
+								.form-group
+									label(for='usage')
+										| #{translate('educational_discount_for_groups_of_ten_or_more')}
+								label.group-plan-educational-discount
+									input(
+										id="usage"
+										type="checkbox"
+										autocomplete="off"
+										event-tracking="groups-modal-edu-discount"
+										event-tracking-mb="true"
+										event-tracking-trigger="click"
+										event-tracking-element="checkbox"
+									)
+									span #{translate('educational_discount_disclaimer')}
+
+					.row
+						.col-md-12.text-center
+							.educational-discount-section
+								div(hidden=(groupPlanModalDefaults.usage !== 'educational') data-ol-group-plan-educational-discount)
+									.applied(hidden=true data-ol-group-plan-educational-discount-applied)
+										| #{translate('educational_discount_applied')}
+									.ineligible(hidden=true data-ol-group-plan-educational-discount-ineligible)
+										| #{translate('educational_discount_available_for_groups_of_ten_or_more')}
+			.modal-footer
+				.text-center
+					button.btn.btn-primary.btn-lg(
+						data-ol-purchase-group-plan
+						event-tracking="form-submitted-groups-modal-purchase-click"
+						event-tracking-mb="true"
+						event-tracking-trigger="click"
+						) #{translate('purchase_now_lowercase')}
+					br
+					p #{translate('need_more_than_x_licenses', {x: '50'})}
+						|  
+						button.btn.btn-inline-link(
+							data-ol-open-contact-form-for-more-than-50-licenses
+						) #{translate('please_get_in_touch')}
+

services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less

@@ -23,42 +23,112 @@
     }
   }
 
-  .circle {
-    font-size: 1.5rem;
-    font-weight: 700;
-    padding: 46px 18px;
-    margin: 0 auto @line-height-computed;
-    text-shadow: 0 -1px 1px darken(@link-color, 10%);
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    background-color: @brand-secondary;
-    color: white;
-    white-space: nowrap;
-    line-height: 1;
-
-    .small {
-      color: rgba(255, 255, 255, 0.85);
-      font-size: @font-size-base * 0.8;
+  .group-customize-subscription-modal {
+    .modal-footer {
+      .btn-lg {
+        margin-bottom: var(--spacing-05);
+      }
     }
-  }
 
-  .circle-lg {
-    height: 180px;
-    padding: 70px 8px;
-    width: 180px;
-  }
+    .btn-inline-link {
+      font-weight: normal;
+      // TODO: add to .website-redesign
+      // copied .inline-green-link style
+      color: var(--green-50);
+      text-decoration: underline;
+      // text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
+      // this will force underline to not skip the descender
+      text-decoration-skip-ink: none;
 
-  .circle-subtext {
-    font-size: 1rem;
-  }
+      &:hover {
+        color: var(--green-60);
+      }
+
+      // for accessibility with keyboard navigation
+      &:focus {
+        outline: 2px solid var(--green-50);
+        outline-offset: 1px;
+      }
+    }
+    .circle {
+      font-size: var(--font-size-05);
+      line-height: var(--line-height-04);
+      padding: 46px 18px;
+      margin: 0 auto @line-height-computed;
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      background-color: var(--green-50);
+      color: white;
+      white-space: nowrap;
+
+      .group-price {
+        font-weight: 600;
+      }
+      .group-price-per-user {
+        font-size: var(--font-size-02);
+        line-height: var(--line-height-02);
+        font-weight: 400;
+      }
+    }
 
-  .circle-img {
-    float: right;
+    .circle-lg {
+      height: 180px;
+      padding: 70px 8px;
+      width: 180px;
+    }
 
-    @media (max-width: @screen-sm-max) {
-      float: left;
-      margin: 0 15px;
+    .group-plan-option {
+      display: block;
+      margin-bottom: var(--spacing-04);
+    }
+
+    label span {
+      font-size: var(--font-size-03);
+      line-height: var(--line-height-03);
+      font-weight: 400;
+      padding-left: var(
+        --spacing-04
+      ); // TODO: move to standard input styling for checkbox and radio
+    }
+
+    input[type='checkbox'],
+    input[type='radio'] {
+      // TODO: move to standard input styling for checkbox
+      accent-color: var(--green-50);
+    }
+
+    input[type='checkbox'] {
+      // TODO: move to standard input styling for checkbox
+
+      height: 16px;
+      width: 16px;
+    }
+
+    .form-group {
+      margin-bottom: var(--spacing-06); // TODO: move to main .form-group CSS
+    }
+
+    .group-plan-educational-discount {
+      font-weight: normal;
+    }
+
+    .educational-discount-section {
+      margin-top: var(--spacing-06);
+    }
+
+    .group-modal-features {
+      font-size: var(--font-size-02);
+      line-height: var(--line-height-02);
+
+      ul {
+        margin-bottom: 0;
+      }
+
+      ul,
+      .list-item-pro-features-header {
+        margin-top: var(--spacing-06);
+      }
     }
   }
 

services/web/frontend/stylesheets/app/plans/plans-v2.less

@@ -80,65 +80,6 @@
   }
 }
 
-.plans-page {
-  p {
-    color: var(--neutral-70);
-    margin-bottom: @line-height-computed;
-  }
-
-  .plans-header {
-    h1,
-    h2 {
-      color: var(--neutral-70);
-    }
-  }
-
-  .circle {
-    font-size: 1.5rem;
-    font-weight: 700;
-    padding: 46px 18px;
-    margin: 0 auto @line-height-computed;
-    text-shadow: 0 -1px 1px darken(@link-color, 10%);
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    background-color: @green-70;
-    color: white;
-    white-space: nowrap;
-    line-height: 1;
-
-    .small {
-      color: rgba(255, 255, 255, 0.85);
-      font-size: @font-size-base * 0.8;
-    }
-  }
-
-  .circle-lg {
-    height: 180px;
-    padding: 70px 8px;
-    width: 180px;
-  }
-
-  .circle-subtext {
-    font-size: 1rem;
-  }
-
-  .circle-img {
-    float: right;
-
-    @media (max-width: @screen-sm-max) {
-      float: left;
-      margin: 0 15px;
-    }
-  }
-
-  @media (max-width: @screen-xs-max) {
-    [data-ol-current-view='group'] [data-ol-plans-v2-m-a-switch-container] {
-      display: none;
-    }
-  }
-}
-
 .plans-v2-top-switch ul.plans-v2-nav {
   display: flex;
   justify-content: center;

services/web/frontend/stylesheets/components/modals.less

@@ -166,3 +166,44 @@
     width: @modal-lg;
   }
 }
+
+.website-redesign-modal {
+  .modal-title {
+    font-size: var(--font-size-05);
+    line-height: var(--line-height-04);
+    margin-bottom: var(--spacing-02);
+  }
+  .modal-subtitle {
+    font-size: var(--font-size-03);
+    line-height: var(--line-height-03);
+    margin: 0;
+  }
+
+  .modal-body,
+  .modal-footer {
+    padding: var(--spacing-06);
+  }
+  .modal-header {
+    border-bottom: 1px solid var(--neutral-20);
+  }
+  .modal-footer {
+    border-top: 1px solid var(--neutral-20);
+    background-color: transparent;
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .close {
+    color: var(--neutral-90);
+    font-size: var(--font-size-05);
+    line-height: var(--line-height-02);
+    opacity: 1;
+    height: 36px;
+    width: 36px;
+    padding: var(--spacing-04);
+    &:hover {
+      background-color: var(--neutral-10);
+      border-radius: 50%;
+    }
+  }
+}

services/web/locales/en.json

@@ -1217,6 +1217,7 @@
   "more": "More",
   "more_actions": "More actions",
   "more_info": "More Info",
+  "more_lowercase": "more",
   "more_options": "More options",
   "more_options_for_border_settings_coming_soon": "More options for border settings coming soon.",
   "more_project_collaborators": "<0>More</0> project <0>collaborators</0>",
@@ -1542,6 +1543,7 @@
   "publishing": "Publishing",
   "pull_github_changes_into_sharelatex": "Pull GitHub changes into __appName__",
   "purchase_now": "Purchase Now",
+  "purchase_now_lowercase": "Purchase now",
   "push_sharelatex_changes_to_github": "Push __appName__ changes to GitHub",
   "quoted_text_in": "Quoted text in",
   "raw_logs": "Raw logs",