ruby_shopify_app 1.0.0

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

@@ -0,0 +1,33 @@
+<style>
+  .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:8px;
+    }
+  }
+
+  .Polaris-Card__Header {
+    padding:2rem 2rem 0;
+  }
+
+  .Polaris-Card__Section {
+    padding:2rem;
+  }
+
+  .Polaris-Card__Section + .Polaris-Card__Section {
+    border-top:.1rem solid #e4e5e7;
+  }
+
+  .Polaris-Card__Section--subdued {
+    background-color:#fafbfb;
+  }
+</style>

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

@@ -0,0 +1,98 @@
+<style>
+  .Polaris-EmptyState {
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display:flex;
+    -webkit-box-orient:vertical;
+    -webkit-box-direction:normal;
+    -ms-flex-direction:column;
+    flex-direction:column;
+    -webkit-box-align:center;
+    -ms-flex-align:center;
+    align-items:center;
+    width:100%;
+    margin:0 auto;
+    padding:2rem 0 6rem;
+    max-width:99.8rem;
+  }
+
+  @media (min-width: 46.5em) {
+    .Polaris-EmptyState--imageContained .Polaris-EmptyState__Image {
+      position:initial;
+      width:100%;
+    }
+  }
+
+  .Polaris-EmptyState__Section {
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display:flex;
+    -webkit-box-orient:vertical;
+    -webkit-box-direction:reverse;
+    -ms-flex-direction:column-reverse;
+    flex-direction:column-reverse;
+    -webkit-box-flex:1;
+    -ms-flex:1 1 auto;
+    flex:1 1 auto;
+    -webkit-box-align:center;
+    -ms-flex-align:center;
+    align-items:center;
+    width:100%;
+  }
+
+  .Polaris-EmptyState__ImageContainer,
+  .Polaris-EmptyState__DetailsContainer {
+    -webkit-box-flex:1;
+    -ms-flex:1 1 auto;
+    flex:1 1 auto;
+    padding:0;
+    margin:0; 
+    text-align:center;
+  }
+
+  @media (min-width: 46.5em) {
+    .Polaris-EmptyState__ImageContainer,
+    .Polaris-EmptyState__DetailsContainer {
+      -ms-flex-preferred-size:50%;
+      flex-basis:50%;
+    }
+  }
+
+  .Polaris-EmptyState__Details {
+    max-width:40rem;
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display: flex;
+    -webkit-box-orient:vertical;
+    -webkit-box-direction:normal;
+    -ms-flex-direction:column;
+    flex-direction: column;
+    -webkit-box-align:center;
+    -ms-flex-align:center;
+    align-items: center;
+  }
+
+  .Polaris-EmptyState__Content {
+    margin-top: 1.6rem;
+    font-size:1.5rem;
+    font-weight:400;
+    line-height:2rem;
+    color:#6d7175;
+    padding-bottom: .8rem;
+  }
+
+  @media (min-width: 40em) {
+    .Polaris-EmptyState__Content {
+      font-size:1.4rem;
+    }
+  }
+
+  .Polaris-EmptyState__Actions {
+    margin-top:1.6rem;
+  }
+
+  .Polaris-EmptyState__Image {
+    margin: 0;
+    width: auto;
+  }
+</style>

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

@@ -0,0 +1,56 @@
+<style>
+  .Polaris-Label {
+    margin-bottom:.4rem;
+  }
+
+  .Polaris-Label__Text {
+    -webkit-tap-highlight-color:transparent;
+  }
+
+  .Polaris-TextField {
+    position:relative;
+    margin-bottom:1.6rem;
+  }
+
+  .Polaris-TextField--InlineError {
+    margin-bottom:.4rem;
+  }
+
+  .Polaris-TextField__Input {
+    width:100%;
+    padding:.5rem 1.2rem;
+    border:1px solid #c9cccf;
+    border-top-color:#aeb4b9;
+    border-radius:4px;
+    box-shadow:none;
+    line-height:2.4rem;
+  }
+
+  .Polaris-TextField__Input:focus {
+    outline:none;
+  }
+
+  .Polaris-TextField__Backdrop:after {
+    content:'';
+    position:absolute;
+    z-index:1;
+    top:-.2rem;
+    right:-.2rem;
+    bottom:-.2rem;
+    left:-.2rem;
+    display:block;
+    pointer-events:none;
+    box-shadow:0 0 0 -.2rem #448fff;
+    transition:box-shadow .1s cubic-bezier(0.64, 0, 0.35, 1);
+    border-radius:5px;
+  }
+
+  .Polaris-TextField__Input:focus~.Polaris-TextField__Backdrop:after {
+    box-shadow:0 0 0 .2rem #448fff;
+  }
+
+ .Polaris-InlineError {
+   color:#d72c0d;
+   margin-bottom:1.6rem;
+ }
+</style>

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

@@ -0,0 +1,182 @@
+<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:#f6f6f7;
+  }
+
+  *,
+  *::before,
+  *::after{
+    box-sizing:border-box; }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin:0;
+    font-size:1em;
+    font-weight:400;
+  }
+
+  .Polaris-Page {
+    margin:0 auto;
+    padding:0;
+    max-width:99.8rem;
+  }
+
+  .Polaris-Page--InstallApp {
+    max-width: 70rem;
+  }
+
+  @media (min-width: 30.625em) {
+    .Polaris-Page {
+      padding:0 2rem;
+    }
+  }
+  @media (min-width: 46.5em) {
+    .Polaris-Page {
+      padding:0 3.2rem;
+    }
+  }
+
+  .Polaris-Page__Content {
+    width: 100%;
+    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-Stack--distributionTrailing {
+    -webkit-box-pack:end;
+    -ms-flex-pack:end;
+    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;
+    -ms-flex-direction:column;
+    flex-direction:column;
+  }
+</style>

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

@@ -0,0 +1,35 @@
+<style>
+  .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-DisplayText {
+    margin:0;
+  }
+
+  .Polaris-DisplayText--sizeSmall {
+    font-size:1.6rem;
+    font-weight:400;
+    line-height:2.4rem;
+  }
+
+  @media (min-width: 40em) {
+    .Polaris-DisplayText--sizeSmall {
+      font-size:2rem;
+      line-height:2.8rem;
+    }
+  }
+
+  .Polaris-TextContainer > * + * {
+    margin-top:1.6rem;
+  }
+</style>

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

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <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>
+    #CookiePartitionPrompt {
+      display: none;
+    }
+  </style>
+
+  <%= javascript_include_tag('shopify_app/enable_cookies', crossorigin: 'anonymous', integrity: true) %>
+</head>
+<body data-api-key="<%= ShopifyApp.configuration.api_key %>" data-shop-origin="<%= @shop %>" data-redirect-url="<%= @url %>" data-host="<%= params[:host] %>" data-return-to="<%= params[:return_to] %>">
+  <%=
+    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}",
+          appTargetUrl: "#{app_target_url}"
+        },
+      },
+    )
+  %>
+  <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 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>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Shopify App — Installation</title>
+
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <%= 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">
+    <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

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <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 data-api-key="<%= ShopifyApp.configuration.api_key %>" data-shop-origin="<%= current_shopify_domain %>" data-host="<%= params[:host] %>" data-return-to="<%= params[:return_to] %>">
+<%=
+  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}",
+        appTargetUrl: "#{app_target_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 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>
+                  </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

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+<head>
+  <meta charset="utf-8" />
+  <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' %>
+  <%= render 'shopify_app/partials/empty_state_styles' %>
+  <style>
+    #TopLevelInteractionContent {
+      display: none;
+    }
+  </style>
+
+  <%= javascript_include_tag('shopify_app/top_level', crossorigin: 'anonymous', integrity: true) %>
+</head>
+<body data-api-key="<%= ShopifyApp.configuration.api_key %>" data-shop-origin="https://<%= @shop %>" data-host="<%= @host %>" data-redirect-url="<%= @url %>">
+  <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-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__ImageContainer">
+                          <%= image_tag 'storage_access.svg', role: "presentation", alt: "", class: "Polaris-EmptyState__Image" %>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

data/app/views/shopify_app/shared/post_redirect_to_auth_shopify.html.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <base target="_top">
+  <title>Redirecting…</title>
+  <%= javascript_include_tag('shopify_app/post_redirect', crossorigin: 'anonymous', integrity: true) %>
+</head>
+<body>
+  <%= form_tag '/auth/shopify', id: 'redirect-form' %>
+</body>
+</html>