RubyGems - shopify_app - Versions diffs - 8.3.2 → 8.4.0 - Mend

shopify_app 8.3.2 → 8.4.0

Files changed (52) hide show

checksums.yaml +4 -4
data/.babelrc +5 -0
data/.github/CODEOWNERS +1 -0
data/.github/probots.yml +2 -0
data/.gitignore +1 -0
data/.nvmrc +1 -0
data/.travis.yml +24 -3
data/CHANGELOG.md +5 -0
data/README.md +1 -0
data/app/assets/images/storage_access.svg +2 -0
data/app/assets/javascripts/shopify_app/enable_cookies.js +3 -0
data/app/assets/javascripts/shopify_app/itp_helper.js +40 -0
data/app/assets/javascripts/shopify_app/partition_cookies.js +7 -0
data/app/assets/javascripts/shopify_app/request_storage_access.js +3 -0
data/app/assets/javascripts/shopify_app/storage_access.js +116 -0
data/app/assets/javascripts/shopify_app/storage_access_redirect.js +17 -0
data/app/assets/javascripts/shopify_app/top_level.js +2 -0
data/app/assets/javascripts/shopify_app/top_level_interaction.js +11 -0
data/app/controllers/shopify_app/callback_controller.rb +92 -0
data/app/controllers/shopify_app/sessions_controller.rb +57 -84
data/app/views/shopify_app/partials/_button_styles.html.erb +104 -0
data/app/views/shopify_app/partials/_card_styles.html.erb +33 -0
data/app/views/shopify_app/partials/_empty_state_styles.html.erb +129 -0
data/app/views/shopify_app/partials/_layout_styles.html.erb +167 -0
data/app/views/shopify_app/partials/_typography_styles.html.erb +35 -0
data/app/views/shopify_app/sessions/enable_cookies.html.erb +7 -334
data/app/views/shopify_app/sessions/request_storage_access.html.erb +67 -0
data/app/views/shopify_app/sessions/top_level_interaction.html.erb +63 -0
data/config/locales/de.yml +10 -0
data/config/locales/en.yml +7 -0
data/config/locales/es.yml +10 -0
data/config/locales/fr.yml +11 -0
data/config/locales/it.yml +11 -0
data/config/locales/ja.yml +8 -0
data/config/locales/pt-BR.yml +10 -0
data/config/routes.rb +10 -1
data/karma.conf.js +43 -0
data/lib/shopify_app.rb +1 -0
data/lib/shopify_app/controller_concerns/itp.rb +45 -0
data/lib/shopify_app/controller_concerns/login_protection.rb +7 -11
data/lib/shopify_app/engine.rb +4 -1
data/lib/shopify_app/utils.rb +1 -1
data/lib/shopify_app/version.rb +1 -1
data/package-lock.json +23 -0
data/package.json +28 -0
data/service.yml +7 -0
data/shipit.rubygems.yml +2 -0
data/shopify_app.gemspec +1 -0
data/webpack.config.js +24 -0
data/yarn.lock +4594 -0
metadata +44 -3
data/app/assets/javascripts/shopify_app/itp_polyfill.js +0 -30

data/app/views/shopify_app/sessions/enable_cookies.html.erb CHANGED

@@ -2,350 +2,23 @@
 <html lang="<%= I18n.locale %>">
 <head>
   <meta charset="utf-8" />
+  <base target="_top">
+  <title>Redirecting…</title>
+  <%= render 'shopify_app/partials/layout_styles' %>
+  <%= render 'shopify_app/partials/typography_styles' %>
+  <%= render 'shopify_app/partials/card_styles' %>
+  <%= render 'shopify_app/partials/button_styles' %>
   <style>
-    html,
-    body {
-      min-height:100%;
-      height:100%;
-      font-size:1.5rem;
-      font-weight:400;
-      line-height:2rem;
-      text-transform:initial;
-      letter-spacing:initial;
-      font-weight:400;
-      color:#212b36;
-      font-family:-apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif;
-    }
-    @media (min-width: 40em) {
-      html,
-      body {
-        font-size:1.4rem;
-      }
-    }
-    html {
-      position:relative;
-      font-size:62.5%;
-      -webkit-font-smoothing:antialiased;
-      -moz-osx-font-smoothing:grayscale;
-      -webkit-text-size-adjust:100%;
-      -ms-text-size-adjust:100%;
-      text-size-adjust:100%;
-      text-rendering:optimizeLegibility;
-    }
-    body {
-      min-height:100%;
-      margin:0;
-      padding:0;
-      background-color:#f4f6f8;
-    }
-    *,
-    *::before,
-    *::after{
-      box-sizing:border-box; }
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    p {
-      margin:0;
-      font-size:1em;
-      font-weight:400;
-    }
     #CookiePartitionPrompt {
       display: none;
     }
-    .Polaris-Page {
-      margin:0 auto;
-      padding:0;
-      max-width:99.8rem;
-    }
-    @media (min-width: 30.625em) {
-      .Polaris-Page {
-        padding:0 2rem;
-      }
-    }
-    @media (min-width: 46.5em) {
-      .Polaris-Page {
-        padding:0 3.2rem;
-      }
-    }
-    .Polaris-Page__Content {
-      margin:2rem 0;
-    }
-    @media (min-width: 46.5em) {
-      .Polaris-Page__Content {
-        margin-top:2rem;
-      }
-    }
-    @media (min-width: 46.5em) {
-      .Polaris-Page {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-      }
-    }
-    .Polaris-Layout {
-      display:-webkit-box;
-      display:-ms-flexbox;
-      display:flex;
-      -ms-flex-wrap:wrap;
-      flex-wrap:wrap;
-      -webkit-box-pack:center;
-      -ms-flex-pack:center;
-      justify-content:center;
-      -webkit-box-align:start;
-      -ms-flex-align:start;
-      align-items:flex-start;
-      margin-top:-2rem;
-      margin-left:-2rem;
-    }
-    .Polaris-Layout__Section {
-      -webkit-box-flex:2;
-      -ms-flex:2 2 48rem;
-      flex:2 2 48rem;
-      min-width:51%;
-    }
-    .Polaris-Layout__Section--fullWidth {
-      -webkit-box-flex:1;
-      -ms-flex:1 1 100%;
-      flex:1 1 100%;
-    }
-    .Polaris-Layout__Section {
-      max-width:calc(100% - 2rem);
-      margin-top:2rem;
-      margin-left:2rem;
-    }
-    .Polaris-Stack {
-      margin-top:-1.6rem;
-      margin-left:-1.6rem;
-      display:-webkit-box;
-      display:-ms-flexbox;
-      display:flex;
-      -ms-flex-wrap:wrap;
-      flex-wrap:wrap;
-      -webkit-box-align:stretch;
-      -ms-flex-align:stretch;
-      align-items:stretch;
-    }
-    .Polaris-Stack > .Polaris-Stack__Item {
-      margin-top:1.6rem;
-      margin-left:1.6rem;
-      max-width:calc(100% - 1.6rem);
-    }
-    .Polaris-Stack__Item {
-      -webkit-box-flex:0;
-      -ms-flex:0 0 auto;
-      flex:0 0 auto;
-      min-width:0;
-    }
-    .Polaris-Heading {
-      font-size:1.7rem;
-      font-weight:600;
-      line-height:2.4rem;
-      margin:0;
-    }
-    @media (min-width: 40em) {
-      .Polaris-Heading {
-        font-size:1.6rem;
-      }
-    }
-    .Polaris-Card {
-      overflow:hidden;
-      background-color:white;
-      box-shadow:0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);
-    }
-    .Polaris-Card + .Polaris-Card {
-      margin-top:2rem;
-    }
-    @media (min-width: 30.625em) {
-      .Polaris-Card {
-        border-radius:3px;
-      }
-    }
-    .Polaris-Card__Header {
-      padding:2rem 2rem 0;
-    }
-    .Polaris-Card__Section {
-      padding:2rem;
-    }
-    .Polaris-Card__Section + .Polaris-Card__Section {
-      border-top:1px solid #dfe3e8;
-    }
-    .Polaris-Card__Section--subdued {
-      background-color:#f9fafb;
-    }
-    .Polaris-Stack--distributionTrailing {
-      -webkit-box-pack:end;
-      -ms-flex-pack:end;
-      justify-content:flex-end;
-    }
-    .Polaris-Stack--vertical {
-      -webkit-box-orient:vertical;
-      -webkit-box-direction:normal;
-      -ms-flex-direction:column;
-      flex-direction:column;
-    }
-    .Polaris-Button {
-      fill:#637381;
-      position:relative;
-      display:-webkit-inline-box;
-      display:-ms-inline-flexbox;
-      display:inline-flex;
-      -webkit-box-align:center;
-      -ms-flex-align:center;
-      align-items:center;
-      -webkit-box-pack:center;
-      -ms-flex-pack:center;
-      justify-content:center;
-      min-height:3.6rem;
-      min-width:3.6rem;
-      margin:0;
-      padding:0.7rem 1.6rem;
-      background:linear-gradient(to bottom, white, #f9fafb);
-      border:1px solid #c4cdd5;
-      box-shadow:0 1px 0 0 rgba(22, 29, 37, 0.05);
-      border-radius:3px;
-      line-height:1;
-      color:#212b36;
-      text-align:center;
-      cursor:pointer;
-      -webkit-user-select:none;
-      -moz-user-select:none;
-      -ms-user-select:none;
-      user-select:none;
-      text-decoration:none;
-      transition-property:background, border, box-shadow;
-      transition-duration:200ms;
-      transition-timing-function:cubic-bezier(0.64, 0, 0.35, 1);
-    }
-    .Polaris-Button:hover {
-      background:linear-gradient(to bottom, #f9fafb, #f4f6f8);
-      border-color:#c4cdd5;
-    }
-    .Polaris-Button:focus {
-      border-color:#5c6ac4;
-      outline:0;
-      box-shadow:0 0 0 1px #5c6ac4;
-    }
-    .Polaris-Button:active {
-      background:linear-gradient(to bottom, #f4f6f8, #f4f6f8);
-      border-color:#c4cdd5;
-      box-shadow:0 0 0 0 transparent, inset 0 1px 1px 0 rgba(99, 115, 129, 0.1), inset 0 1px 4px 0 rgba(99, 115, 129, 0.2);
-    }
-    .Polaris-Button.Polaris-Button--disabled {
-      fill:#919eab;
-      transition:none;
-      background:linear-gradient(to bottom, #f4f6f8, #f4f6f8);
-      color:#919eab;
-    }
-    .Polaris-Button__Content {
-      font-size:1.5rem;
-      font-weight:400;
-      line-height:1.6rem;
-      text-transform:initial;
-      letter-spacing:initial;
-      position:relative;
-      display:-webkit-box;
-      display:-ms-flexbox;
-      display:flex;
-      -webkit-box-pack:center;
-      -ms-flex-pack:center;
-      justify-content:center;
-      -webkit-box-align:center;
-      -ms-flex-align:center;
-      align-items:center;
-      min-width:1px;
-      min-height:1px;
-    }
-    @media (min-width: 40em) {
-      .Polaris-Button__Content {
-        font-size:1.4rem;
-      }
-    }
-    .Polaris-Button--primary {
-      background:linear-gradient(to bottom, #6371c7, #5563c1);
-      border-color:#3f4eae;
-      box-shadow:inset 0 1px 0 0 #6774c8, 0 1px 0 0 rgba(22, 29, 37, 0.05), 0 0 0 0 transparent;
-      color:white;
-      fill:white;
-    }
-    .Polaris-Button--primary:hover {
-      background:linear-gradient(to bottom, #5c6ac4, #4959bd);
-      border-color:#3f4eae;
-      color:white;
-      text-decoration:none;
-    }
-    .Polaris-Button--primary:focus {
-      border-color:#202e78;
-      box-shadow:inset 0 1px 0 0 #6f7bcb, 0 1px 0 0 rgba(22, 29, 37, 0.05), 0 0 0 1px #202e78;
-    }
-    .Polaris-Button--primary:active {
-      background:linear-gradient(to bottom, #3f4eae, #3f4eae);
-      border-color:#38469b;
-      box-shadow:inset 0 0 0 0 transparent, 0 1px 0 0 rgba(22, 29, 37, 0.05), 0 0 1px 0 #38469b;
-    }
-    .Polaris-Button--primary.Polaris-Button--disabled {
-      fill:white;
-      background:linear-gradient(to bottom, #bac0e6, #bac0e6);
-      border-color:#a7aedf;
-      box-shadow:none;
-      color:white;
-    }
   </style>
-  <base target="_top">
-  <title>Redirecting…</title>
   <script>
     window.apiKey = "<%= ShopifyApp.configuration.api_key %>";
     window.shopOrigin = "https://<%= @shop %>";
   </script>
-  <%= javascript_include_tag('shopify_app/itp_polyfill', crossorigin: 'anonymous', integrity: true) %>
+  <%= javascript_include_tag('shopify_app/enable_cookies', crossorigin: 'anonymous', integrity: true) %>
 </head>
 <body>
   <main id="CookiePartitionPrompt">

data/app/views/shopify_app/sessions/request_storage_access.html.erb ADDED

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+<head>
+  <meta charset="utf-8" />
+  <base target="_top">
+  <title>Redirecting…</title>
+  <%= render 'shopify_app/partials/layout_styles' %>
+  <%= render 'shopify_app/partials/typography_styles' %>
+  <%= render 'shopify_app/partials/card_styles' %>
+  <%= render 'shopify_app/partials/button_styles' %>
+  <style>
+    #RequestStorageAccess {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+<%=
+  content_tag(:div, nil,
+              id: 'redirection-target',
+              data: {
+                  target: {
+                      myshopifyUrl: "https://#{current_shopify_domain}",
+                      hasStorageAccessUrl: "#{has_storage_access_url}",
+                      doesNotHaveStorageAccessUrl: "#{does_not_have_storage_access_url}",
+                      appHomeUrl: "#{app_home_url}"
+                  },
+              },
+              )
+%>
+<main id="RequestStorageAccess">
+  <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('request_storage_access_heading', app: ShopifyApp.configuration.application_name) %></h1>
+                </div>
+                <div class="Polaris-Card__Section">
+                  <p><%= I18n.t('request_storage_access_body', app: ShopifyApp.configuration.application_name) %></p>
+                </div>
+                <div class="Polaris-Card__Section Polaris-Card__Section--subdued">
+                  <p><%= I18n.t('request_storage_access_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="TriggerAllowCookiesPrompt">
+                    <span class="Polaris-Button__Content"><span><%= I18n.t('request_storage_access_action') %></span></span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+<%= javascript_include_tag('shopify_app/request_storage_access', crossorigin: 'anonymous', integrity: true) %>
+</body>
+</html>

data/app/views/shopify_app/sessions/top_level_interaction.html.erb ADDED

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+<head>
+  <meta charset="utf-8" />
+  <base target="_top">
+  <title>Redirecting…</title>
+  <%= render 'shopify_app/partials/layout_styles' %>
+  <%= render 'shopify_app/partials/typography_styles' %>
+  <%= render 'shopify_app/partials/button_styles' %>
+  <%= render 'shopify_app/partials/empty_state_styles' %>
+  <style>
+    #TopLevelInteractionContent {
+      display: none;
+    }
+  </style>
+  <script>
+    window.apiKey = "<%= ShopifyApp.configuration.api_key %>";
+    window.shopOrigin = "https://<%= @shop %>";
+    window.redirectUrl = "<%= @url %>";
+  </script>
+  <%= javascript_include_tag('shopify_app/top_level', crossorigin: 'anonymous', integrity: true) %>
+</head>
+<body>
+  <main id="TopLevelInteractionContent">
+    <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-EmptyState">
+                  <div class="Polaris-EmptyState__Section">
+                    <div class="Polaris-EmptyState__DetailsContainer">
+                      <div class="Polaris-EmptyState__Details">
+                        <div class="Polaris-TextContainer">
+                          <h1 class="Polaris-DisplayText Polaris-DisplayText--sizeMedium"><%= I18n.t('top_level_interaction_heading', app: ShopifyApp.configuration.application_name) %></h1>
+                          <div class="Polaris-EmptyState__Content">
+                            <p><%= I18n.t('top_level_interaction_body', app: ShopifyApp.configuration.application_name) %></p>
+                          </div>
+                        </div>
+                        <div class="Polaris-EmptyState__Actions">
+                          <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
+                            <div class="Polaris-Stack__Item"><button type="button" id="TopLevelInteractionButton" class="Polaris-Button Polaris-Button--primary Polaris-Button--sizeLarge"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"></span><span><%= I18n.t('top_level_interaction_action') %></span></span></button></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="Polaris-EmptyState__ImageContainer">
+                      <%= image_tag 'storage_access.svg', role: "presentation", alt: "", class: "Polaris-EmptyState__Image" %>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>