add beginnings of create price test page

wavelength-dev · Jan 18, 2020 · bb61af7 · bb61af7
1 parent bfdaa9f
commit bb61af7
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 24 deletions.
diff --git a/dashboard/src/Main.purs b/dashboard/src/Main.purs
@@ -1,12 +1,14 @@
 module Main where
 
 import Prelude
+import Assets (mountainCodeSvg)
 import Data.Maybe (Maybe(..))
+import Data.Nullable (notNull, null)
 import Effect (Effect)
 import Effect.Exception (throw)
+import React.Basic.DOM (div, text) as R
 import React.Basic.DOM (render)
-import React.Basic.DOM (text) as R
-import React.Basic.Hooks (ReactComponent, component, element, useEffect, useState, (/\))
+import React.Basic.Hooks (JSX, ReactComponent, component, element, useEffect, useState, (/\))
 import React.Basic.Hooks as React
 import Route (Route(..), hoistRouter)
 import Shopify as Shopify
@@ -15,6 +17,59 @@ import Web.HTML (window)
 import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
+gettingStartedPage :: JSX
+gettingStartedPage =
+  element Shopify.page
+    { title: "Getting started"
+    , subtitle: null
+    , primaryAction: null
+    , children:
+      [ element Shopify.emptyState
+          { heading: "Discover more profitable prices for your products"
+          , action: { content: "Create Price Test", onAction: mempty }
+          , image: mountainCodeSvg
+          , children: [ R.text "Here you'll create new price tests, check their progress, or their outcome." ]
+          }
+      ]
+    }
+
+type PriceTest
+  = { title :: String
+    , creationDate :: String
+    , price :: String
+    , status :: String
+    }
+
+renderPriceTest :: PriceTest -> JSX
+renderPriceTest { title } =
+  R.div
+    { children:
+      [ element Shopify.heading { element: "h2", children: title }
+      ]
+    }
+
+experimentsPage :: JSX
+experimentsPage =
+  element Shopify.page
+    { title: "Price Tests"
+    , subtitle: notNull "All tests currently running or finished."
+    , primaryAction: notNull { content: "Create new price test", onAction: mempty }
+    , children:
+      [ element Shopify.card
+          { sectioned: true
+          , children:
+            [ element Shopify.resourceList
+                { items:
+                  [ { title: "The Piston Jacket", creationDate: "Jan 18th", price: "$129", status: "Running"
+                    }
+                  ]
+                , renderItem: renderPriceTest
+                }
+            ]
+          }
+      ]
+    }
+
 mkApp :: Effect (ReactComponent {})
 mkApp = do
   component "App" \props -> React.do
@@ -23,25 +78,16 @@ mkApp = do
     useEffect unit (hoistRouter setRoute)
     let
       handleOnClick = setCounter $ add 1
+
+      isExperimentsEmpty = false
     pure
       $ element Shopify.appProvider
           { i18n: Shopify.enTranslations
           , children:
-            [ element Shopify.page
-                { title: show route
-                , children:
-                  [ element Shopify.card
-                      { sectioned: true
-                      , children:
-                        [ element Shopify.button
-                            { onClick: handleOnClick
-                            , children: [ R.text ("Increase count: " <> show counter) ]
-                            }
-                        ]
-                      }
-                  ]
-                }
-            ]
+            if isExperimentsEmpty then
+              gettingStartedPage
+            else
+              experimentsPage
           }
 
 main :: Effect Unit

diff --git a/dashboard/src/Shopify.js b/dashboard/src/Shopify.js
@@ -1,8 +1,19 @@
-const enTranslations = require('@shopify/polaris/locales/en.json');
-const {AppProvider, Page, Card, Button} = require('@shopify/polaris');
+const enTranslations = require("@shopify/polaris/locales/en.json");
+const {
+  AppProvider,
+  Button,
+  Card,
+  EmptyState,
+  Heading,
+  Page,
+  ResourceList
+} = require("@shopify/polaris");
 
+exports.appProvider = AppProvider;
+exports.button = Button;
+exports.card = Card;
+exports.emptyState = EmptyState;
 exports.enTranslations = enTranslations;
-exports.appProvider = AppProvider
+exports.heading = Heading
 exports.page = Page;
-exports.card = Card;
-exports.button = Button
+exports.resourceList = ResourceList;
diff --git a/dashboard/src/Shopify.purs b/dashboard/src/Shopify.purs
@@ -1,17 +1,43 @@
 module Shopify where
 
 import Prelude
+import Data.Nullable (Nullable)
 import Effect (Effect)
 import React.Basic (JSX, ReactComponent)
 
+type Action
+  = { content :: String
+    , onAction :: Effect Unit
+    }
+
 foreign import data I18N :: Type
 
 foreign import enTranslations :: I18N
 
-foreign import appProvider :: ReactComponent { i18n :: I18N, children :: Array JSX }
+foreign import appProvider :: ReactComponent { i18n :: I18N, children :: JSX }
 
-foreign import page :: ReactComponent { title :: String, children :: Array JSX }
+foreign import page ::
+  ReactComponent
+    { title :: String
+    , subtitle :: Nullable String
+    , children :: Array JSX
+    , primaryAction :: Nullable Action
+    }
 
 foreign import card :: ReactComponent { sectioned :: Boolean, children :: Array JSX }
 
 foreign import button :: ReactComponent { onClick :: Effect Unit, children :: Array JSX }
+
+foreign import emptyState ::
+  ReactComponent
+    { heading :: String
+    , action :: Action
+    , image :: String
+    , children :: Array JSX
+    }
+
+data Item a = Item a
+
+foreign import resourceList :: forall a.  ReactComponent { items :: Array a, renderItem :: a -> JSX }
+
+foreign import heading :: ReactComponent { element :: String, children :: String}