Feat/improve overview of gift cards (#56)

* added order

* supported search for gift cards

* removed linespace

* ensured that if no order exists, the gift card is still rendered

src/domain/gift-cards/detail.js

@@ -11,6 +11,7 @@ import Spinner from "../../components/spinner"
 import Badge from "../../components/badge"
 import Button from "../../components/button"
 import EditableInput from "../../components/editable-input"
+import CurrencyInput from "../../components/currency-input"
 import Select from "../../components/select"
 
 import useMedusa from "../../hooks/use-medusa"
@@ -49,9 +50,10 @@ const GiftCardDetail = ({ id }) => {
   const [updating, setUpdating] = useState(false)
   const [showRuleEdit, setShowRuleEdit] = useState(false)
   const [code, setCode] = useState(discount && discount.code)
-
+  const [balance, setBalance] = useState(0)
   const [selectedRegions, setSelectedRegions] = useState([])
 
+  const balanceRef = useRef()
   const discountCodeRef = useRef()
 
   const {
@@ -65,9 +67,19 @@ const GiftCardDetail = ({ id }) => {
   })
   const { regions } = useMedusa("regions")
 
+  const formatNumber = n => {
+    if(discount){
+      return (
+        ((1 + discount.region.tax_rate / 100) * n) / 100 
+      ).toFixed(2)
+    }
+    return n
+  }
+
   useEffect(() => {
     if (discount) {
       setCode(discount.code)
+      setBalance(formatNumber(discount.balance))
     }
   }, [discount])
 
@@ -94,14 +106,15 @@ const GiftCardDetail = ({ id }) => {
       })
       .catch(() => {
         setUpdating(false)
+        refresh({ id })
         toaster("Discount update failed", "error")
       })
   }
 
   const handleDisabled = () => {
     setUpdating(true)
     update({
-      disabled: discount.is_disabled ? false : true,
+      is_disabled: discount.is_disabled ? false : true,
     })
       .then(() => {
         refresh({ id })
@@ -132,6 +145,23 @@ const GiftCardDetail = ({ id }) => {
       })
   }
 
+
+  const handleBalanceUpdate = () => {
+    if (discount.balance === balance) return
+
+    update({
+      balance: Math.round(balance * 100),
+    })
+      .then(() => {
+        refresh({ id })
+        toaster("Balance updated", "success")
+      })
+      .catch(() => {
+        refresh({ id })
+        toaster("Balance update failed", "error")
+      })
+  }
+
   const handleRegionSelected = data => {
     console.log(data)
     //  const toUpdateWith = regions.reduce((acc, next) => {
@@ -188,19 +218,19 @@ const GiftCardDetail = ({ id }) => {
           )}
         </Box>
         <Card.Body>
-          <Box pl={3} pr={2}>
-            <Text pb={1} color="gray">
+          <Box pl={3} pr={2} textAlign="center" >
+            <Text pb={1} mb={2} color="gray" >
               Disabled
             </Text>
-            <Text pt={1} width="100%" textAlign="center" mt={2}>
+            <Text pt={1} width="100%"  mt={2}>
               <Badge width="100%" color="#4f566b" bg="#e3e8ee">
                 {`${discount.is_disabled}`}
               </Badge>
             </Text>
           </Box>
           <Card.VerticalDivider mx={3} />
-          <Box pl={3} pr={2}>
-            <Text pb={1} color="gray">
+          <Box pl={3} pr={2} alignContent="center">
+            <Text pb={1} pb={3} color="gray" textAlign="center" >
               Valid regions
             </Text>
             <Select
@@ -216,6 +246,38 @@ const GiftCardDetail = ({ id }) => {
               }))}
             />
           </Box>
+          <Card.VerticalDivider mx={3} />
+          <Box pl={3} pr={2} alignContent="center">
+            <Text pb={1} mb={3} color="gray">
+              Total value ({discount.region.currency_code.toUpperCase()})
+            </Text>
+            <Text style={{width: "100%", textAlign: "center"}}>
+              {formatNumber(discount.value)}
+            </Text>
+          </Box>
+          <Card.VerticalDivider mx={3} />
+          <Box pl={3} pr={2} alignContent="center">
+            <Text pb={1} color="gray">
+              Balance ({discount.region.currency_code.toUpperCase()})
+            </Text>
+            <EditableInput
+              text={balance}
+              childRef={balanceRef}
+              type="input"
+              style={{ maxWidth: "400px" }}
+              onBlur={handleBalanceUpdate}
+            >
+              <Input
+                m={3}
+                ref={balanceRef}
+                type="text"
+                name="balance"
+                value={balance}
+                onChange={e => setBalance(e.target.value)}
+              />
+            </EditableInput>
+          </Box>
+
         </Card.Body>
       </Card>
       <Card mr={3} width="100%">

src/domain/gift-cards/index.js

@@ -3,8 +3,10 @@ import { Router } from "@reach/router"
 import { navigate } from "gatsby"
 import qs from "query-string"
 import { Text, Flex, Box } from "rebass"
+import { Input } from "@rebass/forms"
 import ReactTooltip from "react-tooltip"
 import moment from "moment"
+import { OrderNumCell } from "../orders"
 
 import ManageGiftCard from "./manage"
 import GiftCardDetail from "./detail"
@@ -22,11 +24,40 @@ import {
 import Spinner from "../../components/spinner"
 import Badge from "../../components/badge"
 import Button from "../../components/button"
-
 import useMedusa from "../../hooks/use-medusa"
 
 const Index = () => {
-  const { gift_cards, isLoading } = useMedusa("giftCards")
+  const { gift_cards, isLoading, refresh } = useMedusa("giftCards")
+  const [query, setQuery] = useState("")
+
+  const searchQuery = () => {
+    const baseUrl = qs.parseUrl(window.location.href).url
+
+    const search = {
+      fields: "id,title,thumbnail",
+      expand: "variants,variants.prices,collection",
+      q: query,
+      offset: 0,
+      limit: 20,
+    }
+
+    const prepared = qs.stringify(search, {
+      skipNull: true,
+      skipEmptyString: true,
+    })
+
+    window.history.replaceState(baseUrl, "", `?${prepared}`)
+    refresh({ search })
+  }
+
+  const onKeyDown = event => {
+    // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
+    if (event.key === "Enter") {
+      event.preventDefault()
+      event.stopPropagation()
+      searchQuery()
+    }
+  }
 
   return (
     <div>
@@ -42,6 +73,28 @@ const Index = () => {
           Manage gift cards
         </Button>
       </Flex>
+      <Flex>
+        <Box mb={3} sx={{ maxWidth: "300px" }}>
+          <Input
+            height="28px"
+            fontSize="12px"
+            name="q"
+            type="text"
+            placeholder="Search gift cards"
+            onKeyDown={onKeyDown}
+            onChange={e => setQuery(e.target.value)}
+            value={query}
+          />
+        </Box>
+        <Button
+          onClick={() => searchQuery()}
+          variant={"primary"}
+          fontSize="12px"
+          ml={2}
+        >
+          Search
+        </Button>
+      </Flex>
       {isLoading ? (
         <Flex
           flexDirection="column"
@@ -58,6 +111,7 @@ const Index = () => {
           <TableHead>
             <TableHeaderRow>
               <TableHeaderCell>Code</TableHeaderCell>
+              <TableHeaderCell>Order</TableHeaderCell>
               <TableHeaderCell>Original Amount</TableHeaderCell>
               <TableHeaderCell>Amount Left</TableHeaderCell>
               <TableHeaderCell>Created</TableHeaderCell>
@@ -73,6 +127,21 @@ const Index = () => {
                   <TableDataCell>
                     <DefaultCellContent>{el.code}</DefaultCellContent>
                   </TableDataCell>
+                  <TableDataCell>
+                    {el.order && (
+                      <OrderNumCell
+                        onClick={e => {
+                          navigate(`/a/orders/${el.order.id}`)
+                          e.stopPropagation()
+                        }}
+                        fontWeight={500}
+                        color={"link"}
+                        isCanceled={el.order.status === "canceled"}
+                      >
+                        #{el.order.display_id}
+                      </OrderNumCell>
+                    )}
+                  </TableDataCell>
                   <TableDataCell>
                     <DefaultCellContent>
                       {(el.value &&

src/domain/products/index.js

@@ -93,8 +93,6 @@ const ProductIndex = () => {
     const baseUrl = qs.parseUrl(window.location.href).url
 
     const search = {
-      fields: "id,title,thumbnail",
-      expand: "variants,variants.prices,collection",
       q: query,
       offset: 0,
       limit: 20,