From 47093d62996c86f8e268a0e27027b6a080aa2a94 Mon Sep 17 00:00:00 2001
From: Abdulrhmn Ghanem <abdoghanem160@gmail.com>
Date: Sat, 5 Oct 2024 04:03:08 +0300
Subject: [PATCH 1/7] Convert `BuyParts` Component to typescript

---
 .../Board/BuyParts/{Bom.jsx => Bom.tsx}       |  21 ++--
 .../{DirectStores.jsx => DirectStores.tsx}    |   9 +-
 .../Board/BuyParts/InstallPrompt.jsx          | 105 -----------------
 .../Board/BuyParts/InstallPrompt.module.scss  |  14 ---
 .../Board/BuyParts/index.module.scss          |   1 +
 .../Board/BuyParts/{index.jsx => index.tsx}   | 111 ++++--------------
 frontend/src/index.d.ts                       |  10 ++
 frontend/test/BuyParts.test.tsx               |  10 ++
 8 files changed, 59 insertions(+), 222 deletions(-)
 rename frontend/src/components/Board/BuyParts/{Bom.jsx => Bom.tsx} (82%)
 rename frontend/src/components/Board/BuyParts/{DirectStores.jsx => DirectStores.tsx} (95%)
 delete mode 100644 frontend/src/components/Board/BuyParts/InstallPrompt.jsx
 delete mode 100644 frontend/src/components/Board/BuyParts/InstallPrompt.module.scss
 rename frontend/src/components/Board/BuyParts/{index.jsx => index.tsx} (70%)
 create mode 100644 frontend/src/index.d.ts

diff --git a/frontend/src/components/Board/BuyParts/Bom.jsx b/frontend/src/components/Board/BuyParts/Bom.tsx
similarity index 82%
rename from frontend/src/components/Board/BuyParts/Bom.jsx
rename to frontend/src/components/Board/BuyParts/Bom.tsx
index 955942b56f..58298e0446 100644
--- a/frontend/src/components/Board/BuyParts/Bom.jsx
+++ b/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
diff --git a/frontend/src/components/Board/BuyParts/DirectStores.jsx b/frontend/src/components/Board/BuyParts/DirectStores.tsx
similarity index 95%
rename from frontend/src/components/Board/BuyParts/DirectStores.jsx
rename to frontend/src/components/Board/BuyParts/DirectStores.tsx
index bc3fde2579..e8e5791073 100644
--- a/frontend/src/components/Board/BuyParts/DirectStores.jsx
+++ b/frontend/src/components/Board/BuyParts/DirectStores.tsx
@@ -1,11 +1,10 @@
 import React, { useEffect, useState, useCallback } from 'react'
 
-import { array, number } from 'prop-types'
 import DigikeyData from '1-click-bom-minimal/lib/data/digikey.json'
 import FarnellData from '1-click-bom-minimal/lib/data/farnell.json'
 import countriesData from '1-click-bom-minimal/lib/data/countries.json'
 
-const DirectStores = ({ items, multiplier }) => {
+const DirectStores = ({ items, multiplier }: DirectStoresProps) => {
   const [countryCode, setCountryCode] = useState('Other')
   const [digikeyParts, setDigikeyParts] = useState([])
   const [farnellParts, setFarnellParts] = useState([])
@@ -132,8 +131,8 @@ const DirectStores = ({ items, multiplier }) => {
   )
 }
 
-DirectStores.propTypes = {
-  items: array.isRequired,
-  multiplier: number.isRequired,
+interface DirectStoresProps {
+  items: Array<any>
+  multiplier: number
 }
 export default DirectStores
diff --git a/frontend/src/components/Board/BuyParts/InstallPrompt.jsx b/frontend/src/components/Board/BuyParts/InstallPrompt.jsx
deleted file mode 100644
index 13546be102..0000000000
--- a/frontend/src/components/Board/BuyParts/InstallPrompt.jsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import Link from 'next/link'
-
-import { Icon, Message } from 'semantic-ui-react'
-import { func, string } from 'prop-types'
-
-import BrowserVersion from '@utils/getBrowserVersion'
-import styles from './InstallPrompt.module.scss'
-
-export const install1ClickBOM = () => {
-  const version = BrowserVersion()
-  let onClick
-  if (/Chrome/.test(version)) {
-    onClick = () => {
-      window.plausible('Install Extension')
-      window.open(
-        'https://chrome.google.com/webstore/detail/kitspace-1-click-bom/mflpmlediakefinapghmabapjeippfdi',
-      )
-    }
-  } else if (/Firefox/.test(version)) {
-    onClick = () => {
-      window.plausible('Install Extension')
-      window.open('https://addons.mozilla.org/en-US/firefox/addon/1clickbom')
-    }
-  } else {
-    onClick = () => {
-      window.plausible('Install Extension')
-      window.open('/1-click-bom', '_self')
-    }
-  }
-  return onClick()
-}
-
-const InstallPrompt = ({ extensionPresence }) => {
-  const [isCompatible, setIsCompatible] = useState(true)
-  const [timedOut, setTimedOut] = useState(false)
-
-  const getCompatibility = () => {
-    if (typeof navigator === 'undefined') {
-      return true
-    }
-    if (/Mobile/i.test(navigator.userAgent)) {
-      return false
-    }
-    const version = BrowserVersion()
-    return /Chrome/.test(version) || /Firefox/.test(version)
-  }
-
-  useEffect(() => {
-    setTimedOut(() => {
-      setTimedOut(true)
-      setIsCompatible(getCompatibility())
-    }, 5000)
-  }, [])
-
-  if (extensionPresence === 'present') {
-    return <div />
-  }
-  if (timedOut) {
-    return isCompatible ? (
-      <PleaseInstall install1ClickBOMCallback={install1ClickBOM} />
-    ) : (
-      <NotCompatible />
-    )
-  }
-  return null
-}
-
-const PleaseInstall = ({ install1ClickBOMCallback }) => (
-  <Message attached warning>
-    <Icon name="attention" />
-    Please{' '}
-    <button
-      className={styles.extensionLinkButton}
-      type="button"
-      onClick={() => install1ClickBOMCallback()}
-    >
-      install the 1-click BOM extension
-    </button>{' '}
-    make full use of this feature.
-  </Message>
-)
-
-const NotCompatible = () => (
-  <Message attached warning>
-    <Icon name="attention" />
-    Sorry, the{' '}
-    <Link href="/1-click-bom">
-      <a>1-click BOM extension</a>
-    </Link>{' '}
-    is not yet available for your browser. Only the Digikey add-to-cart links work
-    fully, Farnell and Newark should work but the references will not be added as
-    line-notes.
-  </Message>
-)
-
-InstallPrompt.propTypes = {
-  extensionPresence: string.isRequired,
-}
-
-PleaseInstall.propTypes = {
-  install1ClickBOMCallback: func.isRequired,
-}
-
-export default InstallPrompt
diff --git a/frontend/src/components/Board/BuyParts/InstallPrompt.module.scss b/frontend/src/components/Board/BuyParts/InstallPrompt.module.scss
deleted file mode 100644
index 7345ea0159..0000000000
--- a/frontend/src/components/Board/BuyParts/InstallPrompt.module.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import '../../colors.scss';
-
-.extensionLinkButton {
-    background: none!important;
-    border: none;
-    padding: 0!important;
-    color:$mine-shaft;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.extensionLinkButton:hover {
-    text-decoration: underline;
-}
\ No newline at end of file
diff --git a/frontend/src/components/Board/BuyParts/index.module.scss b/frontend/src/components/Board/BuyParts/index.module.scss
index d62ee2a050..1e4856d321 100644
--- a/frontend/src/components/Board/BuyParts/index.module.scss
+++ b/frontend/src/components/Board/BuyParts/index.module.scss
@@ -1,6 +1,7 @@
 @import '../../breakpoint.scss';
 
 .notSelectable {
+  -webkit-user-select: none;
   user-select: none;
   cursor: default;
 }
diff --git a/frontend/src/components/Board/BuyParts/index.jsx b/frontend/src/components/Board/BuyParts/index.tsx
similarity index 70%
rename from frontend/src/components/Board/BuyParts/index.jsx
rename to frontend/src/components/Board/BuyParts/index.tsx
index 1ddcbab8cf..f5842bbebe 100644
--- a/frontend/src/components/Board/BuyParts/index.jsx
+++ b/frontend/src/components/Board/BuyParts/index.tsx
@@ -1,19 +1,15 @@
 import React, { useEffect, useState } from 'react'
-import { array, bool, func, number, string } from 'prop-types'
 import OneClickBom from '1-click-bom-minimal'
 import { Header, Icon, Segment, Input, Button } from 'semantic-ui-react'
 
 import Bom from './Bom'
-import InstallPrompt, { install1ClickBOM } from './InstallPrompt'
 import DirectStores from './DirectStores'
 import styles from './index.module.scss'
 
-const BuyParts = ({ projectFullName, lines, parts }) => {
-  const [extensionPresence, setExtensionPresence] = useState('unknown')
+const BuyParts = ({ projectFullName, lines, parts }: BuyPartsProps) => {
   const [buyMultiplier, setBuyMultiplier] = useState(1)
   const [mult, setMult] = useState(1)
   const [buyAddPercent, setBuyAddPercent] = useState(0)
-  const [adding, setAdding] = useState({})
 
   const buyParts = distributor => {
     window.plausible('Buy Parts', {
@@ -23,17 +19,6 @@ const BuyParts = ({ projectFullName, lines, parts }) => {
         multiplier: mult,
       },
     })
-    window.postMessage(
-      {
-        from: 'page',
-        message: 'quickAddToCart',
-        value: {
-          retailer: distributor,
-          multiplier: mult,
-        },
-      },
-      '*',
-    )
   }
 
   const retailerList = OneClickBom.getRetailers()
@@ -52,10 +37,7 @@ const BuyParts = ({ projectFullName, lines, parts }) => {
         return (
           <RetailerButton
             key={name}
-            adding={adding[name]}
             buyParts={() => buyParts(name)}
-            extensionPresence={name === 'Digikey' ? 'absent' : extensionPresence}
-            install1ClickBOM={install1ClickBOM}
             name={name}
             numberOfLines={numberOfLines}
             numberOfParts={numberOfParts}
@@ -67,29 +49,6 @@ const BuyParts = ({ projectFullName, lines, parts }) => {
     })
     .filter(l => l != null)
 
-  useEffect(() => {
-    // extension communication
-    window.addEventListener(
-      'message',
-      event => {
-        if (event.source !== window) {
-          return
-        }
-        if (event.data.from === 'extension') {
-          setExtensionPresence('present')
-          switch (event.data.message) {
-            case 'updateAddingState':
-              setAdding(event.data.value)
-              break
-            default:
-              break
-          }
-        }
-      },
-      false,
-    )
-  }, [])
-
   useEffect(() => {
     const multi = buyMultiplier
     if (Number.isNaN(multi) || multi < 1) {
@@ -110,6 +69,7 @@ const BuyParts = ({ projectFullName, lines, parts }) => {
     return OneClickBom.writeTSV(linesMult)
   }
   const hasPurchasableParts = retailerButtons.length !== 0
+
   return (
     <div className={styles.BuyParts} data-cy="buy-parts">
       <Header as="h3" attached="top" textAlign="center">
@@ -118,7 +78,6 @@ const BuyParts = ({ projectFullName, lines, parts }) => {
       </Header>
       {hasPurchasableParts ? (
         <>
-          <InstallPrompt extensionPresence={extensionPresence} />
           <AdjustQuantity
             buyAddPercent={buyAddPercent}
             buyMultiplier={buyMultiplier}
@@ -156,7 +115,7 @@ const AdjustQuantity = ({
   setBuyMultiplier,
   buyAddPercent,
   setBuyAddPercent,
-}) => (
+}: AdjustQuantityProps) => (
   <Segment attached className={styles.AdjustQuantity} textAlign="center">
     Adjust quantity:
     <Icon className={styles.AdjustQuantityIcon} name="delete" />
@@ -207,26 +166,11 @@ const AdjustQuantity = ({
 const RetailerButton = ({
   name,
   buyParts,
-  install1ClickBOM,
-  extensionPresence,
   numberOfLines,
   totalLines,
   numberOfParts,
-  adding,
-}) => {
-  let onClick = buyParts
-  // if the extension is not here fallback to direct submissions
-  if (extensionPresence !== 'present' && typeof document !== 'undefined') {
-    onClick = () => {
-      const form = document.getElementById(`${name}Form`)
-      if (form) {
-        form.submit()
-      } else {
-        install1ClickBOM()
-      }
-    }
-  }
-  const color = numberOfLines === totalLines ? 'green' : 'pink'
+}: RetailerButtonProps) => {
+  const color = 'green'
   return (
     <Button
       className={`${styles.retailerButton} ${styles[color]}`}
@@ -259,13 +203,12 @@ const RetailerButton = ({
         ),
       }}
       labelPosition="right"
-      loading={adding}
-      onClick={onClick}
+      onClick={buyParts}
     />
   )
 }
 
-const StoreIcon = ({ retailer }) => {
+const StoreIcon = ({ retailer }: StoreIconProps) => {
   const imgHref = `/distributor_icons/${retailer.toLowerCase()}.png`
   return (
     /*
@@ -283,35 +226,29 @@ const StoreIcon = ({ retailer }) => {
   )
 }
 
-BuyParts.propTypes = {
-  projectFullName: string.isRequired,
-  lines: array.isRequired,
-  parts: array.isRequired,
+interface BuyPartsProps {
+  projectFullName: string
+  lines: Array<any>
+  parts: Array<any>
 }
 
-AdjustQuantity.propTypes = {
-  buyMultiplier: number.isRequired,
-  setBuyMultiplier: func.isRequired,
-  buyAddPercent: number.isRequired,
-  setBuyAddPercent: func.isRequired,
+interface AdjustQuantityProps {
+  buyMultiplier: number
+  setBuyMultiplier: (v: number) => void
+  buyAddPercent: number
+  setBuyAddPercent: (v: number) => void
 }
 
-RetailerButton.propTypes = {
-  name: string.isRequired,
-  buyParts: func.isRequired,
-  install1ClickBOM: func.isRequired,
-  extensionPresence: string.isRequired,
-  numberOfLines: number.isRequired,
-  totalLines: number.isRequired,
-  numberOfParts: number.isRequired,
-  adding: bool,
-}
-RetailerButton.defaultProps = {
-  adding: false,
+interface RetailerButtonProps {
+  name: string
+  buyParts: () => void
+  numberOfLines: number
+  totalLines: number
+  numberOfParts: number
 }
 
-StoreIcon.propTypes = {
-  retailer: string.isRequired,
+interface StoreIconProps {
+  retailer: string
 }
 
 export default BuyParts
diff --git a/frontend/src/index.d.ts b/frontend/src/index.d.ts
new file mode 100644
index 0000000000..f885d596b6
--- /dev/null
+++ b/frontend/src/index.d.ts
@@ -0,0 +1,10 @@
+export {}
+
+declare global {
+  interface Window {
+    plausible: (
+      tag: string,
+      data: { props: { project: string; vendor: string; multiplier?: number } },
+    ) => void
+  }
+}
diff --git a/frontend/test/BuyParts.test.tsx b/frontend/test/BuyParts.test.tsx
index e668ef4604..4c4af736e3 100644
--- a/frontend/test/BuyParts.test.tsx
+++ b/frontend/test/BuyParts.test.tsx
@@ -46,6 +46,16 @@ it('still displays BuyParts if there are no purchasable parts', () => {
   expect(BomRowsCollapsed).toHaveLength(63)
 })
 
+it.skip('downloads `kitspace-bom.csv` on click', async () => {
+  render(
+    <BuyParts
+      lines={fixture.purchasableParts.lines}
+      parts={fixture.purchasableParts.parts}
+      projectFullName="username/name"
+    />,
+  )
+})
+
 afterEach(() => {
   cleanup()
   fetchMock.resetMocks()

From a15efb1ff875211814d1e189ed0037cdbd941c4f Mon Sep 17 00:00:00 2001
From: Abdulrhmn Ghanem <abdoghanem160@gmail.com>
Date: Mon, 7 Oct 2024 10:41:15 +0300
Subject: [PATCH 2/7] Download csv file on click

---
 .../src/components/Board/BuyParts/index.tsx   | 34 +++++++++----
 frontend/test/BuyParts.test.tsx               | 48 ++++++++++++++++++-
 2 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Board/BuyParts/index.tsx b/frontend/src/components/Board/BuyParts/index.tsx
index f5842bbebe..7eabf3763a 100644
--- a/frontend/src/components/Board/BuyParts/index.tsx
+++ b/frontend/src/components/Board/BuyParts/index.tsx
@@ -11,19 +11,34 @@ const BuyParts = ({ projectFullName, lines, parts }: BuyPartsProps) => {
   const [mult, setMult] = useState(1)
   const [buyAddPercent, setBuyAddPercent] = useState(0)
 
-  const buyParts = distributor => {
+  const downloadBom = (retailer: string) => {
     window.plausible('Buy Parts', {
       props: {
         project: projectFullName,
-        vendor: distributor,
+        vendor: retailer,
         multiplier: mult,
       },
     })
+
+    const data = [
+      ['Reference', 'Quantity', 'Distributor'],
+      [1, 2, 3],
+    ]
+    const csvContent = data.map(e => e.join(',')).join('\n')
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+    const url = URL.createObjectURL(blob)
+
+    const link = document
+      .getElementById(`retailer-${retailer}`)
+      .closest('a').parentElement
+    link.setAttribute('href', url)
+    link.setAttribute('download', `${retailer}-kitspace-bom.csv`)
+    link.click()
   }
 
-  const retailerList = OneClickBom.getRetailers()
+  const retailerList: Array<string> = OneClickBom.getRetailers()
   const retailerButtons = retailerList
-    .map(name => {
+    .map((name: string): React.ReactElement | null => {
       const [numberOfLines, numberOfParts] = lines.reduce(
         ([numOfLines, numOfParts], line) => {
           if (line.retailers[name]) {
@@ -37,7 +52,7 @@ const BuyParts = ({ projectFullName, lines, parts }: BuyPartsProps) => {
         return (
           <RetailerButton
             key={name}
-            buyParts={() => buyParts(name)}
+            downloadBom={() => downloadBom(name)}
             name={name}
             numberOfLines={numberOfLines}
             numberOfParts={numberOfParts}
@@ -165,7 +180,7 @@ const AdjustQuantity = ({
 
 const RetailerButton = ({
   name,
-  buyParts,
+  downloadBom,
   numberOfLines,
   totalLines,
   numberOfParts,
@@ -173,6 +188,7 @@ const RetailerButton = ({
   const color = 'green'
   return (
     <Button
+      as={'a'}
       className={`${styles.retailerButton} ${styles[color]}`}
       color={color}
       content={
@@ -182,10 +198,10 @@ const RetailerButton = ({
         </div>
       }
       label={{
-        as: 'a',
         className: `${styles.retailerLabel} ${styles[color]} `,
         content: (
           <div
+            id={`retailer-${name}`}
             style={{
               width: '100%',
               display: 'flex',
@@ -203,7 +219,7 @@ const RetailerButton = ({
         ),
       }}
       labelPosition="right"
-      onClick={buyParts}
+      onClick={downloadBom}
     />
   )
 }
@@ -241,7 +257,7 @@ interface AdjustQuantityProps {
 
 interface RetailerButtonProps {
   name: string
-  buyParts: () => void
+  downloadBom: () => void
   numberOfLines: number
   totalLines: number
   numberOfParts: number
diff --git a/frontend/test/BuyParts.test.tsx b/frontend/test/BuyParts.test.tsx
index 4c4af736e3..7d72d6a68b 100644
--- a/frontend/test/BuyParts.test.tsx
+++ b/frontend/test/BuyParts.test.tsx
@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, expect, it } from 'vitest'
+import { afterEach, beforeEach, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 
 import BuyParts from '@components/Board/BuyParts'
@@ -46,7 +46,16 @@ it('still displays BuyParts if there are no purchasable parts', () => {
   expect(BomRowsCollapsed).toHaveLength(63)
 })
 
-it.skip('downloads `kitspace-bom.csv` on click', async () => {
+it('downloads `kitspace-bom.csv` on click', async () => {
+  const mockPlausible = vi.fn()
+  window.plausible = mockPlausible // Mocking plausible method
+
+  // Mock the createObjectURL and link click functionality
+  const mockCreateObjectURL = vi
+    .spyOn(URL, 'createObjectURL')
+    .mockReturnValue('mocked-url')
+  const mockClick = vi.fn()
+
   render(
     <BuyParts
       lines={fixture.purchasableParts.lines}
@@ -54,6 +63,41 @@ it.skip('downloads `kitspace-bom.csv` on click', async () => {
       projectFullName="username/name"
     />,
   )
+
+  const storeButton = screen.getAllByRole('button').at(-1)
+
+  // Mock anchor element and simulate the CSV download behavior
+  const mockLinkElement = {
+    setAttribute: vi.fn(),
+    click: mockClick,
+  }
+  const mockGetElementById = vi.spyOn(document, 'getElementById').mockReturnValue({
+    closest: vi.fn().mockReturnValue({
+      parentElement: mockLinkElement,
+    }),
+  } as unknown as HTMLElement)
+
+  // Simulate button click
+  storeButton.click()
+
+  expect(mockPlausible).toHaveBeenCalledWith('Buy Parts', {
+    props: {
+      project: 'username/name',
+      vendor: expect.any(String),
+      multiplier: expect.any(Number),
+    },
+  })
+  expect(mockCreateObjectURL).toHaveBeenCalledOnce() // Check if the URL was created
+  expect(mockLinkElement.setAttribute).toHaveBeenCalledWith('href', 'mocked-url')
+  expect(mockLinkElement.setAttribute).toHaveBeenCalledWith(
+    'download',
+    expect.stringContaining('kitspace-bom.csv'),
+  )
+  expect(mockClick).toHaveBeenCalledOnce() // Check if the link click was triggered
+
+  // cleanup
+  mockCreateObjectURL.mockRestore()
+  mockGetElementById.mockRestore()
 })
 
 afterEach(() => {

From 0f1d2babb5f97613b73713f4c80466e20073d279 Mon Sep 17 00:00:00 2001
From: Abdulrhmn Ghanem <abdoghanem160@gmail.com>
Date: Mon, 7 Oct 2024 11:08:39 +0300
Subject: [PATCH 3/7] Fix a memory leak in DirectStores

---
 .../Board/BuyParts/DirectStores.tsx           | 58 +++++++++++--------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/Board/BuyParts/DirectStores.tsx b/frontend/src/components/Board/BuyParts/DirectStores.tsx
index e8e5791073..84dc8215ac 100644
--- a/frontend/src/components/Board/BuyParts/DirectStores.tsx
+++ b/frontend/src/components/Board/BuyParts/DirectStores.tsx
@@ -24,37 +24,22 @@ const DirectStores = ({ items, multiplier }: DirectStoresProps) => {
     [items, multiplier],
   )
 
-  const getLocation = async () => {
-    const usedCountryCodes = Object.keys(countriesData).map(
-      key => countriesData[key],
-    )
-    const freegeoipEndpoint = 'https://freegeoip.kitspace.org'
-
-    try {
-      const res = await fetch(freegeoipEndpoint)
-      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) {
-      console.error(err)
-      return 'Other'
-    }
-  }
-
   useEffect(() => {
+    const abortController = new AbortController()
+    const signal = abortController.signal
     if (typeof window !== 'undefined') {
-      getLocation().then(code => setCountryCode(code))
+      getLocation(signal).then(code => {
+        if (code && !signal.aborted) {
+          setCountryCode(code)
+        }
+      })
     }
-
     setDigikeyParts(getParts('Digikey'))
     setFarnellParts(getParts('Farnell'))
     setNewarkParts(getParts('Newark'))
+    return () => {
+      abortController.abort()
+    }
   }, [getParts])
 
   const tildeDelimiter = part => `${part.sku}~${part.quantity}`
@@ -131,6 +116,29 @@ const DirectStores = ({ items, multiplier }: DirectStoresProps) => {
   )
 }
 
+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

From fe06b6e1a56744ff98929423c5f44b7f241e8342 Mon Sep 17 00:00:00 2001
From: Abdulrhmn Ghanem <abdoghanem160@gmail.com>
Date: Tue, 8 Oct 2024 03:17:04 +0300
Subject: [PATCH 4/7] RS

---
 .../src/components/Board/BuyParts/index.tsx   | 54 ++++++++++++++---
 frontend/test/BuyParts.test.tsx               | 59 ++++++++++++-------
 2 files changed, 85 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/Board/BuyParts/index.tsx b/frontend/src/components/Board/BuyParts/index.tsx
index 7eabf3763a..5ce96dff23 100644
--- a/frontend/src/components/Board/BuyParts/index.tsx
+++ b/frontend/src/components/Board/BuyParts/index.tsx
@@ -20,17 +20,12 @@ const BuyParts = ({ projectFullName, lines, parts }: BuyPartsProps) => {
       },
     })
 
-    const data = [
-      ['Reference', 'Quantity', 'Distributor'],
-      [1, 2, 3],
-    ]
-    const csvContent = data.map(e => e.join(',')).join('\n')
+    const data = rsBom(lines, mult, buyAddPercent)
+    const csvContent = `${data.map(e => e.join(',')).join('\n')}\n`
     const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
     const url = URL.createObjectURL(blob)
 
-    const link = document
-      .getElementById(`retailer-${retailer}`)
-      .closest('a').parentElement
+    const link = document.getElementById(`retailer-${retailer}`).closest('a')
     link.setAttribute('href', url)
     link.setAttribute('download', `${retailer}-kitspace-bom.csv`)
     link.click()
@@ -242,6 +237,49 @@ const StoreIcon = ({ retailer }: StoreIconProps) => {
   )
 }
 
+type rsRow = [string, string, string, string, string, string]
+
+const rsBom = (lines: Array<any>, multiplier: number, addPercent: number) => {
+  const bom: Array<rsRow> = [
+    [
+      'Product Number',
+      'Brand',
+      'MPN',
+      'Description',
+      'Quantity',
+      'Customer Part Number',
+    ],
+  ]
+
+  for (const line of lines) {
+    if (line.retailers?.RS) {
+      const row: rsRow = [
+        line.retailers.RS,
+        line.partNumbers?.[0]?.manufacturer,
+        line.partNumbers?.[0]?.part,
+        line.description,
+        calculateQuantity(line.quantity, multiplier, addPercent).toString(),
+        line.row,
+      ]
+      bom.push(row)
+    }
+  }
+
+  return bom
+}
+
+export const calculateQuantity = (
+  quantity: number,
+  multiplier: number,
+  addPercent: number,
+) => {
+  let newQuantity = Math.ceil(quantity * multiplier)
+  if (addPercent > 0) {
+    newQuantity += Math.ceil(newQuantity * (addPercent / 100))
+  }
+  return newQuantity
+}
+
 interface BuyPartsProps {
   projectFullName: string
   lines: Array<any>
diff --git a/frontend/test/BuyParts.test.tsx b/frontend/test/BuyParts.test.tsx
index 7d72d6a68b..e68e7677bf 100644
--- a/frontend/test/BuyParts.test.tsx
+++ b/frontend/test/BuyParts.test.tsx
@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 
-import BuyParts from '@components/Board/BuyParts'
+import BuyParts, { calculateQuantity } from '@components/Board/BuyParts'
 import fixture from './fixtures/BuyParts.json'
 
 beforeEach(() => {
@@ -46,10 +46,30 @@ it('still displays BuyParts if there are no purchasable parts', () => {
   expect(BomRowsCollapsed).toHaveLength(63)
 })
 
-it('downloads `kitspace-bom.csv` on click', async () => {
+it('tracks bom download', async () => {
   const mockPlausible = vi.fn()
-  window.plausible = mockPlausible // Mocking plausible method
+  window.plausible = mockPlausible
+
+  render(
+    <BuyParts
+      lines={fixture.purchasableParts.lines}
+      parts={fixture.purchasableParts.parts}
+      projectFullName="username/name"
+    />,
+  )
+  const storeButton = screen.getAllByRole('button').at(-1)
+  storeButton.click()
 
+  expect(mockPlausible).toHaveBeenCalledWith('Buy Parts', {
+    props: {
+      project: 'username/name',
+      vendor: expect.any(String),
+      multiplier: expect.any(Number),
+    },
+  })
+})
+
+it('downloads `kitspace-bom.csv` on click', async () => {
   // Mock the createObjectURL and link click functionality
   const mockCreateObjectURL = vi
     .spyOn(URL, 'createObjectURL')
@@ -64,42 +84,41 @@ it('downloads `kitspace-bom.csv` on click', async () => {
     />,
   )
 
-  const storeButton = screen.getAllByRole('button').at(-1)
-
   // Mock anchor element and simulate the CSV download behavior
   const mockLinkElement = {
     setAttribute: vi.fn(),
     click: mockClick,
   }
-  const mockGetElementById = vi.spyOn(document, 'getElementById').mockReturnValue({
-    closest: vi.fn().mockReturnValue({
-      parentElement: mockLinkElement,
-    }),
-  } as unknown as HTMLElement)
+  const mockElementWithId = document.createElement('div')
+  mockElementWithId.closest = vi.fn().mockReturnValue(mockLinkElement)
+
+  const mockGetElementById = vi
+    .spyOn(document, 'getElementById')
+    .mockReturnValue(mockElementWithId)
 
-  // Simulate button click
+  const storeButton = screen.getAllByRole('button').at(-1)
   storeButton.click()
 
-  expect(mockPlausible).toHaveBeenCalledWith('Buy Parts', {
-    props: {
-      project: 'username/name',
-      vendor: expect.any(String),
-      multiplier: expect.any(Number),
-    },
-  })
-  expect(mockCreateObjectURL).toHaveBeenCalledOnce() // Check if the URL was created
+  expect(mockCreateObjectURL).toHaveBeenCalledOnce()
   expect(mockLinkElement.setAttribute).toHaveBeenCalledWith('href', 'mocked-url')
   expect(mockLinkElement.setAttribute).toHaveBeenCalledWith(
     'download',
     expect.stringContaining('kitspace-bom.csv'),
   )
-  expect(mockClick).toHaveBeenCalledOnce() // Check if the link click was triggered
+  expect(mockClick).toHaveBeenCalledOnce()
 
   // cleanup
   mockCreateObjectURL.mockRestore()
   mockGetElementById.mockRestore()
 })
 
+it('calculates the order quantity', () => {
+  expect(calculateQuantity(1, 1, 0)).toBe(1)
+  expect(calculateQuantity(10, 2, 0)).toBe(20)
+  expect(calculateQuantity(10, 2, 10)).toBe(22)
+  expect(calculateQuantity(1, 1, 10)).toBe(2)
+})
+
 afterEach(() => {
   cleanup()
   fetchMock.resetMocks()

From dc19190ba1ae3722be58571004a1bc9e97526560 Mon Sep 17 00:00:00 2001
From: Abdulrhmn Ghanem <abdoghanem160@gmail.com>
Date: Thu, 10 Oct 2024 01:59:55 +0300
Subject: [PATCH 5/7] farnell

---
 .../src/components/Board/BuyParts/index.tsx   | 54 ++++++++++++++++---
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Board/BuyParts/index.tsx b/frontend/src/components/Board/BuyParts/index.tsx
index 5ce96dff23..2879d2486a 100644
--- a/frontend/src/components/Board/BuyParts/index.tsx
+++ b/frontend/src/components/Board/BuyParts/index.tsx
@@ -19,9 +19,9 @@ const BuyParts = ({ projectFullName, lines, parts }: BuyPartsProps) => {
         multiplier: mult,
       },
     })
-
-    const data = rsBom(lines, mult, buyAddPercent)
-    const csvContent = `${data.map(e => e.join(',')).join('\n')}\n`
+    const csvContent = `${csvBom(lines, mult, buyAddPercent, retailer)
+      .map((e: Array<string>) => e.join(','))
+      .join('\n')}\n`
     const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
     const url = URL.createObjectURL(blob)
 
@@ -237,9 +237,7 @@ const StoreIcon = ({ retailer }: StoreIconProps) => {
   )
 }
 
-type rsRow = [string, string, string, string, string, string]
-
-const rsBom = (lines: Array<any>, multiplier: number, addPercent: number) => {
+const rsBom = (lines: Array<Line>, multiplier: number, addPercent: number) => {
   const bom: Array<rsRow> = [
     [
       'Product Number',
@@ -268,6 +266,39 @@ const rsBom = (lines: Array<any>, multiplier: number, addPercent: number) => {
   return bom
 }
 
+const farnellBom = (lines: Array<Line>, multiplier: number, addPercent: number) => {
+  const bom: Array<farnellRow> = [['Part Number', 'Quantity', 'Line Note']]
+  for (const line of lines) {
+    if (line.retailers?.Farnell) {
+      const row: farnellRow = [
+        line.retailers.Farnell,
+        calculateQuantity(line.quantity, multiplier, addPercent).toString(),
+        line.description,
+      ]
+      bom.push(row)
+    }
+  }
+  return bom
+}
+
+const csvBom = (
+  lines: Array<Line>,
+  multiplier: number,
+  addPercent: number,
+  retailer: string,
+) => {
+  switch (retailer) {
+    case 'RS':
+      return rsBom(lines, multiplier, addPercent)
+    // Newark and Farnell have the same file format.
+    case 'Newark':
+    case 'Farnell':
+      return farnellBom(lines, multiplier, addPercent)
+    default:
+      throw new Error(`Unknown retailer: ${retailer}`)
+  }
+}
+
 export const calculateQuantity = (
   quantity: number,
   multiplier: number,
@@ -305,4 +336,15 @@ interface StoreIconProps {
   retailer: string
 }
 
+type rsRow = [string, string, string, string, string, string]
+type farnellRow = [string, string, string]
+
+type Line = {
+  retailers: { RS: string; Farnell: string }
+  partNumbers: Array<{ manufacturer: string; part: string }>
+  description: string
+  quantity: number
+  row: string
+}
+
 export default BuyParts

From 3f2ea3871b3368dbf190251b500b44598b0a6b7f Mon Sep 17 00:00:00 2001
From: Abdulrhmn Ghanem <abdoghanem160@gmail.com>
Date: Fri, 11 Oct 2024 15:01:45 +0300
Subject: [PATCH 6/7] Mouser and LCSC

---
 .../Board/BuyParts/DirectStores.tsx           | 52 +-----------
 .../src/components/Board/BuyParts/index.tsx   | 83 +++++++++++++++++--
 2 files changed, 77 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/Board/BuyParts/DirectStores.tsx b/frontend/src/components/Board/BuyParts/DirectStores.tsx
index 84dc8215ac..e885c20a53 100644
--- a/frontend/src/components/Board/BuyParts/DirectStores.tsx
+++ b/frontend/src/components/Board/BuyParts/DirectStores.tsx
@@ -1,14 +1,11 @@
 import React, { useEffect, useState, useCallback } from 'react'
 
 import DigikeyData from '1-click-bom-minimal/lib/data/digikey.json'
-import FarnellData from '1-click-bom-minimal/lib/data/farnell.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 [farnellParts, setFarnellParts] = useState([])
-  const [newarkParts, setNewarkParts] = useState([])
 
   const getParts = useCallback(
     retailer =>
@@ -35,15 +32,11 @@ const DirectStores = ({ items, multiplier }: DirectStoresProps) => {
       })
     }
     setDigikeyParts(getParts('Digikey'))
-    setFarnellParts(getParts('Farnell'))
-    setNewarkParts(getParts('Newark'))
     return () => {
       abortController.abort()
     }
   }, [getParts])
 
-  const tildeDelimiter = part => `${part.sku}~${part.quantity}`
-
   const digikeyPartRenderer = (part, index) => {
     index += 1
     return (
@@ -70,50 +63,7 @@ const DirectStores = ({ items, multiplier }: DirectStoresProps) => {
     )
   }
 
-  const farnell = (code, parts) => {
-    const site = FarnellData.sites[FarnellData.lookup[code]]
-    const queryString = parts.map(tildeDelimiter).join('~')
-    return (
-      <form
-        key="FarnellForm"
-        action={`https${site}/jsp/extlink.jsp`}
-        id="FarnellForm"
-        method="GET"
-        target="_blank"
-      >
-        <input name="CMP" type="hidden" value="ref_kitnic" />
-        <input name="action" type="hidden" value="buy" />
-        <input name="product" type="hidden" value={queryString} />
-      </form>
-    )
-  }
-
-  const newark = parts => {
-    const queryString = parts.map(tildeDelimiter).join('~')
-    return (
-      <form
-        key="NewarkForm"
-        action="https://www.newark.com/jsp/extlink.jsp"
-        id="NewarkForm"
-        method="GET"
-        target="_blank"
-      >
-        <input name="CMP" type="hidden" value="ref_kitnic" />
-        <input name="action" type="hidden" value="buy" />
-        <input name="product" type="hidden" value={queryString} />
-      </form>
-    )
-  }
-
-  return (
-    <span>
-      {[
-        digikey(countryCode, digikeyParts),
-        farnell(countryCode, farnellParts),
-        newark(newarkParts),
-      ]}
-    </span>
-  )
+  return <span>{[digikey(countryCode, digikeyParts)]}</span>
 }
 
 const getLocation = async (signal: AbortSignal) => {
diff --git a/frontend/src/components/Board/BuyParts/index.tsx b/frontend/src/components/Board/BuyParts/index.tsx
index 2879d2486a..1dde2790fa 100644
--- a/frontend/src/components/Board/BuyParts/index.tsx
+++ b/frontend/src/components/Board/BuyParts/index.tsx
@@ -11,7 +11,7 @@ const BuyParts = ({ projectFullName, lines, parts }: BuyPartsProps) => {
   const [mult, setMult] = useState(1)
   const [buyAddPercent, setBuyAddPercent] = useState(0)
 
-  const downloadBom = (retailer: string) => {
+  const downloadBom = (retailer: Retailer) => {
     window.plausible('Buy Parts', {
       props: {
         project: projectFullName,
@@ -47,7 +47,7 @@ const BuyParts = ({ projectFullName, lines, parts }: BuyPartsProps) => {
         return (
           <RetailerButton
             key={name}
-            downloadBom={() => downloadBom(name)}
+            downloadBom={() => downloadBom(name as Retailer)}
             name={name}
             numberOfLines={numberOfLines}
             numberOfParts={numberOfParts}
@@ -269,9 +269,9 @@ const rsBom = (lines: Array<Line>, multiplier: number, addPercent: number) => {
 const farnellBom = (lines: Array<Line>, multiplier: number, addPercent: number) => {
   const bom: Array<farnellRow> = [['Part Number', 'Quantity', 'Line Note']]
   for (const line of lines) {
-    if (line.retailers?.Farnell) {
+    if (line.retailers.Farnell || line.retailers.Newark) {
       const row: farnellRow = [
-        line.retailers.Farnell,
+        line.retailers.Farnell || line.retailers.Newark,
         calculateQuantity(line.quantity, multiplier, addPercent).toString(),
         line.description,
       ]
@@ -281,11 +281,68 @@ const farnellBom = (lines: Array<Line>, multiplier: number, addPercent: number)
   return bom
 }
 
+const mouserBom = (lines: Array<Line>, multiplier: number, addPercent: number) => {
+  const bom: Array<mouserRow> = [
+    [
+      'Mouser Part Number',
+      'Mfr Part Number',
+      'Mfr Name',
+      'Description',
+      'Quantity',
+      'Customer Part Number',
+    ],
+  ]
+
+  for (const line of lines) {
+    if (line.retailers?.Mouser) {
+      const row: mouserRow = [
+        line.retailers.Mouser,
+        line.partNumbers?.[0]?.manufacturer,
+        line.partNumbers?.[0]?.part,
+        line.description,
+        calculateQuantity(line.quantity, multiplier, addPercent).toString(),
+        line.row,
+      ]
+      bom.push(row)
+    }
+  }
+
+  return bom
+}
+
+const lcscBom = (lines: Array<Line>, multiplier: number, addPercent: number) => {
+  const bom: Array<lcscRow> = [
+    [
+      'Quantity',
+      'LCSC Part Number',
+      'Manufacturer',
+      'Manufacturer Part Number',
+      'Description',
+      'Customer Part Number',
+    ],
+  ]
+
+  for (const line of lines) {
+    const row: lcscRow = [
+      calculateQuantity(line.quantity, multiplier, addPercent).toString(),
+      line.retailers?.LCSC,
+      line.partNumbers?.[0]?.manufacturer,
+      line.partNumbers?.[0]?.part,
+      line.description,
+      line.row,
+    ]
+    bom.push(row)
+  }
+
+  return bom
+}
+type Retailer = 'RS' | 'Newark' | 'Farnell' | 'Mouser' | 'LCSC'
+
 const csvBom = (
   lines: Array<Line>,
   multiplier: number,
   addPercent: number,
-  retailer: string,
+  retailer: Retailer,
 ) => {
   switch (retailer) {
     case 'RS':
@@ -294,6 +351,10 @@ const csvBom = (
     case 'Newark':
     case 'Farnell':
       return farnellBom(lines, multiplier, addPercent)
+    case 'Mouser':
+      return mouserBom(lines, multiplier, addPercent)
+    case 'LCSC':
+      return lcscBom(lines, multiplier, addPercent)
     default:
       throw new Error(`Unknown retailer: ${retailer}`)
   }
@@ -336,11 +397,19 @@ interface StoreIconProps {
   retailer: string
 }
 
-type rsRow = [string, string, string, string, string, string]
 type farnellRow = [string, string, string]
+type rsRow = [string, string, string, string, string, string]
+type lcscRow = [string, string, string, string, string, string]
+type mouserRow = [string, string, string, string, string, string]
 
 type Line = {
-  retailers: { RS: string; Farnell: string }
+  retailers: {
+    RS: string
+    Farnell: string
+    Newark: string
+    LCSC: string
+    Mouser: string
+  }
   partNumbers: Array<{ manufacturer: string; part: string }>
   description: string
   quantity: number

From 7dd215d993a15fc5b5970c5eded60b91fbeff790 Mon Sep 17 00:00:00 2001
From: Abdulrhmn Ghanem <abdoghanem160@gmail.com>
Date: Wed, 30 Oct 2024 20:00:40 +0300
Subject: [PATCH 7/7] redirect to digikey

---
 .../components/Board/BuyParts/Bom.module.scss | 14 ++++
 .../src/components/Board/BuyParts/Bom.tsx     |  6 +-
 .../Board/BuyParts/index.module.scss          |  7 ++
 .../src/components/Board/BuyParts/index.tsx   | 81 +++++++++++--------
 4 files changed, 73 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/Board/BuyParts/Bom.module.scss b/frontend/src/components/Board/BuyParts/Bom.module.scss
index f6e9123d02..fa8f5f81d5 100644
--- a/frontend/src/components/Board/BuyParts/Bom.module.scss
+++ b/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;
+  }
 }
diff --git a/frontend/src/components/Board/BuyParts/Bom.tsx b/frontend/src/components/Board/BuyParts/Bom.tsx
index 58298e0446..faa56b71c0 100644
--- a/frontend/src/components/Board/BuyParts/Bom.tsx
+++ b/frontend/src/components/Board/BuyParts/Bom.tsx
@@ -43,13 +43,13 @@ const ExpandBom = ({ diff, collapsed, setCollapsed }: ExpandBomProps) => {
     ) : 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',
@@ -58,7 +58,7 @@ const ExpandBom = ({ diff, collapsed, setCollapsed }: ExpandBomProps) => {
       >
         <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'}
diff --git a/frontend/src/components/Board/BuyParts/index.module.scss b/frontend/src/components/Board/BuyParts/index.module.scss
index 1e4856d321..9b368c6e37 100644
--- a/frontend/src/components/Board/BuyParts/index.module.scss
+++ b/frontend/src/components/Board/BuyParts/index.module.scss
@@ -4,6 +4,7 @@
   -webkit-user-select: none;
   user-select: none;
   cursor: default;
+  margin-left: 5px;
 }
 
 .BuyParts {
@@ -52,6 +53,12 @@
     min-width: 110px;
   }
 
+  .retailerLabelContent {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
   .retailerButton.pink {
     background: #da8282 !important;
   }
diff --git a/frontend/src/components/Board/BuyParts/index.tsx b/frontend/src/components/Board/BuyParts/index.tsx
index 1dde2790fa..a2f264402c 100644
--- a/frontend/src/components/Board/BuyParts/index.tsx
+++ b/frontend/src/components/Board/BuyParts/index.tsx
@@ -8,27 +8,24 @@ import styles from './index.module.scss'
 
 const BuyParts = ({ projectFullName, lines, parts }: BuyPartsProps) => {
   const [buyMultiplier, setBuyMultiplier] = useState(1)
-  const [mult, setMult] = useState(1)
+  const [multiplier, setMultiplier] = useState(1)
   const [buyAddPercent, setBuyAddPercent] = useState(0)
 
-  const downloadBom = (retailer: Retailer) => {
+  const getBom = (retailer: Retailer) => {
     window.plausible('Buy Parts', {
       props: {
         project: projectFullName,
         vendor: retailer,
-        multiplier: mult,
+        multiplier: multiplier,
       },
     })
-    const csvContent = `${csvBom(lines, mult, buyAddPercent, retailer)
-      .map((e: Array<string>) => e.join(','))
-      .join('\n')}\n`
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
-    const url = URL.createObjectURL(blob)
-
-    const link = document.getElementById(`retailer-${retailer}`).closest('a')
-    link.setAttribute('href', url)
-    link.setAttribute('download', `${retailer}-kitspace-bom.csv`)
-    link.click()
+
+    if (retailer === 'Digikey') {
+      redirectToStore(retailer)
+      return
+    }
+
+    downloadBomCSV({ lines, multiplier, buyAddPercent, retailer })
   }
 
   const retailerList: Array<string> = OneClickBom.getRetailers()
@@ -37,17 +34,21 @@ const BuyParts = ({ projectFullName, lines, parts }: BuyPartsProps) => {
       const [numberOfLines, numberOfParts] = lines.reduce(
         ([numOfLines, numOfParts], line) => {
           if (line.retailers[name]) {
-            return [numOfLines + 1, numOfParts + Math.ceil(mult * line.quantity)]
+            return [
+              numOfLines + 1,
+              numOfParts + Math.ceil(multiplier * line.quantity),
+            ]
           }
           return [numOfLines, numOfParts]
         },
         [0, 0],
       )
+
       if (numberOfLines > 0) {
         return (
           <RetailerButton
             key={name}
-            downloadBom={() => downloadBom(name as Retailer)}
+            downloadBom={() => getBom(name as Retailer)}
             name={name}
             numberOfLines={numberOfLines}
             numberOfParts={numberOfParts}
@@ -62,19 +63,19 @@ const BuyParts = ({ projectFullName, lines, parts }: BuyPartsProps) => {
   useEffect(() => {
     const multi = buyMultiplier
     if (Number.isNaN(multi) || multi < 1) {
-      setMult(1)
+      setMultiplier(1)
     }
     const percent = buyAddPercent
     if (Number.isNaN(percent) || percent < 1) {
-      setMult(0)
+      setMultiplier(0)
     }
-    setMult(multi + multi * (percent / 100))
+    setMultiplier(multi + multi * (percent / 100))
   }, [buyMultiplier, buyAddPercent])
 
   const linesToTsv = () => {
     const linesMult = lines.map(line => ({
       ...line,
-      quantity: Math.ceil(line.quantity * mult),
+      quantity: Math.ceil(line.quantity * multiplier),
     }))
     return OneClickBom.writeTSV(linesMult)
   }
@@ -97,7 +98,7 @@ const BuyParts = ({ projectFullName, lines, parts }: BuyPartsProps) => {
           <Segment attached className={styles.buttonSegment}>
             {retailerButtons}
           </Segment>
-          <DirectStores items={lines} multiplier={mult} />
+          <DirectStores items={lines} multiplier={multiplier} />
         </>
       ) : (
         <NoPurchasableParts />
@@ -167,9 +168,7 @@ const AdjustQuantity = ({
         setBuyAddPercent(v)
       }}
     />
-    <span className={styles.notSelectable} style={{ marginLeft: 5 }}>
-      %
-    </span>
+    <span className={styles.notSelectable}>%</span>
   </Segment>
 )
 
@@ -195,14 +194,7 @@ const RetailerButton = ({
       label={{
         className: `${styles.retailerLabel} ${styles[color]} `,
         content: (
-          <div
-            id={`retailer-${name}`}
-            style={{
-              width: '100%',
-              display: 'flex',
-              justifyContent: 'space-between',
-            }}
-          >
+          <div className={`${styles.retailerLabelContent}`} id={`retailer-${name}`}>
             <div>
               {numberOfLines}/{totalLines} lines ({numberOfParts} parts)
             </div>
@@ -336,7 +328,7 @@ const lcscBom = (lines: Array<Line>, multiplier: number, addPercent: number) =>
 
   return bom
 }
-type Retailer = 'RS' | 'Newark' | 'Farnell' | 'Mouser' | 'LCSC'
+type Retailer = 'RS' | 'Newark' | 'Farnell' | 'Mouser' | 'LCSC' | 'Digikey'
 
 const csvBom = (
   lines: Array<Line>,
@@ -372,6 +364,31 @@ export const calculateQuantity = (
   return newQuantity
 }
 
+function downloadBomCSV({ lines, multiplier, buyAddPercent, retailer }: Order) {
+  const csvContent = `${csvBom(lines, multiplier, buyAddPercent, retailer)
+    .map((e: Array<string>) => e.join(','))
+    .join('\n')}\n`
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+  const url = URL.createObjectURL(blob)
+
+  const link = document.getElementById(`retailer-${retailer}`).closest('a')
+  link.setAttribute('href', url)
+  link.setAttribute('download', `${retailer}-kitspace-bom.csv`)
+  link.click()
+}
+
+function redirectToStore(retailer: Retailer) {
+  const form = document.getElementById(`${retailer}Form`) as HTMLFormElement
+  form.submit()
+}
+
+interface Order {
+  lines: Array<Line>
+  multiplier: number
+  buyAddPercent: number
+  retailer: Retailer
+}
+
 interface BuyPartsProps {
   projectFullName: string
   lines: Array<any>