Merge branch 'ag/new-bom' of https://github.com/kitspace/kitspace-v2

frontend/src/components/Board/BuyParts/Bom.module.scss

@@ -14,4 +14,18 @@
     font-size: 14px !important;
     background-color: white !important;
   }
+
+  .expandWrapper {
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  .expandTable {
+    border-top: 0px;
+    cursor: pointer;
+  }
+
+  .expandTableRow {
+    border-top: 0px;
+  }
 }

frontend/src/components/Board/BuyParts/Bom.jsx → frontend/src/components/Board/BuyParts/Bom.tsx

@@ -2,11 +2,10 @@ import React, { useEffect, useState } from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 import DoubleScrollBar from 'react-double-scrollbar'
 
-import { array, bool, func, number, string } from 'prop-types'
 import styles from './Bom.module.scss'
 import TsvTable from './TsvTable'
 
-const Bom = ({ length, parts, tsv }) => {
+const Bom = ({ length, parts, tsv }: BomProps) => {
   const [diff, setDiff] = useState(0)
   const [collapsed, setCollapsed] = useState(true)
 
@@ -32,7 +31,7 @@ const Bom = ({ length, parts, tsv }) => {
   )
 }
 
-const ExpandBom = ({ diff, collapsed, setCollapsed }) => {
+const ExpandBom = ({ diff, collapsed, setCollapsed }: ExpandBomProps) => {
   const summary =
     diff > 0 && collapsed ? (
       <tr className={styles.expandSummary}>
@@ -44,13 +43,13 @@ const ExpandBom = ({ diff, collapsed, setCollapsed }) => {
     ) : null
 
   return (
-    <div style={{ paddingLeft: 1, paddingRight: 1 }}>
+    <div className={`${styles.expandWrapper}`}>
       <Table
         celled
         singleLine
         unstackable
         attached="bottom"
-        className={styles.expandBomTable}
+        className={styles.expandTable}
         style={{
           borderTop: 0,
           cursor: 'pointer',
@@ -59,7 +58,7 @@ const ExpandBom = ({ diff, collapsed, setCollapsed }) => {
       >
         <tbody>
           {summary}
-          <tr style={{ borderTop: 0 }}>
+          <tr className={`${styles.expandTableRow}`}>
             <Table.Cell key="collapse cell" textAlign="center">
               <Icon name={collapsed ? 'eye' : 'arrow up'} />
               {collapsed ? 'View all' : 'Hide'}
@@ -71,16 +70,16 @@ const ExpandBom = ({ diff, collapsed, setCollapsed }) => {
   )
 }
 
-Bom.propTypes = {
-  length: number.isRequired,
-  parts: array.isRequired,
-  tsv: string.isRequired,
+interface BomProps {
+  length: number
+  parts: Array<any>
+  tsv: string
 }
 
-ExpandBom.propTypes = {
-  diff: number.isRequired,
-  collapsed: bool.isRequired,
-  setCollapsed: func.isRequired,
+interface ExpandBomProps {
+  diff: number
+  collapsed: boolean
+  setCollapsed: (collapsed: boolean) => void
 }
 
 export default Bom

frontend/src/components/Board/BuyParts/DirectStores.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState, useCallback } from 'react'
+
+import DigikeyData from '1-click-bom-minimal/lib/data/digikey.json'
+import countriesData from '1-click-bom-minimal/lib/data/countries.json'
+
+const DirectStores = ({ items, multiplier }: DirectStoresProps) => {
+  const [countryCode, setCountryCode] = useState('Other')
+  const [digikeyParts, setDigikeyParts] = useState([])
+
+  const getParts = useCallback(
+    retailer =>
+      items
+        .filter(
+          part => retailer in part.retailers && part.retailers[retailer] !== '',
+        )
+        .map(part => ({
+          sku: part.retailers[retailer],
+          reference: part.reference,
+          quantity: Math.ceil(multiplier * part.quantity),
+        })),
+    [items, multiplier],
+  )
+
+  useEffect(() => {
+    const abortController = new AbortController()
+    const signal = abortController.signal
+    if (typeof window !== 'undefined') {
+      getLocation(signal).then(code => {
+        if (code && !signal.aborted) {
+          setCountryCode(code)
+        }
+      })
+    }
+    setDigikeyParts(getParts('Digikey'))
+    return () => {
+      abortController.abort()
+    }
+  }, [getParts])
+
+  const digikeyPartRenderer = (part, index) => {
+    index += 1
+    return (
+      <span key={`digikeyRenderer${index}`}>
+        <input name={`part${index}`} type="hidden" value={part.sku} />
+        <input name={`qty${index}`} type="hidden" value={part.quantity} />
+        <input name={`cref${index}`} type="hidden" value={part.reference} />
+      </span>
+    )
+  }
+
+  const digikey = (code, parts) => {
+    const site = DigikeyData.sites[DigikeyData.lookup[code]]
+    return (
+      <form
+        key="DigikeyForm"
+        action={`https${site}/classic/ordering/fastadd.aspx?WT.z_cid=ref_kitnic`}
+        id="DigikeyForm"
+        method="POST"
+        target="_blank"
+      >
+        {parts?.map(digikeyPartRenderer)}
+      </form>
+    )
+  }
+
+  return <span>{[digikey(countryCode, digikeyParts)]}</span>
+}
+
+const getLocation = async (signal: AbortSignal) => {
+  const usedCountryCodes = Object.keys(countriesData).map(key => countriesData[key])
+  const freegeoipEndpoint = 'https://freegeoip.kitspace.org'
+
+  try {
+    const res = await fetch(freegeoipEndpoint, { signal })
+    const body = await res.json()
+    const { country_code: code } = body
+    if (code === 'GB') {
+      return 'UK'
+    }
+    if (usedCountryCodes.indexOf(code) < 0) {
+      return 'Other'
+    }
+    return code
+  } catch (err) {
+    if (!signal.aborted) {
+      console.error(err)
+    }
+    return 'Other'
+  }
+}
+
+interface DirectStoresProps {
+  items: Array<any>
+  multiplier: number
+}
+export default DirectStores