@sgftech/medusa-plugin-product-variant-licenses 0.0.1

package/.cache/admin/src/domain/settings/currencies/components/default-store-currency/default-currency-selector.tsx

@@ -0,0 +1,104 @@
+import { Store } from "@medusajs/medusa"
+import { useAdminUpdateStore } from "medusa-react"
+import { useEffect, useMemo } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { NextSelect } from "../../../../../components/molecules/select/next-select"
+import useNotification from "../../../../../hooks/use-notification"
+import { Option } from "../../../../../types/shared"
+import { getErrorMessage } from "../../../../../utils/error-messages"
+
+type Props = {
+  store: Store
+}
+
+type DefaultStoreCurrencyFormType = {
+  default_currency_code: Option & { prefix: string }
+}
+
+const DefaultCurrencySelector = ({ store }: Props) => {
+  const { reset, control, handleSubmit } =
+    useForm<DefaultStoreCurrencyFormType>({
+      defaultValues: getDefaultValue(store),
+    })
+
+  const { t } = useTranslation()
+  const { mutate } = useAdminUpdateStore()
+  const notification = useNotification()
+
+  useEffect(() => {
+    reset(getDefaultValue(store))
+  }, [store])
+
+  const onSubmit = handleSubmit((data) => {
+    mutate(
+      {
+        default_currency_code: data.default_currency_code.value,
+      },
+      {
+        onSuccess: () => {
+          notification(
+            t("default-store-currency-success", "Success"),
+            t(
+              "default-store-currency-successfully-updated-default-currency",
+              "Successfully updated default currency"
+            ),
+            "success"
+          )
+        },
+        onError: (error) => {
+          notification(
+            t("default-store-currency-error", "Error"),
+            getErrorMessage(error),
+            "error"
+          )
+        },
+      }
+    )
+  })
+
+  const currencyOptions = useMemo(() => {
+    return store.currencies.map((currency) => {
+      return {
+        value: currency.code,
+        label: currency.name,
+        prefix: currency.code.toUpperCase(),
+      }
+    })
+  }, [store])
+
+  return (
+    <div>
+      <Controller
+        control={control}
+        name="default_currency_code"
+        render={({ field: { value, onChange, onBlur } }) => {
+          return (
+            <NextSelect
+              placeholder="Choose default currency"
+              options={currencyOptions}
+              value={value}
+              onChange={(e) => {
+                onChange(e)
+                onSubmit()
+              }}
+              onBlur={onBlur}
+            />
+          )
+        }}
+      />
+    </div>
+  )
+}
+
+const getDefaultValue = (store: Store): DefaultStoreCurrencyFormType => {
+  return {
+    default_currency_code: {
+      value: store.default_currency_code,
+      label: store.default_currency.name,
+      prefix: store.default_currency.code.toUpperCase(),
+    },
+  }
+}
+
+export default DefaultCurrencySelector

package/.cache/admin/src/domain/settings/currencies/components/default-store-currency/index.tsx

@@ -0,0 +1,33 @@
+import { Store } from "@medusajs/medusa"
+import { useTranslation } from "react-i18next"
+import DefaultCurrencySelector from "./default-currency-selector"
+
+type Props = {
+  store: Store
+}
+
+const DefaultStoreCurrency = ({ store }: Props) => {
+  const { t } = useTranslation()
+  return (
+    <div className="gap-y-large flex flex-col">
+      <div>
+        <h3 className="inter-large-semibold mb-2xsmall">
+          {t(
+            "default-store-currency-default-store-currency",
+            "Default store currency"
+          )}
+        </h3>
+        <p className="inter-base-regular text-grey-50">
+          {t(
+            "default-store-currency-this-is-the-currency-your-prices-are-shown-in",
+            "This is the currency your prices are shown in."
+          )}
+        </p>
+      </div>
+
+      <DefaultCurrencySelector store={store} />
+    </div>
+  )
+}
+
+export default DefaultStoreCurrency

package/.cache/admin/src/domain/settings/currencies/components/store-currencies/add-currencies-screen.tsx

@@ -0,0 +1,160 @@
+import { Currency } from "@medusajs/medusa"
+import { useAdminCurrencies, useAdminUpdateStore } from "medusa-react"
+import React, { useContext, useState } from "react"
+import { usePagination, useRowSelect, useSortBy, useTable } from "react-table"
+import { useTranslation } from "react-i18next"
+import Button from "../../../../../components/fundamentals/button"
+import Modal from "../../../../../components/molecules/modal"
+import { LayeredModalContext } from "../../../../../components/molecules/modal/layered-modal"
+import useNotification from "../../../../../hooks/use-notification"
+import { getErrorMessage } from "../../../../../utils/error-messages"
+import { useEditCurrenciesModal } from "./edit-currencies-modal"
+import CurrenciesTable from "./table"
+import { useCurrencyColumns } from "./use-currency-table-columns"
+
+const LIMIT = 15
+
+const AddCurrenciesScreen = () => {
+  const [offset, setOffset] = useState(0)
+  const [selectedRowIds, setSelectedRowIds] = useState<string[]>([])
+
+  const { t } = useTranslation()
+  const { onClose, store } = useEditCurrenciesModal()
+  const { reset, pop } = useContext(LayeredModalContext)
+
+  const { currencies, count, isLoading } = useAdminCurrencies(
+    {
+      limit: LIMIT,
+      offset,
+    },
+    {
+      keepPreviousData: true,
+    }
+  )
+
+  const { mutate, isLoading: isMutating } = useAdminUpdateStore()
+  const notification = useNotification()
+
+  const onSubmit = (next: () => void) => {
+    mutate(
+      {
+        currencies: [
+          ...store.currencies.map((curr) => curr.code),
+          ...selectedRowIds,
+        ],
+      },
+      {
+        onSuccess: () => {
+          notification(
+            t("store-currencies-success", "Success"),
+            t(
+              "store-currencies-successfully-updated-currencies",
+              "Successfully updated currencies"
+            ),
+            "success"
+          )
+          next()
+        },
+        onError: (err) => {
+          notification(
+            t("store-currencies-error", "Error"),
+            getErrorMessage(err),
+            "error"
+          )
+        },
+      }
+    )
+  }
+
+  const data = React.useMemo(() => {
+    return currencies || []
+  }, [currencies])
+
+  const columns = useCurrencyColumns()
+
+  const tableState = useTable<Currency>(
+    {
+      data: data,
+      columns,
+      manualPagination: true,
+      initialState: {
+        pageIndex: Math.floor(offset / LIMIT),
+        pageSize: LIMIT,
+      },
+      autoResetPage: false,
+      autoResetSelectedRows: false,
+      getRowId: (row) => row.code,
+      pageCount: Math.ceil((count || 0) / LIMIT),
+      defaultColumn: {
+        width: "auto",
+      },
+    },
+    useSortBy,
+    usePagination,
+    useRowSelect
+  )
+
+  return (
+    <>
+      <Modal.Content>
+        <CurrenciesTable
+          isLoading={isLoading}
+          setQuery={() => {}}
+          setSelectedRowIds={setSelectedRowIds}
+          count={count || 0}
+          tableState={tableState}
+          setOffset={setOffset}
+          offset={offset}
+        />
+      </Modal.Content>
+      <Modal.Footer>
+        <div className="gap-x-xsmall flex w-full items-center justify-end">
+          <Button variant="secondary" size="small" onClick={pop}>
+            {t("store-currencies-cancel", "Cancel")}
+          </Button>
+          <Button
+            variant="primary"
+            size="small"
+            onClick={() =>
+              onSubmit(() => {
+                pop()
+              })
+            }
+          >
+            {t("store-currencies-save-and-go-back", "Save and go back")}
+          </Button>
+          <Button
+            variant="primary"
+            size="small"
+            loading={isMutating}
+            disabled={isMutating}
+            onClick={() =>
+              onSubmit(() => {
+                reset()
+                onClose()
+              })
+            }
+          >
+            {t("store-currencies-save-and-close", "Save and close")}
+          </Button>
+        </div>
+      </Modal.Footer>
+    </>
+  )
+}
+
+export const useAddCurrenciesModalScreen = () => {
+  const { pop, push } = useContext(LayeredModalContext)
+  const { t } = useTranslation()
+
+  return {
+    screen: {
+      title: t("store-currencies-add-store-currencies", "Add Store Currencies"),
+      onBack: pop,
+      view: <AddCurrenciesScreen />,
+    },
+    push,
+  }
+}
+
+export default AddCurrenciesScreen

package/.cache/admin/src/domain/settings/currencies/components/store-currencies/current-currencies-screen.tsx

@@ -0,0 +1,197 @@
+import { Currency } from "@medusajs/medusa"
+import clsx from "clsx"
+import { useAdminUpdateStore } from "medusa-react"
+import { useMemo, useState } from "react"
+import { usePagination, useRowSelect, useSortBy, useTable } from "react-table"
+import { useTranslation } from "react-i18next"
+import Button from "../../../../../components/fundamentals/button"
+import PlusIcon from "../../../../../components/fundamentals/icons/plus-icon"
+import Modal from "../../../../../components/molecules/modal"
+import useNotification from "../../../../../hooks/use-notification"
+import { getErrorMessage } from "../../../../../utils/error-messages"
+import { useAddCurrenciesModalScreen } from "./add-currencies-screen"
+import { useEditCurrenciesModal } from "./edit-currencies-modal"
+import CurrenciesTable from "./table"
+import { useCurrencyColumns } from "./use-currency-table-columns"
+
+const LIMIT = 15
+
+const CurrentCurrenciesScreen = () => {
+  const [offset, setOffset] = useState(0)
+  const [selectedRowIds, setSelectedRowIds] = useState<string[]>([])
+  const { onClose, store } = useEditCurrenciesModal()
+  const { t } = useTranslation()
+
+  const { mutate } = useAdminUpdateStore()
+  const notification = useNotification()
+
+  const onSubmit = (currencies: string[]) => {
+    mutate(
+      {
+        currencies,
+      },
+      {
+        onSuccess: () => {
+          notification(
+            t("store-currencies-success", "Success"),
+            t(
+              "store-currencies-successfully-updated-currencies",
+              "Successfully updated currencies"
+            ),
+            "success"
+          )
+        },
+        onError: (err) => {
+          notification(
+            t("store-currencies-error", "Error"),
+            getErrorMessage(err),
+            "error"
+          )
+        },
+      }
+    )
+  }
+
+  const columns = useCurrencyColumns()
+
+  const filteredCurrencies = useMemo(() => {
+    return store.currencies.slice(offset, offset + LIMIT)
+  }, [store, offset])
+
+  const tableState = useTable<Currency>(
+    {
+      data: filteredCurrencies || [],
+      columns,
+      manualPagination: true,
+      initialState: {
+        pageIndex: Math.floor(offset / LIMIT),
+        pageSize: LIMIT,
+      },
+      autoResetPage: false,
+      autoResetSelectedRows: false,
+      getRowId: (row) => row.code,
+      pageCount: Math.ceil((store.currencies.length || 0) / LIMIT),
+    },
+    useSortBy,
+    usePagination,
+    useRowSelect
+  )
+
+  const onDeselect = () => {
+    setSelectedRowIds([])
+    tableState.toggleAllRowsSelected(false)
+  }
+
+  const onRemove = () => {
+    const currencies = store.currencies
+      .filter((sc) => !selectedRowIds.includes(sc.code))
+      .map((c) => c.code)
+    onSubmit(currencies)
+    onDeselect()
+  }
+
+  return (
+    <>
+      <Modal.Header handleClose={onClose}>
+        <h1 className="inter-xlarge-semibold">
+          {t(
+            "store-currencies-current-store-currencies",
+            "Current Store Currencies"
+          )}
+        </h1>
+      </Modal.Header>
+      <Modal.Content>
+        <CurrenciesTable
+          isLoading={false}
+          setQuery={() => {}}
+          setSelectedRowIds={setSelectedRowIds}
+          count={store.currencies?.length || 0}
+          tableState={tableState}
+          setOffset={setOffset}
+          offset={offset}
+          tableAction={
+            <TableActions
+              numberOfSelectedRows={selectedRowIds.length}
+              onDeselect={onDeselect}
+              onRemove={onRemove}
+            />
+          }
+        />
+      </Modal.Content>
+      <Modal.Footer>
+        <div className="flex w-full items-center justify-end">
+          <Button variant="primary" size="small" onClick={onClose}>
+            {t("store-currencies-close", "Close")}
+          </Button>
+        </div>
+      </Modal.Footer>
+    </>
+  )
+}
+
+type TableActionProps = {
+  numberOfSelectedRows: number
+  onRemove: () => void
+  onDeselect: () => void
+}
+
+const TableActions = ({
+  numberOfSelectedRows,
+  onDeselect,
+  onRemove,
+}: TableActionProps) => {
+  const showAdd = !!numberOfSelectedRows
+
+  const { t } = useTranslation()
+  const { screen, push } = useAddCurrenciesModalScreen()
+
+  const classes = {
+    "translate-y-[-42px]": !showAdd,
+    "translate-y-[0px]": showAdd,
+  }
+
+  return (
+    <div className="space-x-xsmall flex h-[34px] overflow-hidden">
+      <div className={clsx("transition-all duration-200", classes)}>
+        <div className="mb-2 flex h-[34px] items-center divide-x">
+          <span className="inter-small-regular text-grey-50 mr-3">
+            {t("current-currencies-screen-selected-with-count", "{{count}}", {
+              count: numberOfSelectedRows,
+            })}
+          </span>
+          <div className="space-x-xsmall flex pl-3">
+            <Button
+              onClick={onDeselect}
+              size="small"
+              variant="ghost"
+              className="border-grey-20 border"
+            >
+              {t("store-currencies-deselect", "Deselect")}
+            </Button>
+            <Button
+              onClick={onRemove}
+              size="small"
+              variant="ghost"
+              className="border-grey-20 border text-rose-50"
+            >
+              {t("store-currencies-remove", "Remove")}
+            </Button>
+          </div>
+        </div>
+        <div className="flex h-[34px] justify-end">
+          <Button
+            size="small"
+            variant="ghost"
+            className="border-grey-20 border"
+            onClick={() => push(screen)}
+          >
+            <PlusIcon size={20} />{" "}
+            {t("store-currencies-add-currencies", "Add Currencies")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CurrentCurrenciesScreen

package/.cache/admin/src/domain/settings/currencies/components/store-currencies/edit-currencies-modal.tsx

@@ -0,0 +1,46 @@
+import { Store } from "@medusajs/medusa"
+import { createContext, useContext } from "react"
+import LayeredModal, {
+  LayeredModalContext,
+} from "../../../../../components/molecules/modal/layered-modal"
+import CurrentCurrenciesScreen from "./current-currencies-screen"
+
+type Props = {
+  store: Store
+  open: boolean
+  onClose: () => void
+}
+
+type EditCurrenciesModalContextType = {
+  onClose: () => void
+  store: Store
+}
+
+const EditCurrenciesModalContext =
+  createContext<EditCurrenciesModalContextType | null>(null)
+
+const EditCurrenciesModal = ({ store, open, onClose }: Props) => {
+  const context = useContext(LayeredModalContext)
+
+  return (
+    <EditCurrenciesModalContext.Provider value={{ onClose, store }}>
+      <LayeredModal context={context} open={open} handleClose={onClose}>
+        <CurrentCurrenciesScreen />
+      </LayeredModal>
+    </EditCurrenciesModalContext.Provider>
+  )
+}
+
+export const useEditCurrenciesModal = () => {
+  const context = useContext(EditCurrenciesModalContext)
+
+  if (!context) {
+    throw new Error(
+      "useEditCurrenciesModal must be used within EditCurrenciesModal"
+    )
+  }
+
+  return context
+}
+
+export default EditCurrenciesModal

package/.cache/admin/src/domain/settings/currencies/components/store-currencies/index.tsx

@@ -0,0 +1,38 @@
+import { Store } from "@medusajs/medusa"
+import { useTranslation } from "react-i18next"
+import Button from "../../../../../components/fundamentals/button"
+import useToggleState from "../../../../../hooks/use-toggle-state"
+import EditCurrenciesModal from "./edit-currencies-modal"
+
+type Props = {
+  store: Store
+}
+
+const StoreCurrencies = ({ store }: Props) => {
+  const { t } = useTranslation()
+  const { state, close, toggle } = useToggleState()
+
+  return (
+    <>
+      <div className="flex items-start justify-between">
+        <div>
+          <h3 className="inter-large-semibold mb-2xsmall">
+            {t("store-currencies-store-currencies", "Store currencies")}
+          </h3>
+          <p className="inter-base-regular text-grey-50">
+            {t(
+              "store-currencies-all-the-currencies-available-in-your-store",
+              "All the currencies available in your store."
+            )}
+          </p>
+        </div>
+        <Button variant="secondary" size="small" onClick={toggle}>
+          {t("store-currencies-edit-currencies", "Edit currencies")}
+        </Button>
+      </div>
+      <EditCurrenciesModal store={store} open={state} onClose={close} />
+    </>
+  )
+}
+
+export default StoreCurrencies

package/.cache/admin/src/domain/settings/currencies/components/store-currencies/table.tsx

@@ -0,0 +1,123 @@
+import { Currency } from "@medusajs/medusa"
+import React, { useEffect } from "react"
+import { TableInstance } from "react-table"
+import Table from "../../../../../components/molecules/table"
+import TableContainer from "../../../../../components/organisms/table-container"
+
+type Props = {
+  isLoading?: boolean
+  count: number
+  offset: number
+  setOffset: (offset: number) => void
+  setQuery: (query: string) => void
+  setSelectedRowIds: (selectedRowIds: string[]) => void
+  tableAction?: React.ReactNode
+  tableState: TableInstance<Currency>
+}
+
+const CurrenciesTable = ({
+  isLoading,
+  offset,
+  setOffset,
+  setSelectedRowIds,
+  tableState,
+  tableAction,
+  count,
+}: Props) => {
+  const {
+    rows,
+    headerGroups,
+    getTableProps,
+    getTableBodyProps,
+    canNextPage,
+    canPreviousPage,
+    previousPage,
+    nextPage,
+    prepareRow,
+    state: { pageSize, pageIndex, selectedRowIds },
+    pageCount,
+  } = tableState
+
+  const handleNext = () => {
+    if (canNextPage) {
+      setOffset(offset + pageSize)
+      nextPage()
+    }
+  }
+
+  const handlePrev = () => {
+    if (canPreviousPage) {
+      setOffset(offset - pageSize)
+      previousPage()
+    }
+  }
+
+  useEffect(() => {
+    if (setSelectedRowIds) {
+      setSelectedRowIds(Object.keys(selectedRowIds))
+    }
+  }, [selectedRowIds])
+
+  return (
+    <TableContainer
+      isLoading={isLoading}
+      hasPagination
+      numberOfRows={pageSize}
+      pagingState={{
+        count: count,
+        offset: offset,
+        pageSize: offset + rows.length,
+        title: "Currencies",
+        currentPage: pageIndex + 1,
+        pageCount: pageCount,
+        nextPage: handleNext,
+        prevPage: handlePrev,
+        hasNext: canNextPage,
+        hasPrev: canPreviousPage,
+      }}
+    >
+      <Table
+        {...getTableProps()}
+        className={"table-fixed"}
+        tableActions={tableAction}
+      >
+        <Table.Head>
+          {headerGroups?.map((headerGroup) => (
+            <Table.HeadRow {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((col) => (
+                <Table.HeadCell
+                  {...col.getHeaderProps(col.getSortByToggleProps())}
+                  className={hasClassName(col) ? col.className : undefined}
+                >
+                  {col.render("Header")}
+                </Table.HeadCell>
+              ))}
+            </Table.HeadRow>
+          ))}
+        </Table.Head>
+        <Table.Body {...getTableBodyProps()}>
+          {rows.map((row) => {
+            prepareRow(row)
+            return (
+              <Table.Row {...row.getRowProps()}>
+                {row.cells.map((cell) => {
+                  return (
+                    <Table.Cell {...cell.getCellProps()}>
+                      {cell.render("Cell")}
+                    </Table.Cell>
+                  )
+                })}
+              </Table.Row>
+            )
+          })}
+        </Table.Body>
+      </Table>
+    </TableContainer>
+  )
+}
+
+const hasClassName = (col: unknown): col is { className: string } => {
+  return (col as { className: string }).className !== undefined
+}
+
+export default CurrenciesTable