shopify_app 14.4.4 → 17.0.0

data/app/views/shopify_app/partials/_layout_styles.html.erb

@@ -35,7 +35,7 @@
     min-height:100%;
     margin:0;
     padding:0;
-    background-color:#f4f6f8;
+    background-color:#f6f6f7;
   }
 
   *,
@@ -61,6 +61,10 @@
     max-width:99.8rem;
   }
 
+  .Polaris-Page--InstallApp {
+    max-width: 70rem;
+  }
+
   @media (min-width: 30.625em) {
     .Polaris-Page {
       padding:0 2rem;
@@ -73,6 +77,7 @@
   }
 
   .Polaris-Page__Content {
+    width: 100%;
     margin:2rem 0;
   }
 
@@ -158,6 +163,16 @@
     justify-content:flex-end;
   }
 
+  .Polaris-Stack--distributionTrailingCustomSpacing {
+    margin-right:2rem;
+  }
+
+  @media (min-width: 30.625em) {
+    .Polaris-Stack--distributionTrailingCustomSpacing {
+      margin-right:0;
+    }
+  }
+
   .Polaris-Stack--vertical {
     -webkit-box-orient:vertical;
     -webkit-box-direction:normal;

data/app/views/shopify_app/partials/_typography_styles.html.erb

@@ -16,16 +16,16 @@
     margin:0;
   }
 
-  .Polaris-DisplayText--sizeMedium {
-    font-size:2.1rem;
+  .Polaris-DisplayText--sizeSmall {
+    font-size:1.6rem;
     font-weight:400;
-    line-height:2.8rem;
+    line-height:2.4rem;
   }
 
   @media (min-width: 40em) {
-    .Polaris-DisplayText--sizeMedium {
-      font-size:2.6rem;
-      line-height:3.2rem;
+    .Polaris-DisplayText--sizeSmall {
+      font-size:2rem;
+      line-height:2.8rem;
     }
   }
 

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

@@ -52,7 +52,7 @@
                 </div>
               </div>
               <div class="Polaris-Stack__Item">
-                <div class="Polaris-Stack Polaris-Stack--distributionTrailing">
+                <div class="Polaris-Stack Polaris-Stack--distributionTrailing Polaris-Stack--distributionTrailingCustomSpacing">
                   <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>

data/app/views/shopify_app/sessions/new.html.erb

@@ -5,119 +5,47 @@
 
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <style>
-    * {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-
-    body {
-      padding: 2.5em 0;
-      color: #212b37;
-      font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif;
-    }
-
-    .container {
-      width: 100%;
-      text-align: center;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    @media screen and (min-width: 510px) {
-      .container {
-        width: 510px;
-      }
-    }
-
-    .title {
-      font-size: 1.5em;
-      margin: 2em auto;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      word-break: break-all;
-    }
-
-    .subtitle {
-      font-size: 0.8em;
-      font-weight: 500;
-      color: #64737f;
-      line-height: 2em;
-    }
-
-    .error {
-      line-height: 1em;
-      padding: 0.5em;
-      color: red;
-    }
-
-    input.marketing-input {
-      width: 100%;
-      height: 52px;
-      padding: 0 15px;
-      box-shadow: 0 0 0 1px #ddd;
-      border: 0;
-      border-radius: 5px;
-      background-color: #fff;
-      font-size: 1em;
-      margin-bottom: 15px;
-    }
-
-    input.marketing-input:focus {
-      color: #000;
-      outline: 0;
-      box-shadow: 0 0 0 2px #5e6ebf;
-    }
-
-    button.marketing-button {
-      display: inline-block;
-      width: 100%;
-      padding: 1.0625em 1.875em;
-      background-color: #5e6ebf;
-      color: #fff;
-      font-weight: 700;
-      font-size: 1em;
-      text-align: center;
-      outline: none;
-      border: 0 solid transparent;
-      border-radius: 5px;
-      cursor: pointer;
-    }
-
-    button.marketing-button:hover {
-      background: linear-gradient(to bottom, #5c6ac4, #4959bd);
-      border-color: #3f4eae;
-    }
-
-    button.marketing-button:focus {
-      box-shadow: 0 0 0.1875em 0.1875em rgba(94,110,191,0.5);
-      background-color: #223274;
-      color: #fff;
-    }
-  </style>
+  <%= render 'shopify_app/partials/layout_styles' %>
+  <%= render 'shopify_app/partials/typography_styles' %>
+  <%= render 'shopify_app/partials/card_styles' %>
+  <%= render 'shopify_app/partials/button_styles' %>
+  <%= render 'shopify_app/partials/form_styles' %>
 </head>
 <body>
-
   <main class="container" role="main">
-    <% application_name = ShopifyApp.configuration.application_name %>
-    <h3 class="title">
-      <%= application_name.presence || 'Shopify App – Installation' %>
-    </h3>
-    <p class="subtitle">
-      <label for="shop">Enter your shop domain to log in or install this app.</label>
-    </p>
-
-    <%= form_tag login_path do %>
-      <% if flash[:error] %>
-        <div class="error"><%= flash[:error] %></div>
-      <% end %>
-      <input id="shop" name="shop" type="text" autofocus="autofocus" placeholder="example.myshopify.com" class="marketing-input">
-      <button type="submit" class="marketing-button">Install</button>
-    <% end %>
+    <div class="Polaris-Page Polaris-Page--InstallApp">
+      <div class="Polaris-Page__Content">
+        <div class="Polaris-Layout">
+          <div class="Polaris-Layout__Section">
+            <div class="Polaris-Card">
+              <div class="Polaris-Card__Header">
+                <% application_name = ShopifyApp.configuration.application_name %>
+                <h1 class="Polaris-Heading">
+                  <%= application_name.presence || 'Shopify App – Installation' %>
+                </h1>
+              </div>
+              <div class="Polaris-Card__Section">
+                <%= form_tag login_path do %>
+                  <div class="Polaris-Label">
+                    <label class="Polaris-Label__Text" for="shop">Enter your shop domain to log in or install this app.</label>
+                  </div>
+                  <div class="Polaris-TextField <%= 'Polaris-TextField--InlineError' if flash[:error]%>">
+                    <input id="shop" name="shop" type="text" autofocus="autofocus" placeholder="example.myshopify.com" class="Polaris-TextField__Input">
+                    <div class="Polaris-TextField__Backdrop"></div>
+                  </div>
+                  <% if flash[:error] %>
+                    <div class="Polaris-InlineError"><%= flash[:error] %></div>
+                  <% end %>
+                  <button type="submit" class="Polaris-Button Polaris-Button--primary Polaris-Button--sizeLarge">
+                    <span class="Polaris-Button__Content"><span>Install app</span>
+                  </button>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </main>
-
 </body>
 </html>

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

@@ -49,7 +49,7 @@
               </div>
             </div>
             <div class="Polaris-Stack__Item">
-              <div class="Polaris-Stack Polaris-Stack--distributionTrailing">
+              <div class="Polaris-Stack Polaris-Stack--distributionTrailing Polaris-Stack--distributionTrailingCustomSpacing">
                 <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>

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

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <base target="_top">
   <title>Redirecting…</title>
+  <%= render 'shopify_app/partials/card_styles' %>
   <%= render 'shopify_app/partials/layout_styles' %>
   <%= render 'shopify_app/partials/typography_styles' %>
   <%= render 'shopify_app/partials/button_styles' %>
@@ -25,26 +26,30 @@
           <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 class="Polaris-Card">
+                  <div class="Polaris-Card__Section">
+                    <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--sizeSmall"><%= 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__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 class="Polaris-EmptyState__ImageContainer">
+                          <%= image_tag 'storage_access.svg', role: "presentation", alt: "", class: "Polaris-EmptyState__Image" %>
                         </div>
                       </div>
                     </div>
-                    <div class="Polaris-EmptyState__ImageContainer">
-                      <%= image_tag 'storage_access.svg', role: "presentation", alt: "", class: "Polaris-EmptyState__Image" %>
-                    </div>
                   </div>
                 </div>
               </div>

data/config/locales/de.yml

@@ -4,19 +4,19 @@ de:
   could_not_log_in: Shopify Store Login fehlgeschlagen
   invalid_shop_url: Ungültige Shop-Domain
   enable_cookies_heading: Cookies von %{app} aktivieren
-  enable_cookies_body: Sie müssen Cookies in diesem Browser manuell aktivieren, um
-    %{app} in Shopify verwenden zu können.
-  enable_cookies_footer: Mithilfe von Cookies kann die App Sie authentifizieren, indem
-    Ihre Einstellungen und personenbezogenen Daten vorübergehend gespeichert werden.
-    Sie laufen nach 30 Tagen ab.
+  enable_cookies_body: Du musst Cookies in diesem Browser manuell aktivieren, um %{app}
+    in Shopify verwenden zu können.
+  enable_cookies_footer: Mithilfe von Cookies kann die App dich authentifizieren,
+    indem deine Einstellungen und personenbezogenen Daten vorübergehend gespeichert
+    werden. Sie laufen nach 30 Tagen ab.
   enable_cookies_action: Cookies aktivieren
-  top_level_interaction_heading: Ihr Browser muss %{app} authentifizieren
-  top_level_interaction_body: Ihr Browser verlangt, dass Apps wie %{app} Sie um Zugriff
-    auf Cookies bitten, bevor Shopify sie für Sie öffnen kann.
+  top_level_interaction_heading: Dein Browser muss %{app} authentifizieren
+  top_level_interaction_body: Dein Browser verlangt, dass Apps wie %{app} dich um
+    Zugriff auf Cookies bitten, bevor Shopify sie für dich öffnen kann.
   top_level_interaction_action: Weiter
   request_storage_access_heading: "%{app} braucht Zugriff auf Cookies"
-  request_storage_access_body: Damit kann die App Sie authentifizieren, indem Ihre
-    Einstellungen und personenbezogenen Daten vorübergehend gespeichert werden. Klicken
-    Sie auf "Weiter" und erlauben Sie den Cookies, die App zu verwenden.
+  request_storage_access_body: Damit kann die App dich authentifizieren, indem deine
+    Einstellungen und personenbezogenen Daten vorübergehend gespeichert werden. Klicke
+    auf "Weiter" und erlaube Cookies, um die App zu verwenden.
   request_storage_access_footer: Cookies laufen nach 30 Tagen ab.
   request_storage_access_action: Weiter

data/config/locales/vi.yml

@@ -0,0 +1,22 @@
+---
+vi:
+  logged_out: Đã đăng xuất thành công
+  could_not_log_in: Không thể đăng nhập vào cửa hàng trên Shopify
+  invalid_shop_url: Miền cửa hàng không hợp lệ
+  enable_cookies_heading: Bật cookie từ %{app}
+  enable_cookies_body: Bạn phải bật cookie trong trình duyệt này theo cách thủ công
+    để sử dụng %{app} trong Shopify.
+  enable_cookies_footer: Cookie cho phép ứng dụng xác thực bạn bằng cách tạm thời
+    lưu trữ tùy chọn và thông tin cá nhân của bạn. Những thông tin này sẽ hết hạn
+    sau 30 ngày.
+  enable_cookies_action: Bật cookie
+  top_level_interaction_heading: Trình duyệt của bạn cần xác thực %{app}
+  top_level_interaction_body: Trình duyệt của bạn cần các ứng dụng như %{app} để yêu
+    cầu quyền truy cập vào cookie thì Shopify mới có thể mở giúp bạn.
+  top_level_interaction_action: Tiếp tục
+  request_storage_access_heading: "%{app} cần quyền truy cập cookie"
+  request_storage_access_body: Nhờ vậy, ứng dụng có thể xác thực bạn bằng cách tạm
+    thời lưu trữ thông tin cá nhân của bạn. Nhấp vào tiếp tục và cho phép cookie sử
+    dụng ứng dụng.
+  request_storage_access_footer: Cookie sẽ hết hạn sau 30 ngày.
+  request_storage_access_action: Tiếp tục

data/config/locales/zh-CN.yml

@@ -8,7 +8,7 @@ zh-CN:
   enable_cookies_footer: Cookie 使此应用能够通过暂时存储您的偏好设置和个人信息来验证您的身份。这些信息将在 30 天后过期。
   enable_cookies_action: 启用 Cookie
   top_level_interaction_heading: 您的浏览器需要对 %{app} 进行验证
-  top_level_interaction_body: 您的浏览器要求类似 %{app} 的应用向您请求访问 Cookie，之后 Shopify 才能为您打开它。
+  top_level_interaction_body: 您的浏览器要求类似 %{app} 的应用向您申请访问 Cookie，之后 Shopify 才能为您打开它。
   top_level_interaction_action: 继续
   request_storage_access_heading: "%{app} 需要访问 Cookie"
   request_storage_access_body: 这使此应用能够通过暂时存储您的个人信息来验证您的身份。单击继续并启用 Cookie 以使用此应用。

data/docs/Releasing.md

@@ -1,9 +1,11 @@
-Releasing ShopifyApp
+# Releasing ShopifyApp
 
-1. Check the Semantic Versioning page for info on how to version the new release: http://semver.org
+1. Make the code changes in a separate PR that doesn't modify the version.
+1. After that is merged, check the Semantic Versioning page for info on how to version the new release: http://semver.org
 1. Create a pull request with the following changes:
     - Update the version of ShopifyApp in lib/shopify_app/version.rb
     - Update the version of shopify_app in package.json
+    - Run `bundle` to update `Gemfile.lock`
     - Add a CHANGELOG entry for the new release with the date
     - Change the title of the PR to something like: "Packaging for release X.Y.Z"
 1. Merge your pull request
@@ -14,5 +16,5 @@ $ git tag -f vX.Y.Z && git push --tags --force
 ```
 1. Use Shipit to build and push the gem
 
-If you see an error like 'You need to create the vX.Y.X tag first', clear GIT
+If you see an error like 'You need to create the vX.Y.X tag first', clear git
 cache in Shipit settings

data/lib/generators/shopify_app/home_controller/home_controller_generator.rb

@@ -6,16 +6,15 @@ module ShopifyApp
     class HomeControllerGenerator < Rails::Generators::Base
       source_root File.expand_path('../templates', __FILE__)
 
-      class_option :with_session_token, type: :boolean, default: false
+      class_option :with_cookie_authentication, type: :boolean, default: false
+      class_option :embedded, type: :string, default: 'true'
 
       def create_home_controller
-        @with_session_token = options['with_session_token']
-
         template(home_controller_template, 'app/controllers/home_controller.rb')
       end
 
       def create_products_controller
-        generate("shopify_app:products_controller") if with_session_token?
+        generate("shopify_app:products_controller") unless with_cookie_authentication?
       end
 
       def create_home_index_view
@@ -28,16 +27,26 @@ module ShopifyApp
 
       private
 
+      def embedded?
+        options['embedded'] == 'true'
+      end
+
       def embedded_app?
         ShopifyApp.configuration.embedded_app?
       end
 
-      def with_session_token?
-        @with_session_token
+      def with_cookie_authentication?
+        options['with_cookie_authentication']
       end
 
       def home_controller_template
-        with_session_token? ? 'unauthenticated_home_controller.rb' : 'home_controller.rb'
+        return 'unauthenticated_home_controller.rb' unless authenticated_home_controller_required?
+
+        'home_controller.rb'
+      end
+
+      def authenticated_home_controller_required?
+        with_cookie_authentication? || !embedded? || !embedded_app?
       end
     end
   end

data/lib/generators/shopify_app/home_controller/templates/index.html.erb

@@ -7,7 +7,7 @@
       rel="stylesheet"
       href="https://unpkg.com/@shopify/polaris@4.25.0/styles.min.css"
       />
-<% if @with_session_token %>    <script>
+<% unless with_cookie_authentication? %>    <script>
       document.addEventListener("DOMContentLoaded", async function() {
         var SessionToken = window["app-bridge"].actions.SessionToken
         var app = window.app;
@@ -47,7 +47,7 @@
 <% end %>  </head>
   <body>
     <h2>Products</h2>
-<% if @with_session_token %>    <div id="products"><br>Loading...</div><% else %>
+<% unless with_cookie_authentication? %>    <div id="products"><br>Loading...</div><% else %>
     <ul>
       <%% @products.each do |product| %>
         <li><%%= link_to product.title, "https://#{@current_shopify_session.domain}/admin/products/#{product.id}", target: "_top" %></li>
@@ -55,17 +55,17 @@
     </ul>
 
     <hr>
-
+    <% end %>
     <h2>Webhooks</h2>
 
     <%% if @webhooks.present? %>
-      <ul>
-        <%% @webhooks.each do |webhook| %>
-          <li><%%= webhook.topic %> : <%%= webhook.address %></li>
-        <%% end %>
-      </ul>
+    <ul>
+      <%% @webhooks.each do |webhook| %>
+      <li><%%= webhook.topic %> : <%%= webhook.address %></li>
+      <%% end %>
+    </ul>
     <%% else %>
-      <p>This app has not created any webhooks for this Shop. Add webhooks to your ShopifyApp initializer if you need webhooks</p>
-    <%% end %><% end %>
+    <p>This app has not created any webhooks for this Shop. Add webhooks to your ShopifyApp initializer if you need webhooks</p>
+    <%% end %>
   </body>
 </html>