Merge branch 'show-trials-started-banner' into 'master'

[Frontend] Show success banner to user when trial starts

See merge request gitlab-org/gitlab!16794

ee/app/helpers/billing_plans_helper.rb

@@ -40,4 +40,11 @@ module BillingPlansHelper
 
     "#{EE::SUBSCRIPTIONS_URL}/gitlab/namespaces/#{group.id}/upgrade/#{plan.id}"
   end
+
+  def show_trial_banner?(namespace)
+    return false unless params[:trial]
+
+    root = namespace.has_parent? ? namespace.root_ancestor : namespace
+    root.trial_active?
+  end
 end

ee/app/views/shared/billings/_billing_plan_header.html.haml

 - parent_group = local_assigns[:parent_group]
+- features_link = link_to s_("BillingPlans|features"), "https://about.gitlab.com/features", rel: "noreferrer noopener"
 
 .mb-2= render_billings_gold_trial(current_user, parent_group || namespace)
 
+- if show_trial_banner?(parent_group || namespace)
+  .user-callout
+    .alert.bordered-box.landing.justify-content-start.pl-md-8
+      %button{ type:"button", class:"btn btn-default close", "data-dismiss":"alert", "aria-label": _("Close") }
+        = sprite_icon('close', size: 16)
+      .svg-container
+        = custom_icon('trial_activated_banner')
+      .user-callout-copy
+        %h4
+          = s_("BillingPlans|Congratulations, your new trial is activated")
+        %p
+          = s_("BillingPlans|Your Gold trial will <strong>expire after %{expiration_date}</strong>. You can learn more about GitLab.com Gold by reading about our %{features_link}.").html_safe % { expiration_date: namespace.trial_ends_on, features_link: features_link }
+
 .billing-plan-header.content-block.center
   .billing-plan-logo
     - if namespace == current_user.namespace

ee/app/views/shared/icons/_trial_activated_banner.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="79px" viewBox="0 0 80 79" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
+    <title>app_assets_images_illustration-congratulation-purchase</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="45.7657967" height="50.9941786" rx="8.467"></rect>
+        <ellipse id="path-3" cx="12.6126126" cy="12.454955" rx="12.6126126" ry="12.454955"></ellipse>
+    </defs>
+    <g id="v1-Trial-Signups" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="07-user-page-confirmation" transform="translate(-389.000000, -126.000000)">
+            <g id="global-components/banners/white" transform="translate(351.000000, 104.000000)">
+                <g id="app_assets_images_illustration-congratulation-purchase" transform="translate(38.000000, 22.000000)">
+                    <g id="Group">
+                        <ellipse id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="40" cy="39.5" rx="40" ry="39.5"></ellipse>
+                        <ellipse id="Oval" fill="#E5E5E5" fill-rule="nonzero" cx="64.8648649" cy="60.6876577" rx="12.6126126" ry="12.454955"></ellipse>
+                        <g transform="translate(41.380878, 39.870951) rotate(-3.000230) translate(-41.380878, -39.870951) translate(18.380878, 13.870951)">
+                            <rect id="Rectangle" fill="#E5E5E5" fill-rule="nonzero" x="-6.24735549e-07" y="0.962234417" width="45.7657967" height="50.9941786" rx="8.467"></rect>
+                            <g id="0-link" transform="translate(-0.000001, -0.000000)">
+                                <g id="0-Clipped">
+                                    <mask id="mask-2" fill="white">
+                                        <use xlink:href="#path-1"></use>
+                                    </mask>
+                                    <g id="0"></g>
+                                    <rect id="0" stroke="#EEEEEE" stroke-width="8.00000541" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-2)" x="0" y="0" width="45.7657967" height="50.9941786" rx="8.467"></rect>
+                                </g>
+                            </g>
+                            <g transform="translate(9.369375, 13.166675)" fill="#6B4FBB" fill-rule="nonzero" id="Rectangle">
+                                <rect opacity="0.3" x="0.0432432725" y="0.303189394" width="17.6576696" height="2.13513658" rx="1.06756829"></rect>
+                                <rect x="0.0432432725" y="7.99964505" width="21.9819968" height="2.13513658" rx="1.06756829"></rect>
+                                <rect opacity="0.3" x="0.0432432725" y="15.6968124" width="27.3874059" height="2.13513658" rx="1.06756829"></rect>
+                                <rect x="0.0432432725" y="23.3939798" width="17.6576696" height="2.13513658" rx="1.06756829"></rect>
+                            </g>
+                        </g>
+                        <g transform="translate(52.252252, 47.328829)">
+                            <g id="2-link">
+                                <g id="2-Clipped">
+                                    <mask id="mask-4" fill="white">
+                                        <use xlink:href="#path-3"></use>
+                                    </mask>
+                                    <g id="2"></g>
+                                    <ellipse id="2" stroke-opacity="0.05" stroke="#000000" stroke-width="8" fill="#31AF64" fill-rule="nonzero" mask="url(#mask-4)" cx="12.6126126" cy="12.454955" rx="12.6126126" ry="12.454955"></ellipse>
+                                </g>
+                            </g>
+                            <path d="M14.2322429,13.7298446 L11.0092553,13.7501149 C10.4126445,13.7538672 9.93190129,14.2378131 9.92814768,14.8312009 C9.9244463,15.4231563 10.4023539,15.9025053 10.9957417,15.898795 L14.9349488,15.8739985 C14.9961856,15.8736133 15.0560215,15.8682237 15.1144542,15.8581876 C15.1724071,15.8674917 15.2321799,15.8721291 15.2930586,15.8717462 C15.885014,15.8680232 16.3704216,15.3826156 16.3741671,14.7870791 L16.4191982,7.63061409 C16.4229263,7.03436137 15.9450142,6.55572856 15.3516264,6.55943889 C14.759671,6.56318355 14.2742634,7.04859117 14.2705179,7.64412766 L14.2322474,13.7291283" id="Path" fill="#FFFFFF" fill-rule="nonzero" transform="translate(13.173673, 11.229117) rotate(45.000000) translate(-13.173673, -11.229117) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
+

locale/gitlab.pot

@@ -2278,6 +2278,9 @@ msgstr ""
 msgid "BillingPlans|@%{user_name} you are currently using the %{plan_link} plan."
 msgstr ""
 
+msgid "BillingPlans|Congratulations, your new trial is activated"
+msgstr ""
+
 msgid "BillingPlans|Current plan"
 msgstr ""
 
@@ -2317,6 +2320,9 @@ msgstr ""
 msgid "BillingPlans|Your GitLab.com trial will <strong>expire after %{expiration_date}</strong>. You can learn more about GitLab.com Gold by reading about our %{features_link}."
 msgstr ""
 
+msgid "BillingPlans|Your Gold trial will <strong>expire after %{expiration_date}</strong>. You can learn more about GitLab.com Gold by reading about our %{features_link}."
+msgstr ""
+
 msgid "BillingPlans|features"
 msgstr ""