_group_plan_modal.pug 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
  2. .modal-dialog(role="document")
  3. .modal-content
  4. .modal-header
  5. button.close(
  6. type="button"
  7. data-dismiss="modal"
  8. aria-label=translate("close")
  9. )
  10. span(aria-hidden="true") ×
  11. h2 #{translate("customize_your_group_subscription")}
  12. h3 #{translate("save_30_percent_or_more_uppercase")}
  13. .modal-body.plans.group-subscription-modal
  14. .container-fluid
  15. .row
  16. .col-md-6.text-center
  17. .circle.circle-lg
  18. span(data-ol-group-plan-display-price) ...
  19. span.small / #{translate('year')}
  20. br
  21. span.circle-subtext(data-ol-group-plan-price-per-user=translate('per_user')) ...
  22. ul.list-unstyled
  23. li #{translate('each_user_will_have_access_to')}:
  24. li  
  25. li(
  26. hidden=(groupPlanModalDefaults.plan_code !== 'collaborator')
  27. data-ol-group-plan-plan-code='collaborator'
  28. )
  29. strong #{translate("collabs_per_proj", {collabcount:10})}
  30. li(
  31. hidden=(groupPlanModalDefaults.plan_code !== 'professional')
  32. data-ol-group-plan-plan-code='professional'
  33. )
  34. strong #{translate("unlimited_collabs")}
  35. +features_premium
  36. .col-md-6
  37. form.form(data-ol-group-plan-form)
  38. .form-group
  39. label(for='plan_code')
  40. | #{translate('plan')}
  41. for plan_code in groupPlanModalOptions.plan_codes
  42. label.group-plan-option
  43. input(
  44. type="radio"
  45. name="plan_code"
  46. checked=(plan_code.code === "collaborator")
  47. value=plan_code.code
  48. data-ol-group-plan-code=plan_code.code
  49. )
  50. span #{translate(plan_code.i18n)}
  51. .form-group
  52. label(for='size')
  53. | #{translate('number_of_users')}
  54. select.form-control(
  55. id="size"
  56. event-tracking="groups-modal-group-size"
  57. event-tracking-mb="true"
  58. event-tracking-trigger="click"
  59. event-tracking-element="select"
  60. )
  61. for size in groupPlanModalOptions.sizes
  62. option(
  63. value=size
  64. selected=(size === groupPlanModalDefaults.size)
  65. ) #{size}
  66. .form-group(data-ol-group-plan-form-currency)
  67. label(for='currency')
  68. | #{translate('currency')}
  69. select.form-control(id="currency")
  70. for currency in groupPlanModalOptions.currencies
  71. option(
  72. value=currency.code
  73. selected=(currency.code === groupPlanModalDefaults.currency)
  74. ) #{currency.display}
  75. .form-group
  76. label(for='usage')
  77. | #{translate('educational_discount_for_groups_of_ten_or_more')}
  78. label.group-plan-option
  79. input(
  80. id="usage"
  81. type="checkbox"
  82. autocomplete="off"
  83. event-tracking="groups-modal-edu-discount"
  84. event-tracking-mb="true"
  85. event-tracking-trigger="click"
  86. event-tracking-element="checkbox"
  87. )
  88. span #{translate('educational_discount_disclaimer')}
  89. .row
  90. .col-md-12.text-center
  91. .educational-discount-badge
  92. div(hidden=(groupPlanModalDefaults.usage !== 'educational') data-ol-group-plan-educational-discount)
  93. p.applied(hidden=true data-ol-group-plan-educational-discount-applied)
  94. | #{translate('educational_discount_applied')}
  95. p.ineligible(hidden=true data-ol-group-plan-educational-discount-ineligible)
  96. | #{translate('educational_discount_available_for_groups_of_ten_or_more')}
  97. .modal-footer
  98. .text-center
  99. button.btn.btn-primary.btn-lg(
  100. data-ol-purchase-group-plan
  101. event-tracking="form-submitted-groups-modal-purchase-click"
  102. event-tracking-mb="true"
  103. event-tracking-trigger="click"
  104. ) #{translate('purchase_now')}
  105. hr.thin
  106. a(
  107. href
  108. data-ol-open-contact-form-for-more-than-50-licenses
  109. ) #{translate('need_more_than_to_licenses_get_in_touch')}