FEATURE: New styling of product page

assets/javascripts/discourse/components/product-list.js.es6

@@ -4,6 +4,7 @@ import { isEmpty } from "@ember/utils";
 import Component from "@ember/component";
 
 export default Component.extend({
+  classNames: ["product-list"],
   @discourseComputed("products")
   emptyProducts(products) {
     return isEmpty(products);

assets/javascripts/discourse/templates/components/product-list.hbs

@@ -5,15 +5,20 @@
     <div class="product">
       <h2>{{product.name}}</h2>
 
-      <p>
+      <p class="product-description">
         {{product.description}}
       </p>
 
       {{#if isLoggedIn}}
-        <div class="pull-right">
+        <div class="product-purchase">
+          {{#if product.subscribed}}
+            <span class="purchased">&#x2713; {{i18n 'discourse_subscriptions.subscribe.purchased'}}</span>
+            <a class="billing-link" href="/my/billing">{{I18n 'discourse_subscriptions.subscribe.go_to_billing'}}</a> 
+          {{else}}
             {{#link-to "s.show" product.id disabled=product.subscribed class="btn btn-primary"}}
               {{i18n 'discourse_subscriptions.subscribe.title'}}
             {{/link-to}}
+          {{/if}}
         </div>
       {{/if}}
     </div>

assets/javascripts/discourse/templates/s/index.hbs

@@ -1,4 +1 @@
-
+{{product-list products=model}}
-<div id="product-list">
-  {{product-list products=model}}
-</div>

assets/stylesheets/common/layout.scss

@@ -35,9 +35,32 @@
   }
 }
 
-#product-list {
+.product-list {
-  padding: 40px 120px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+
   .product {
-    margin-bottom: 60px;
+    display: flex;
+    flex-flow: column nowrap;
+    border: 1px solid $primary-low;
+    padding: 1.5rem;
+    margin: 1rem;
+    width: calc(50% - 240px);
+
+    .product-description {
+      flex-grow: 1;
+    }
+    .product-purchase {
+      align-self: baseline;
+      display: flex;
+      flex-flow: column nowrap;
+      .purchased {
+        color: $success;
+      }
+      .billing-link {
+        font-size: $font-down-1;
+      }
+    }
   }
 }

assets/stylesheets/mobile/main.scss

@@ -0,0 +1,8 @@
+.mobile-view {
+  .product-list {
+    flex-flow: column nowrap;
+    .product {
+      width: unset;
+    }
+  }
+}

config/locales/client.en.yml

@@ -64,6 +64,8 @@ en:
           title: Customer Details
         buttons:
           subscribe: Subscribe
+        purchased: Purchased
+        go_to_billing: Go to Billing
       billing:
         name: Full name
         email: Email