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

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}>
@@ -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