stockor 0.3.0 → 0.4.0

data/client/skr/Extension.coffee

@@ -23,10 +23,14 @@ class Skr.Extension extends Lanes.Extensions.Base
             else
                 console.log "Unable to find model for #{type}"
 
+    title: ->
+        "Stockor"
+
     rootComponent: (viewport) ->
         Lanes.Workspace.Layout
 
-    preferenceElement: (props) ->
-        React.createElement(SC.UserPreferences, key: 'skr')
-    settingsElement: (props) ->
-        React.createElement(SC.SystemSettings, key: 'skr')
+    getPreferenceElement: (props) ->
+        React.createElement(SC.UserPreferences, props)
+
+    getSettingsElement: (props) ->
+        React.createElement(SC.SystemSettings, props)

data/client/skr/api.js

@@ -0,0 +1,21 @@
+//=require lanes/remote/api
+//=require ./api/namespace
+//=require skr/vendor
+//=require ./api/Models/Base
+//=require_tree ./models/mixins
+//=require ../api/Components/Base
+//=require ./api/Components/Base
+//=require_tree ./api
+//=require_self
+
+
+var previousSkr = window.Skr;
+window.Skr = Lanes.Skr;
+
+window.Skr._lanes = window.Lanes.noConflict();
+
+Skr.noConflict = function(){
+    var Skr = window.Skr;
+    window.Skr = previousSkr;
+    return Skr;
+};

data/client/skr/api.scss

@@ -0,0 +1,148 @@
+.skr-simple-checkout {
+    width: 100%;
+    max-width: 350px;
+    margin: 50px auto;
+    .section {
+        margin-top: 2rem;
+        padding-top: 2rem;
+        border-top: 2px solid grey;
+    }
+    form { }
+
+    input {
+        font-size: 18px;
+        padding: 5px;
+    }
+    .errors {
+        color: #D8000C;
+        background-color: #FFBABA;
+        border: 1px solid darken(#FFBABA, 50%);
+    }
+    .address {
+        label {
+            display: flex;
+            justify-content: flex-end;
+            span { margin-right: 1rem; }
+            input { width: 200px; }
+        }
+    }
+    .cart {
+        width: 100%;
+        td, th {
+            &:last-child { text-align: right; }
+        }
+        input {
+            width: 4rem;
+            text-align: center;
+        }
+    }
+    .credit-card {
+        .row {
+            display: flex;
+            align-items: stretch;
+            height: 30px;
+            margin: 10px auto;
+        }
+        input {
+            flex: 1;
+            width: 100%;
+            &[name='expiry'], &[name='cvc'] {
+                flex: 0.5;
+            }
+            &.jp-card-invalid {
+                border: 1px solid red;
+            }
+        }
+    }
+    button {
+        border: 0;
+        background: #3498db;
+        background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
+        background-image: -moz-linear-gradient(top, #3498db, #2980b9);
+        background-image: -ms-linear-gradient(top, #3498db, #2980b9);
+        background-image: -o-linear-gradient(top, #3498db, #2980b9);
+        background-image: linear-gradient(to bottom, #3498db, #2980b9);
+        font-family: Arial;
+        color: #f0edf0;
+        font-size: 22px;
+        padding: 10px 20px 10px 20px;
+        text-decoration: none;
+        &:hover {
+            background: #3cb0fd;
+            background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
+            background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
+            background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
+            background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
+            background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
+            text-decoration: none;
+        }
+    }
+    @mixin spinner($opacity, $size){
+        box-shadow: rgba(0, 0, 0, $opacity) $size*1.5 0 0 0,
+        rgba(0, 0, 0, $opacity) ($size*1.1) ($size*1.1) 0 0,
+        rgba(0, 0, 0, $opacity) 0 ($size*1.5) 0 0,
+        rgba(0, 0, 0, $opacity) (-$size*1.1) ($size*1.1) 0 0,
+        rgba(0, 0, 0, $opacity) (-$size*1.5) 0 0 0,
+        rgba(0, 0, 0, $opacity) (-$size*1.1) (-$size*1.1) 0 0,
+        rgba(0, 0, 0, $opacity) 0 (-$size*1.5) 0 0,
+        rgba(0, 0, 0, $opacity) $size*1.1 (-$size*1.1) 0 0;
+    }
+
+    $spinner-size: 10px;
+    .mask {
+        background-color: transparent;
+        display: none;
+    }
+    .order {
+        &.is-saving {
+            position: relative;
+            .mask {
+                position: absolute;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                font-size: 2.8rem;
+                text-shadow: none;
+                border: 0;
+                transition: all 0.8s ease-in-out;
+                background-color: rgba(221, 221, 221, 0.7);
+                z-index: 2;
+                .msg {
+                    transition: all 1s ease-in-out;
+                    color: rgba(0, 0, 0, 0.8);
+                    span { margin-left: $spinner-size*4; }
+                    i {
+                        transition: all 1s ease-in-out;
+                        display: block;
+                        position: relative;
+                        width: $spinner-size;
+                        height: $spinner-size;
+                        top: $spinner-size*4;
+                        left: $spinner-size*1.5;
+                        animation: spinner 3000ms infinite linear;
+                        border-radius: $spinner-size / 2;
+                        @include spinner(0.75, $spinner-size);
+                    }
+                }
+            }
+            &.is-complete {
+                .mask {
+                    background-color: rgba(221, 221, 221, 0);
+                    .msg {
+                        color: rgba(0, 0, 0, 0);
+                        i { @include spinner(0.0, $spinner-size); }
+                    }
+                }
+            }
+        }
+        @keyframes spinner {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+    }
+}

data/client/skr/api/Components/AddressForm.cjsx

@@ -0,0 +1,47 @@
+class Skr.Api.Components.AddressForm extends Skr.Api.Components.Base
+
+    dataObjects:
+        address: 'props'
+
+    setField: (ev) ->
+        @address[ev.target.name] = ev.target.value
+
+    render: ->
+        fieldProps =
+            onChange: @setField
+            type: 'text'
+
+        <div className="address">
+            <label>
+                <span>Name:</span>
+                <input {...fieldProps} name="name"  />
+            </label>
+            <label>
+                <span>Email:</span>
+                <input {...fieldProps} name="email" />
+            </label>
+            <label>
+                <span>Phone:</span>
+                <input {...fieldProps} name="phone" />
+            </label>
+            <label>
+                <span>Address line 1:</span>
+                <input {...fieldProps} name="line1" />
+            </label>
+            <label>
+                <span>Address line 2:</span>
+                <input {...fieldProps} name="line2" />
+            </label>
+            <label>
+                <span>City:</span>
+                <input {...fieldProps} name="city" />
+            </label>
+            <label>
+                <span>State:</span>
+                <input {...fieldProps} name="state" />
+            </label>
+            <label>
+                <span>Postal Code:</span>
+                <input {...fieldProps} name="postal_code" />
+            </label>
+        </div>

data/client/skr/api/Components/Base.coffee

@@ -0,0 +1,7 @@
+Skr.Api.Components.Base =
+
+    # Pass coponent onthrough to Lanes default
+    # Skr.Api.Components.Base is only here to provide
+    # an extension point that may be needed in the future
+    extend: (klass) ->
+        Lanes.React.Component.extend(klass)

data/client/skr/api/Components/SaleHistory.cjsx

@@ -0,0 +1,32 @@
+class Skr.Api.Components.SaleHistory extends Skr.Api.Components.Base
+
+    componentWillMount: ->
+        @setState(orders: Skr.Api.Models.SalesHistory.get())
+
+    render: ->
+        return null if _.isEmpty( @state.orders )
+
+        <table className="cart">
+            <thead>
+                <tr>
+                    <th colSpan=3>Previous Purchases</th>
+                </tr>
+                <tr>
+                    <th>Sale Number</th>
+                    <th>Date</th>
+                    <th>Amount</th>
+                </tr>
+            </thead>
+            <tbody>
+            {for order in @state.orders
+                <tr>
+                    <td>
+                        <a target="_blank" href={order.pdfDownloadUrl()}>
+                            {order.visible_id}
+                        </a>
+                    </td>
+                    <td>{Lanes.u.format.shortDate(order.date)}</td>
+                    <td>{Lanes.u.format.currency(order.total)}</td>
+                </tr>}
+            </tbody>
+        </table>

data/client/skr/api/Components/SingleItemCart.cjsx

@@ -0,0 +1,30 @@
+class Skr.Api.Components.SingleItemCart extends Skr.Api.Components.Base
+
+    dataObjects:
+        cart: 'props'
+
+    item: -> @cart.skus.first()
+
+    setQty: (ev) ->
+        @item().qty = ev.target.value
+
+    render: ->
+        item = @item()
+        return null unless item
+
+        <table className="cart">
+          <tbody>
+            <tr>
+              <td colSpan="4">{item.sku.description}</td>
+              <td>{item.sku.display_price}</td>
+            </tr>
+            <tr>
+              <th>Qty:</th>
+              <td>
+                  <input type="number" value={item.qty} onChange={@setQty} />
+              </td>
+              <th>Total:</th>
+              <th colSpan="2">{item.display_total}</th>
+            </tr>
+          </tbody>
+        </table>

data/client/skr/api/Models/Base.coffee

@@ -0,0 +1,10 @@
+##= require 'skr/models/Base'
+
+class Skr.Api.Models.Base extends Skr.Models.Base
+
+    constructor: ->
+        super
+
+
+    api_path: ->
+        '/skr/public/' + _.pluralize(@modelTypeIdentifier())

data/client/skr/api/Models/Cart.coffee

@@ -0,0 +1,40 @@
+class CartSku extends Lanes.Models.State
+
+    session:
+        sku: 'state'
+        qty:  type: 'integer', default: 0, required: true
+
+    derived:
+        total: deps: ['qty', 'sku.price'], fn: ->
+            @sku.price.times(@qty)
+        display_total:
+            deps: ['total'], fn: ->
+                Lanes.u.format.currency @total
+
+class Skr.Api.Models.Cart extends Skr.Api.Models.Base
+
+    session:
+        total:
+            type: 'bigdec', required: true, default: -> _.bigDecimal('0')
+
+    derived:
+        display_total:
+            deps: ['total'], fn: ->
+                Lanes.u.format.currency @total
+
+    associations:
+        skus: { collection: CartSku }
+
+    addSku: (sku, qty = 1) ->
+        ci = new CartSku({sku, qty})
+        @skus.add(ci)
+
+    initialize: ->
+        @listenToAndRun(@skus, 'add change', @onSkusChange)
+
+    onSkusChange: ->
+        @total = _.sumBy(@skus.models, 'total') unless @skus.isEmpty()
+
+    addBySkuCode: (code) ->
+        Skr.Api.Models.Sku.findByCode(code).then (sku) =>
+            @addSku(sku) unless sku.isNew()

data/client/skr/api/Models/Sale.coffee

@@ -0,0 +1,43 @@
+##= require 'skr/models/Address'
+##= require 'skr/models/CreditCard'
+
+class SaleSku extends Lanes.Models.State
+
+    props:
+        sku_id: 'integer'
+        qty:     'integer'
+
+
+class Skr.Api.Models.Sale extends Skr.Api.Models.Base
+
+
+    props:
+        address_id:  'integer'
+        id:          'integer'
+        visible_id:  'visible_id'
+        terms_id:    'integer'
+        customer_id: 'integer'
+        hash_code:   'string'
+        total:       'bigdec'
+        form:        'string'
+        options:     'object'
+
+    mixins: [ Lanes.Skr.Models.Mixins.PrintSupport ]
+
+    associations:
+        skus: { collection: SaleSku }
+        billing_address: { model: 'Address', autoCreate: true }
+        credit_card:
+            model: 'Skr.Models.CreditCard', autoCreate: true
+            options: ->
+                linkToAddress: @billing_address
+
+    printFormIdentifier: ->
+        'invoice'
+
+    copySkusFromCart: (cart) ->
+        cart.skus.each (ci) =>
+            @skus.add(sku_id: ci.sku.id, qty: ci.qty)
+
+    save: ->
+        super(with: 'details')

data/client/skr/api/Models/SalesHistory.coffee

@@ -0,0 +1,17 @@
+KEY = 'SALES-HISTORY'
+
+Skr.Api.Models.SalesHistory = {
+
+    _encode: (sale) ->
+        _.pick(sale, 'visible_id', 'hash_code', 'invoice_date', 'total')
+
+    record: (sale) ->
+        sales = @get()
+        sales.push(@_encode(sale))
+        localStorage.setItem(KEY, JSON.stringify({sales}) )
+
+    get: ->
+        sales = JSON.parse(localStorage.getItem(KEY))?.sales
+        _.map sales, (sale) -> new Skr.Api.Models.Sale(sale)
+
+}

data/client/skr/api/Models/Sku.coffee

@@ -0,0 +1,16 @@
+class Skr.Api.Models.Sku extends Skr.Api.Models.Base
+
+    props:
+        id:          {type:"integer"}
+        code:        {type:"code"   }
+        description: {type:"string" }
+        price:       {type:"bigdec" }
+        default_uom_code:    {type:"string" }
+
+    derived:
+        display_price: deps: ['price'], fn: ->
+            Lanes.u.format.currency @price
+
+    @findByCode: (code) ->
+        sku = new Skr.Api.Models.Sku({code})
+        sku.fetch(query: {code})