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/5] 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/5] 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/5] 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/5] 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/5] 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