fix(DEV-12823): manage measure units

.changeset/calm-pugs-battle.md

@@ -0,0 +1,6 @@
+---
+'@monite/sdk-react': minor
+'@monite/sdk-drop-in': minor
+---
+
+Line item units management added

examples/with-nextjs-and-clerk-auth/.gitignore

@@ -66,3 +66,6 @@ override.tf.json
 # Ignore CLI configuration files
 .terraformrc
 terraform.rc
+
+# clerk configuration (can include secrets)
+/.clerk/

packages/sdk-react/src/components/products/ProductDetails/ProductCreate/CreateProduct.tsx

@@ -1,4 +1,4 @@
-import { useId, useMemo } from 'react';
+import { useId, useMemo, useState } from 'react';
 import { toast } from 'react-hot-toast';
 
 import { components } from '@/api';
@@ -12,6 +12,7 @@ import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import CloseIcon from '@mui/icons-material/Close';
 import {
+  Breadcrumbs,
   Button,
   DialogActions,
   DialogContent,
@@ -20,6 +21,7 @@ import {
   Typography,
 } from '@mui/material';
 
+import { ManageMeasureUnitsForm } from '../components/ManageMeasureUnitsForm';
 import { ProductForm } from '../components/ProductForm';
 import { IProductFormSubmitValues, ProductFormValues } from '../validation';
 
@@ -44,6 +46,8 @@ const CreateProductBase = (props: ProductDetailsCreateProps) => {
   const dialogContext = useDialog();
   const { formatToMinorUnits } = useCurrencies();
 
+  const [manageMeasureUnits, setManageMeasureUnits] = useState<boolean>(false);
+
   const defaultValues = useMemo(
     () => ({ ...initialValues, ...props.defaultValues }),
     [props.defaultValues]
@@ -93,9 +97,25 @@ const CreateProductBase = (props: ProductDetailsCreateProps) => {
     <>
       <Grid container alignItems="center">
         <Grid item xs={11}>
-          <Typography variant="h3" sx={{ padding: 3 }}>
-            {t(i18n)`Create new product or service`}
-          </Typography>
+          {manageMeasureUnits ? (
+            <Breadcrumbs separator="›" aria-label="breadcrumb">
+              <Typography
+                sx={{ cursor: 'pointer', p: 3, pr: 0 }}
+                onClick={() => setManageMeasureUnits(false)}
+              >
+                {t(i18n)`Create new product or service`}
+              </Typography>
+              {manageMeasureUnits && (
+                <Typography color="text.primary">{t(
+                  i18n
+                )`Manage measure units`}</Typography>
+              )}
+            </Breadcrumbs>
+          ) : (
+            <Typography sx={{ p: 3 }}>
+              {t(i18n)`Create new product or service`}
+            </Typography>
+          )}
         </Grid>
         <Grid item xs={1}>
           {dialogContext?.isDialogContent && (
@@ -111,31 +131,47 @@ const CreateProductBase = (props: ProductDetailsCreateProps) => {
       </Grid>
       <Divider />
       <DialogContent>
-        <ProductForm
-          formId={productFormId}
-          onSubmit={handleSubmit}
-          defaultValues={defaultValues}
-        />
+        {manageMeasureUnits ? (
+          <ManageMeasureUnitsForm />
+        ) : (
+          <ProductForm
+            formId={productFormId}
+            onSubmit={handleSubmit}
+            defaultValues={defaultValues}
+            onManageMeasureUnits={() => setManageMeasureUnits(true)}
+          />
+        )}
       </DialogContent>
       <Divider />
       <DialogActions>
-        {dialogContext && (
+        {manageMeasureUnits ? (
           <Button
-            variant="text"
-            color="primary"
-            onClick={dialogContext.onClose}
+            variant="contained"
+            onClick={() => setManageMeasureUnits(false)}
           >
-            {t(i18n)`Cancel`}
+            {t(i18n)`Done`}
           </Button>
+        ) : (
+          <>
+            {dialogContext && (
+              <Button
+                variant="text"
+                color="primary"
+                onClick={dialogContext.onClose}
+              >
+                {t(i18n)`Cancel`}
+              </Button>
+            )}
+            <Button
+              variant="contained"
+              type="submit"
+              form={productFormId}
+              disabled={isPending}
+            >
+              {t(i18n)`Create`}
+            </Button>
+          </>
         )}
-        <Button
-          variant="contained"
-          type="submit"
-          form={productFormId}
-          disabled={isPending}
-        >
-          {t(i18n)`Create`}
-        </Button>
       </DialogActions>
     </>
   );

packages/sdk-react/src/components/products/ProductDetails/ProductEditForm/ProductEditForm.tsx

@@ -16,6 +16,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
 import {
   Box,
+  Breadcrumbs,
   Button,
   DialogActions,
   DialogContent,
@@ -26,6 +27,7 @@ import {
 } from '@mui/material';
 
 import { ProductCancelEditModal } from '../../ProductCancelEditModal';
+import { ManageMeasureUnitsForm } from '../components/ManageMeasureUnitsForm';
 import { ProductForm } from '../components/ProductForm';
 import { IProductFormSubmitValues } from '../validation';
 
@@ -55,6 +57,8 @@ const ProductEditFormBase = (props: IProductEditFormProps) => {
 
   const [cancelEditModalOpened, setCancelEditModalOpened] =
     useState<boolean>(false);
+  const [manageMeasureUnits, setManageMeasureUnits] = useState<boolean>(false);
+
   const [isFormDirty, setIsFormDirty] = useState<boolean>(false);
 
   const {
@@ -178,9 +182,25 @@ const ProductEditFormBase = (props: IProductEditFormProps) => {
     <>
       <Grid container alignItems="center">
         <Grid item xs={11}>
-          <Typography variant="h3" sx={{ padding: 3 }}>
-            {t(i18n)`Edit ${product?.type}`}
-          </Typography>
+          {manageMeasureUnits ? (
+            <Breadcrumbs separator="›" aria-label="breadcrumb">
+              <Typography
+                sx={{ padding: 3, cursor: 'pointer', pr: 0 }}
+                onClick={() => setManageMeasureUnits(false)}
+              >
+                {t(i18n)`Edit ${product?.type}`}
+              </Typography>
+              {manageMeasureUnits && (
+                <Typography color="text.primary">{t(
+                  i18n
+                )`Manage measure units`}</Typography>
+              )}
+            </Breadcrumbs>
+          ) : (
+            <Typography sx={{ padding: 3 }}>
+              {t(i18n)`Edit ${product?.type}`}
+            </Typography>
+          )}
         </Grid>
         <Grid item xs={1}>
           {dialogContext?.isDialogContent && (
@@ -201,32 +221,52 @@ const ProductEditFormBase = (props: IProductEditFormProps) => {
           onClose={() => setCancelEditModalOpened(false)}
           onBack={props.onCanceled}
         />
-        <ProductForm
-          formId={productFormId}
-          onSubmit={handleSubmit}
-          defaultValues={defaultValues}
-          onChanged={setIsFormDirty}
-        />
+        {manageMeasureUnits ? (
+          <ManageMeasureUnitsForm />
+        ) : (
+          <ProductForm
+            formId={productFormId}
+            onSubmit={handleSubmit}
+            defaultValues={defaultValues}
+            onChanged={setIsFormDirty}
+            onManageMeasureUnits={() => setManageMeasureUnits(true)}
+          />
+        )}
       </DialogContent>
       <Divider />
       <DialogActions>
-        <Button
-          variant="text"
-          color="primary"
-          onClick={() =>
-            isFormDirty ? setCancelEditModalOpened(true) : props.onCanceled()
-          }
-        >
-          {t(i18n)`Cancel`}
-        </Button>
-        <Button
-          variant="contained"
-          type="submit"
-          form={productFormId}
-          disabled={productUpdateMutation.isPending || isMeasureUnitsLoading}
-        >
-          {t(i18n)`Update`}
-        </Button>
+        {manageMeasureUnits ? (
+          <Button
+            variant="contained"
+            onClick={() => setManageMeasureUnits(false)}
+          >
+            {t(i18n)`Done`}
+          </Button>
+        ) : (
+          <>
+            <Button
+              variant="text"
+              color="primary"
+              onClick={() =>
+                isFormDirty
+                  ? setCancelEditModalOpened(true)
+                  : props.onCanceled()
+              }
+            >
+              {t(i18n)`Cancel`}
+            </Button>
+            <Button
+              variant="contained"
+              type="submit"
+              form={productFormId}
+              disabled={
+                productUpdateMutation.isPending || isMeasureUnitsLoading
+              }
+            >
+              {t(i18n)`Update`}
+            </Button>
+          </>
+        )}
       </DialogActions>
     </>
   );