feat: add denominations modal

package.json

@@ -64,7 +64,8 @@
     "react-toast-notifications": "^2.4.0",
     "react-tooltip": "^4.2.10",
     "rebass": "^4.0.7",
-    "stream-browserify": "^3.0.0"
+    "stream-browserify": "^3.0.0",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",

src/components/molecules/currency-input/index.tsx

@@ -0,0 +1,78 @@
+import clsx from "clsx"
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { currencies } from "../../../utils/currencies"
+import Input from "../input"
+import Select from "../select"
+
+type CurrencyInputProps = {
+  options?: string[]
+  currentCurrency?: string
+  required?: boolean
+  onCurrencyChange?: (currency) => void
+} & React.InputHTMLAttributes<HTMLInputElement>
+
+const CurrencyInput: React.FC<CurrencyInputProps> = ({
+  options,
+  currentCurrency,
+  required = false,
+  onCurrencyChange,
+  className,
+  name,
+  ...props
+}) => {
+  const initialRender = useRef(true)
+  const isSelectable = options ? true : false
+
+  const opts = useMemo(() => {
+    const codes = options
+      ? options.map((o) => o.toLowerCase())
+      : [currentCurrency?.toLowerCase()]
+    return (
+      Object.entries(currencies)
+        .filter(([_key, obj]) => codes.includes(obj.code.toLowerCase()))
+        .map(({ "1": { code, symbol_native, decimal_digits } }) => ({
+          value: code.toLowerCase(),
+          label: `${code.toUpperCase()}`,
+          symbol: symbol_native,
+          digits: decimal_digits,
+        }))
+        .filter(Boolean) || []
+    )
+  }, [options, currencies, currentCurrency])
+
+  const [selected, setSelected] = useState(
+    opts.find(({ value }) => value === currentCurrency?.toLowerCase())
+  )
+
+  useEffect(() => {
+    if (onCurrencyChange && !initialRender.current) {
+      onCurrencyChange(selected)
+    }
+    initialRender.current = false
+  }, [selected])
+
+  return isSelectable ? (
+    <Select
+      enableSearch
+      label="Currency"
+      options={opts}
+      value={selected}
+      onChange={setSelected}
+      className={className}
+      required={required}
+      name={name}
+      {...props}
+    />
+  ) : (
+    <Input
+      label="Currency"
+      readOnly
+      className={clsx("pointer-events-none", className)}
+      value={undefined}
+      placeholder={`${selected?.label}`}
+      tabIndex={-1}
+    />
+  )
+}
+
+export default CurrencyInput

src/components/molecules/modal/index.tsx

@@ -86,9 +86,9 @@ Modal.Header = ({ handleClose = undefined, children }) => {
     >
       <div className="pb-1 flex w-full justify-end">
         {handleClose && (
-          <span onClick={handleClose} className="text-grey-50 cursor-pointer">
+          <button onClick={handleClose} className="text-grey-50 cursor-pointer">
             <CrossIcon size={20} />
-          </span>
+          </button>
         )}
       </div>
       {children}

src/components/organisms/edit-denominations-modal/index.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react"
+import * as React from "react"
+import EditDenominationsModal from "."
+import Button from "../../fundamentals/button"
+import { v4 as uuidv4 } from "uuid"
+
+export default {
+  title: "Organisms/EditDenominationModal",
+  component: EditDenominationsModal,
+} as ComponentMeta<typeof EditDenominationsModal>
+
+const Template: ComponentStory<typeof EditDenominationsModal> = (args) => {
+  const [isOpen, setOpen] = React.useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant="primary" size="small">
+        Edit denominations
+      </Button>
+      {isOpen && (
+        <EditDenominationsModal {...args} handleClose={() => setOpen(false)} />
+      )}
+    </>
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  denominations: [],
+  onSubmit: console.log,
+  currencyCodes: ["USD", "EUR", "GBP", "DKK", "NOK", "SEK"],
+}

src/components/organisms/edit-denominations-modal/index.tsx

@@ -0,0 +1,165 @@
+import * as React from "react"
+import { v4 as uuidv4 } from "uuid"
+import Button from "../../fundamentals/button"
+import PlusIcon from "../../fundamentals/icons/plus-icon"
+import TrashIcon from "../../fundamentals/icons/trash-icon"
+import InfoTooltip from "../../molecules/info-tooltip"
+import Modal from "../../molecules/modal"
+import CurrencyInput from "../../organisms/currency-input"
+
+export type PriceType = {
+  currency_code: string
+  amount: number
+  id?: string
+}
+
+type EditDenominationsModalProps = {
+  defaultDenominations: PriceType[]
+  handleClose: () => void
+  onSubmit: (denominations: PriceType[]) => void
+  defaultNewAmount?: number
+  defaultNewCurrencyCode?: string
+  currencyCodes?: string[]
+}
+
+const augmentWithId = (obj) => ({ ...obj, indexId: uuidv4() })
+
+const augmentWithIds = (list) => {
+  return list.map(augmentWithId)
+}
+
+const EditDenominationsModal = ({
+  defaultDenominations = [],
+  onSubmit,
+  handleClose,
+  currencyCodes = [],
+  defaultNewAmount = 1000,
+}: EditDenominationsModalProps) => {
+  const [denominations, setDenominations] = React.useState(
+    augmentWithIds(defaultDenominations)
+  )
+  const selectedCurrencies = denominations.map(
+    (denomination) => denomination.currency_code
+  )
+  const availableCurrencies = currencyCodes?.filter(
+    (currency) => !selectedCurrencies.includes(currency)
+  )
+
+  const onAmountChange = (index) => {
+    return (amount) => {
+      const newDenominations = denominations.slice()
+      newDenominations[index] = { ...newDenominations[index], amount }
+      setDenominations(newDenominations)
+    }
+  }
+
+  const onCurrencyChange = (index) => {
+    return (currencyCode) => {
+      const newDenominations = denominations.slice()
+      newDenominations[index] = {
+        ...newDenominations[index],
+        currency_code: currencyCode,
+      }
+      setDenominations(newDenominations)
+    }
+  }
+
+  const onClickDelete = (index) => {
+    return () => {
+      const newDenominations = denominations.slice()
+      newDenominations.splice(index, 1)
+      setDenominations(newDenominations)
+    }
+  }
+
+  const appendDenomination = () => {
+    const newDenomination = {
+      amount: defaultNewAmount,
+      currency_code: availableCurrencies[0],
+    }
+    setDenominations([...denominations, augmentWithId(newDenomination)])
+  }
+
+  return (
+    <Modal handleClose={handleClose}>
+      <Modal.Body>
+        <Modal.Header handleClose={handleClose}>
+          <span className="inter-xlarge-semibold">Edit Denominations</span>
+        </Modal.Header>
+        <Modal.Content>
+          <div className="pt-1">
+            <div className="flex items-center">
+              <label className="inter-base-semibold text-grey-90 mr-1.5">
+                Prices
+              </label>
+              <InfoTooltip content={"Helpful denominations"} />
+            </div>
+            {denominations.map((field, index) => {
+              return (
+                <div
+                  key={field.indexId}
+                  className="first:mt-0 mt-xsmall flex items-center"
+                >
+                  <div className="flex-1">
+                    <CurrencyInput
+                      currencyCodes={currencyCodes}
+                      currentCurrency={field.currency_code}
+                      onChange={onCurrencyChange(index)}
+                    >
+                      <CurrencyInput.AmountInput
+                        label="Amount"
+                        onChange={onAmountChange(index)}
+                        amount={field.amount}
+                      />
+                    </CurrencyInput>
+                  </div>
+                  <button className="ml-2xlarge">
+                    <TrashIcon
+                      onClick={onClickDelete(index)}
+                      className="text-grey-40"
+                      size="20"
+                    />
+                  </button>
+                </div>
+              )
+            })}
+          </div>
+          <div className="mt-large">
+            <Button
+              onClick={appendDenomination}
+              type="button"
+              variant="ghost"
+              size="small"
+              disabled={availableCurrencies.length === 0}
+            >
+              <PlusIcon size={20} />
+              Add a price
+            </Button>
+          </div>
+        </Modal.Content>
+        <Modal.Footer>
+          <div className="w-full flex justify-end">
+            <Button
+              variant="ghost"
+              size="small"
+              onClick={handleClose}
+              className="mr-2 min-w-[130px] justify-center"
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="small"
+              className="mr-2 min-w-[130px] justify-center"
+              onClick={() => onSubmit(denominations)}
+            >
+              Save
+            </Button>
+          </div>
+        </Modal.Footer>
+      </Modal.Body>
+    </Modal>
+  )
+}
+
+export default EditDenominationsModal

src/domain/settings/regions/details.tsx

@@ -246,6 +246,12 @@ const RegionDetails = ({ id, onDelete, handleSelect }) => {
                   ref={register}
                   className="mb-base"
                 />
+                <CurrencyInput
+                  currentCurrency={selectedCurrency}
+                  currencyCodes={currencies}
+                  onChange={handleChangeCurrency}
+                  className="mb-base"
+                /> */}
                 <CurrencyInput
                   currentCurrency={selectedCurrency}
                   currencyCodes={currencies}

src/utils/prices.ts

@@ -51,7 +51,7 @@ export const extractOptionPrice = (price, region) => {
  * Checks the list of currencies and returns the divider/multiplier
  * that should be used to calculate the persited and display amount.
  * @param currency
- * @returns {number}
+ * @return {number}
  */
 export function getDecimalDigits(currency: string) {
   const divisionDigits = currencies[currency.toUpperCase()].decimal_digits

yarn.lock

@@ -2574,6 +2574,27 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "^2.4.0"
 
+"@radix-ui/react-popover@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-0.1.4.tgz#f7302ae75f94007edc6294815bc031ec46fa5b4e"
+  integrity sha512-5oaBFkGCGfomXO5HTrhORixDoeAjl3XeSLbVSC9G1Yq//lfaTC5sJYSKSf4mnQulzM9XYchtyjHoBa0O1OBM5Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-dismissable-layer" "0.1.3"
+    "@radix-ui/react-focus-guards" "0.1.0"
+    "@radix-ui/react-focus-scope" "0.1.3"
+    "@radix-ui/react-id" "0.1.4"
+    "@radix-ui/react-popper" "0.1.3"
+    "@radix-ui/react-portal" "0.1.3"
+    "@radix-ui/react-presence" "0.1.1"
+    "@radix-ui/react-primitive" "0.1.3"
+    "@radix-ui/react-use-controllable-state" "0.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "^2.4.0"
+
 "@radix-ui/react-popper@0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-0.1.3.tgz#a93bdd72845566007e5f3868caddd62318bb781e"