Update set_top_level_cookie UI and use I18n helper for strings

Shopify · Aug 15, 2018 · 440d389 · 440d389
1 parent c1db803
commit 440d389
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 6 deletions.
diff --git a/app/assets/javascripts/shopify_app/itp_polyfill.js b/app/assets/javascripts/shopify_app/itp_polyfill.js
@@ -15,11 +15,12 @@ function setCookieAndRedirect() {
 }
 
 document.addEventListener("DOMContentLoaded", function() {
-  var continueElement = document.getElementById("continue-button");
+  if (document.hasStorageAccess) {
+    var itpContent = document.querySelector('#CookiePartitionPrompt');
+    itpContent.style.display = 'block';
 
-  if (shouldTriggerCookiePartitioning()) {
-    continueElement.style.display = 'inline';
-    continueElement.addEventListener('click', setCookieAndRedirect);
+    var button = document.querySelector('#AcceptCookies');
+    button.addEventListener('click', setCookieAndRedirect);
   } else {
     setCookieAndRedirect();
   }

diff --git a/app/views/shopify_app/sessions/set_top_level_cookie.html.erb b/app/views/shopify_app/sessions/set_top_level_cookie.html.erb
@@ -2,10 +2,18 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
+  <link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.5.0/polaris.min.css" />
   <style>
-    #continue-button {
+    #CookiePartitionPrompt {
       display: none;
     }
+
+    .Polaris-Page {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
   </style>
   <base target="_top">
   <title>Redirecting…</title>
@@ -20,6 +28,39 @@
   <%= javascript_include_tag('shopify_app/itp_polyfill', crossorigin: 'anonymous', integrity: true) %>
 </head>
 <body>
-<button id="continue-button">Continue</button>
+  <main id="CookiePartitionPrompt">
+    <div class="Polaris-Page">
+      <div class="Polaris-Page__Content">
+        <div class="Polaris-Layout">
+          <div class="Polaris-Layout__Section">
+            <div class="Polaris-Stack Polaris-Stack--vertical">
+              <div class="Polaris-Stack__Item">
+                <div class="Polaris-Card">
+                  <div class="Polaris-Card__Header">
+                    <h1 class="Polaris-Heading"><%= I18n.t('enable_cookies_heading', app: ShopifyApp.configuration.application_name) %></h1>
+                  </div>
+                  <div class="Polaris-Card__Section">
+                    <p><%= I18n.t('enable_cookies_body', app: ShopifyApp.configuration.application_name) %></p>
+                  </div>
+                  <div class="Polaris-Card__Section Polaris-Card__Section--subdued">
+                    <p><%= I18n.t('enable_cookies_footer') %></p>
+                  </div>
+                </div>
+              </div>
+              <div class="Polaris-Stack__Item">
+                <div class="Polaris-Stack Polaris-Stack--distributionTrailing">
+                  <div class="Polaris-Stack__Item">
+                    <button type="button" class="Polaris-Button Polaris-Button--primary" id="AcceptCookies">
+                      <span class="Polaris-Button__Content"><span><%= I18n.t('enable_cookies_action') %></span></span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
 </body>
 </html>
diff --git a/config/locales/de.yml b/config/locales/de.yml
@@ -1,3 +1,7 @@
 de:
   logged_out: 'Erfolgreich ausgelogt'
   could_not_log_in: 'Shopify Store Login fehlgeschlagen'
+  enable_cookies_heading: "Enable cookies from %{app}"
+  enable_cookies_body: "You must manually enable cookies in this browser in order to use %{app} within Shopify."
+  enable_cookies_footer: 'Cookies let the app authenticate you by temporarily storing your preferences and personal information. They expire after 30 days.'
+  enable_cookies_action: 'Enable cookies'
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -2,3 +2,7 @@ en:
   logged_out: 'Successfully logged out'
   could_not_log_in: 'Could not log in to Shopify store'
   invalid_shop_url: 'Invalid shop domain'
+  enable_cookies_heading: "Enable cookies from %{app}"
+  enable_cookies_body: "You must manually enable cookies in this browser in order to use %{app} within Shopify."
+  enable_cookies_footer: 'Cookies let the app authenticate you by temporarily storing your preferences and personal information. They expire after 30 days.'
+  enable_cookies_action: 'Enable cookies'
diff --git a/config/locales/es.yml b/config/locales/es.yml
@@ -1,3 +1,7 @@
 es:
   logged_out: 'Cerrar sesión'
   could_not_log_in: 'No se pudo iniciar sesión en tu tienda de Shopify'
+  enable_cookies_heading: "Enable cookies from %{app}"
+  enable_cookies_body: "You must manually enable cookies in this browser in order to use %{app} within Shopify."
+  enable_cookies_footer: 'Cookies let the app authenticate you by temporarily storing your preferences and personal information. They expire after 30 days.'
+  enable_cookies_action: 'Enable cookies'
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
@@ -2,3 +2,7 @@ fr:
   logged_out: 'Vous êtes déconnecté(e)'
   could_not_log_in: 'Impossible de se connecter à la boutique Shopify'
   invalid_shop_url: 'Url invalide'
+  enable_cookies_heading: "Enable cookies from %{app}"
+  enable_cookies_body: "You must manually enable cookies in this browser in order to use %{app} within Shopify."
+  enable_cookies_footer: 'Cookies let the app authenticate you by temporarily storing your preferences and personal information. They expire after 30 days.'
+  enable_cookies_action: 'Enable cookies'
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
@@ -1,3 +1,7 @@
 ja:
   logged_out: 'ログインに成功しました'
   could_not_log_in: 'Shopifyストアにログインできませんでした'
+  enable_cookies_heading: "Enable cookies from %{app}"
+  enable_cookies_body: "You must manually enable cookies in this browser in order to use %{app} within Shopify."
+  enable_cookies_footer: 'Cookies let the app authenticate you by temporarily storing your preferences and personal information. They expire after 30 days.'
+  enable_cookies_action: 'Enable cookies'