From 50e881ac6d75d99d7fe8b213297c9e6ee91d9bf2 Mon Sep 17 00:00:00 2001
From: Andrea <return.santana@gmail.com>
Date: Fri, 21 Feb 2025 02:18:32 +0100
Subject: [PATCH] new ItemSelector based on CounterpartSelector

---
 .../CreateReceivable/CreateReceivables.tsx    |  14 +-
 .../sections/ItemSelector.tsx                 | 345 ++++++++++++++++++
 .../sections/ItemsSection.tsx                 | 205 +++++++++--
 3 files changed, 528 insertions(+), 36 deletions(-)
 create mode 100644 packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/sections/ItemSelector.tsx

diff --git a/packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/CreateReceivables.tsx b/packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/CreateReceivables.tsx
index 4229ae6b7..cc808ea6c 100644
--- a/packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/CreateReceivables.tsx
+++ b/packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/CreateReceivables.tsx
@@ -342,19 +342,7 @@ const CreateReceivablesBase = ({
           background: 'linear-gradient(180deg, #F6F6F6 0%, #E4E4FF 100%)',
           height: '100vh',
         }}
-      >
-        <InvoicePreview
-          watch={watch}
-          counterpart={counterpart}
-          currency={actualCurrency}
-          isNonVatSupported={isNonVatSupported}
-          entityData={entityData}
-          address={counterpartBillingAddress}
-          paymentTerms={paymentTerms}
-          entityVatIds={entityVatIds}
-          counterpartVats={counterpartVats}
-        />
-      </Box>
+      ></Box>
       <CreateInvoiceReminderDialog
         open={createReminderDialog.open}
         reminderType={createReminderDialog.reminderType}
diff --git a/packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/sections/ItemSelector.tsx b/packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/sections/ItemSelector.tsx
new file mode 100644
index 000000000..34e983680
--- /dev/null
+++ b/packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/sections/ItemSelector.tsx
@@ -0,0 +1,345 @@
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+import { components } from '@/api';
+import {
+  CreateReceivablesProductsFormProps,
+  getCreateInvoiceProductsValidationSchema,
+} from '@/components/receivables/InvoiceDetails/CreateReceivable/validation';
+import { useMoniteContext } from '@/core/context/MoniteContext';
+import { useRootElements } from '@/core/context/RootElementsProvider';
+import { useCurrencies } from '@/core/hooks';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { t } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { KeyboardArrowDown } from '@mui/icons-material';
+import AddIcon from '@mui/icons-material/Add';
+import ClearIcon from '@mui/icons-material/Clear';
+import {
+  Autocomplete,
+  Button,
+  CircularProgress,
+  Divider,
+  IconButton,
+  InputAdornment,
+  TextField,
+  Typography,
+  createFilterOptions,
+} from '@mui/material';
+
+interface CounterpartsAutocompleteOptionProps {
+  id: string;
+  label: string;
+  price?: {
+    currency: components['schemas']['CurrencyEnum'];
+    value: number;
+  };
+  smallestAmount?: number;
+  measureUnit?: any;
+  currency?: any;
+}
+
+type CounterpartSelectorProps = {
+  disabled?: boolean;
+  counterpartAddresses: any;
+} & (
+  | {
+      isSimplified: true;
+      setIsCreateCounterpartOpened?: never;
+      setIsEditCounterpartOpened?: never;
+    }
+  | {
+      isSimplified?: false;
+      setIsCreateCounterpartOpened: Dispatch<SetStateAction<boolean>>;
+      setIsEditCounterpartOpened: Dispatch<SetStateAction<boolean>>;
+    }
+);
+
+//const filter = createFilterOptions<CounterpartsAutocompleteOptionProps>();
+
+const CREATE_NEW_ID = '__create-new__';
+const DIVIDER = '__divider__';
+
+function isCreateNewItemOption(itemOption: any): boolean {
+  return itemOption?.id === CREATE_NEW_ID;
+}
+
+function isDividerOption(
+  itemOption: CounterpartsAutocompleteOptionProps | undefined | null
+): boolean {
+  return itemOption?.id === DIVIDER;
+}
+
+export const ItemSelector = ({
+  setIsCreateItemOpened,
+  //setIsEditCounterpartOpened,
+  isSimplified = false,
+  disabled,
+  index = 0,
+  actualCurrency = 'EUR',
+  defaultCurrency = 'EUR',
+}: any) => {
+  const { i18n } = useLingui();
+
+  const { root } = useRootElements();
+  const { control, watch } = useForm<CreateReceivablesProductsFormProps>({
+    resolver: yupResolver(getCreateInvoiceProductsValidationSchema(i18n)),
+    defaultValues: useMemo(
+      () => ({
+        items: [],
+        currency: actualCurrency ?? defaultCurrency,
+      }),
+      [actualCurrency, defaultCurrency]
+    ),
+  });
+
+  const { api } = useMoniteContext();
+  const { formatCurrencyToDisplay } = useCurrencies();
+  const currency = watch('currency');
+  const {
+    data: productsInfinity,
+    isLoading,
+    fetchNextPage,
+    hasNextPage,
+  } = api.products.getProducts.useInfiniteQuery(
+    {
+      query: {
+        limit: 20,
+        currency,
+        //   type: currentFilter[FILTER_TYPE_TYPE] || undefined,
+        //   name__icontains: currentFilter[FILTER_TYPE_SEARCH] || undefined,
+      },
+    },
+    {
+      initialPageParam: {
+        query: {
+          pagination_token: undefined,
+        },
+      },
+      getNextPageParam: (lastPage) => {
+        if (!lastPage.next_pagination_token) return;
+        return {
+          query: {
+            pagination_token: lastPage.next_pagination_token,
+          },
+        };
+      },
+      enabled: !!currency,
+    }
+  );
+
+  const flattenProducts = useMemo(
+    () =>
+      productsInfinity
+        ? productsInfinity.pages.flatMap((page) => page.data)
+        : [],
+    [productsInfinity]
+  );
+
+  const { data: measureUnits } = api.measureUnits.getMeasureUnits.useQuery();
+
+  const itemsAutocompleteData = useMemo<
+    CounterpartsAutocompleteOptionProps[]
+  >(() => {
+    if (!flattenProducts || flattenProducts.length === 0) {
+      return [];
+    }
+
+    return flattenProducts.map((item) => {
+      const unit = measureUnits
+        ? measureUnits.data.find((u) => u.id === item.measure_unit_id)
+        : undefined;
+
+      return {
+        id: item.id,
+        label: item.name,
+        price: item.price,
+        smallestAmount: item.smallest_amount,
+        measureUnit: unit,
+      };
+    });
+  }, [flattenProducts, measureUnits]);
+
+  const handleCreateNewItem = useCallback(() => {
+    if (!isSimplified && setIsCreateItemOpened) {
+      setIsCreateItemOpened(true);
+    }
+  }, [isSimplified, setIsCreateItemOpened]);
+
+  const [isFocused, setIsFocused] = useState(false);
+
+  return !flattenProducts || flattenProducts.length === 0 ? null : (
+    <Controller
+      name={`items.${index}`}
+      control={control}
+      render={({ field, fieldState: { error } }) => {
+        const selectedItem = flattenProducts?.find(
+          (item) => item.id === field.value
+        );
+
+        /**
+         * We have to set `selectedCounterpartOption` to `null`
+         *  if `selectedCounterpart` is `null` because
+         *  `Autocomplete` component doesn't work with `undefined`
+         */
+        const selectedItemOption = selectedItem
+          ? {
+              id: selectedItem.id,
+              label: selectedItem.name,
+            }
+          : null;
+        return (
+          <>
+            <Autocomplete
+              {...field}
+              value={selectedItemOption}
+              onChange={(_, value) => {
+                if (isCreateNewItemOption(value) || isDividerOption(value)) {
+                  field.onChange(null);
+
+                  return;
+                }
+                field.onChange(value?.id);
+              }}
+              slotProps={{
+                popper: {
+                  container: root,
+                },
+              }}
+              renderInput={(params) => {
+                return (
+                  <TextField
+                    {...params}
+                    label={``}
+                    placeholder={t(i18n)`Line item`}
+                    required
+                    error={Boolean(error)}
+                    helperText={error?.message}
+                    className={`Monite-CounterpartSelector ${
+                      isSimplified ? 'isSimplified' : ''
+                    }`}
+                    InputProps={{
+                      ...params.InputProps,
+                      value: params.inputProps.value,
+                      onFocus: () => setIsFocused(true),
+                      onBlur: () => setIsFocused(false),
+                      startAdornment: isLoading ? (
+                        <CircularProgress size={20} />
+                      ) : (
+                        !isSimplified && (
+                          <>
+                            {!isFocused && (
+                              <InputAdornment
+                                position="end"
+                                sx={{
+                                  flexDirection: 'column',
+                                  alignItems: 'baseline',
+                                  height: 'auto',
+                                }}
+                              >
+                                <Typography
+                                  variant="body2"
+                                  sx={{ color: 'rgba(41, 41, 41, 1)' }}
+                                  fontWeight="bold"
+                                >
+                                  {params.inputProps.value}
+                                </Typography>
+                              </InputAdornment>
+                            )}
+                          </>
+                        )
+                      ),
+                      endAdornment: (() => {
+                        if (
+                          isSimplified &&
+                          !params.inputProps['aria-expanded']
+                        ) {
+                          return <KeyboardArrowDown fontSize="small" />;
+                        }
+                        if (
+                          selectedItemOption &&
+                          params.inputProps['aria-expanded']
+                        ) {
+                          return (
+                            <IconButton onClick={() => field.onChange(null)}>
+                              <ClearIcon
+                                sx={{ width: '1rem', height: '1rem' }}
+                              />
+                            </IconButton>
+                          );
+                        }
+                        return null;
+                      })(),
+                    }}
+                  />
+                );
+              }}
+              loading={isLoading || disabled}
+              options={itemsAutocompleteData}
+              getOptionLabel={(itemOption) =>
+                isCreateNewItemOption(itemOption) || isDividerOption(itemOption)
+                  ? ''
+                  : itemOption.label
+              }
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value.id;
+              }}
+              selectOnFocus
+              clearOnBlur
+              handleHomeEndKeys
+              renderOption={(
+                props,
+                itemOption: CounterpartsAutocompleteOptionProps
+              ) =>
+                isCreateNewItemOption(itemOption) ? (
+                  <Button
+                    key={itemOption.id}
+                    variant="text"
+                    startIcon={<AddIcon />}
+                    fullWidth
+                    sx={{
+                      justifyContent: 'flex-start',
+                      px: 2,
+                    }}
+                    onClick={handleCreateNewItem}
+                  >
+                    {itemOption.label}
+                  </Button>
+                ) : itemOption.id === DIVIDER ? (
+                  <Divider
+                    key={itemOption.id}
+                    sx={{ padding: '.5rem', marginBottom: '1rem' }}
+                  />
+                ) : (
+                  <li
+                    {...props}
+                    style={{ display: 'flex' }}
+                    key={itemOption.id}
+                  >
+                    {itemOption.label}
+                    <span style={{ marginLeft: 'auto' }}>
+                      {itemOption.smallestAmount}{' '}
+                      {itemOption.measureUnit.description} /{' '}
+                      {itemOption.price &&
+                        formatCurrencyToDisplay(
+                          itemOption.price.value,
+                          itemOption.price.currency
+                        )}
+                    </span>
+                  </li>
+                )
+              }
+            />
+          </>
+        );
+      }}
+    />
+  );
+};
diff --git a/packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/sections/ItemsSection.tsx b/packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/sections/ItemsSection.tsx
index 084afb169..a0040b77e 100644
--- a/packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/sections/ItemsSection.tsx
+++ b/packages/sdk-react/src/components/receivables/InvoiceDetails/CreateReceivable/sections/ItemsSection.tsx
@@ -46,6 +46,8 @@ import {
 } from '@mui/material';
 import { styled } from '@mui/material';
 
+import { ItemSelector } from './ItemSelector';
+
 interface VatRateControllerProps {
   index: number;
   vatRates?: VatRateListResponse;
@@ -226,6 +228,7 @@ export const ItemsSection = ({
     control,
     name: 'line_items',
   });
+  const rows = 2;
   const watchedLineItems = watch('line_items');
   const { api } = useMoniteContext();
   const { data: vatRates } = api.vatRates.getVatRates.useQuery();
@@ -244,6 +247,7 @@ export const ItemsSection = ({
   const handleCloseProductsTable = useCallback(() => {
     setProductsTableOpen(false);
   }, []);
+  console.log({ watchedLineItems });
 
   const {
     subtotalPrice,
@@ -285,6 +289,8 @@ export const ItemsSection = ({
     vatRates?.data[0]
   );
 
+  const { getSymbolFromCurrency } = useCurrencies();
+
   const StyledTableCell = styled(TableCell)`
     max-width: 100px;
   `;
@@ -334,9 +340,11 @@ export const ItemsSection = ({
               </TableRow>
             </TableHead>
             <TableBody>
-              {fields.map((field, index) => (
-                <TableRow className={tableRowClassName} key={field.id}>
-                  <TableCell>{field.name}</TableCell>
+              {Array.from({ length: rows }).map((_, index) => (
+                <TableRow className={tableRowClassName}>
+                  <TableCell sx={{ minWidth: '200px' }}>
+                    <ItemSelector />
+                  </TableCell>
                   <StyledTableCell>
                     <Controller
                       name={`line_items.${index}.quantity`}
@@ -351,45 +359,196 @@ export const ItemsSection = ({
                             fullWidth={false}
                             error={Boolean(error)}
                           />
+                          {`line_items.${index}.measure_unit_id` ? (
+                            <MeasureUnit
+                              unitId={`line_items.${index}.measure_unit_id`}
+                            />
+                          ) : (
+                            'notloaded'
+                          )}
                         </FormControl>
                       )}
                     />
-                    {field.measure_unit_id ? (
-                      <MeasureUnit unitId={field.measure_unit_id} />
-                    ) : (
-                      '—'
-                    )}
                   </StyledTableCell>
                   <TableCell align="right">
-                    {field.price &&
-                      formatCurrencyToDisplay(
-                        field.price.value,
-                        field.price.currency
-                      )}
                     <Controller
                       name={`line_items.${index}.price`}
                       control={control}
+                      render={({
+                        field: controllerField,
+                        fieldState: { error },
+                      }) => {
+                        const formattedValue = formatCurrencyToDisplay(
+                          controllerField.value?.value || 0,
+                          controllerField.value?.currency || 'USD',
+                          false
+                        );
+                        return (
+                          <FormControl
+                            variant="standard"
+                            fullWidth
+                            required
+                            error={Boolean(error)}
+                          >
+                            <TextField
+                              {...controllerField}
+                              id={controllerField.name}
+                              type="text"
+                              size="small"
+                              fullWidth={false}
+                              error={Boolean(error)}
+                              helperText={error?.message}
+                              InputProps={{
+                                startAdornment: getSymbolFromCurrency(
+                                  controllerField.value?.currency || 'USD'
+                                ),
+                                readOnly: true,
+                              }}
+                              sx={{ minWidth: 100 }}
+                              value={formattedValue || ''}
+                              onChange={(e) => {
+                                const newValue = parseFloat(
+                                  e.target.value.replace(/[^0-9.]/g, '')
+                                );
+                                if (!isNaN(newValue)) {
+                                  controllerField.onChange({
+                                    ...controllerField.value,
+                                    value: newValue,
+                                  });
+                                }
+                              }}
+                            />
+                          </FormControl>
+                        );
+                      }}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    {isNonVatSupported ? (
+                      <Controller
+                        name={`line_items.${index}.tax_rate_value`}
+                        control={control}
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            variant="standard"
+                            fullWidth
+                            required
+                            error={Boolean(error)}
+                          >
+                            <TextField
+                              {...field}
+                              id={field.name}
+                              type="number"
+                              inputProps={{ min: 1, max: 100 }}
+                              size="small"
+                              fullWidth={false}
+                              error={Boolean(error)}
+                              helperText={error?.message}
+                              InputProps={{ endAdornment: '%' }}
+                              sx={{ minWidth: 100 }}
+                            />
+                          </FormControl>
+                        )}
+                      />
+                    ) : (
+                      <VatRateController
+                        index={index}
+                        vatRates={vatRates}
+                        highestVatRate={highestVatRate}
+                      />
+                    )}
+                  </TableCell>
+
+                  <TableCell>
+                    <IconButton
+                      onClick={() => {
+                        remove(index);
+                      }}
+                    >
+                      <DeleteIcon />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {fields.map((field, index) => (
+                <TableRow className={tableRowClassName} key={field.id}>
+                  <TableCell>{field.name}</TableCell>
+                  <StyledTableCell>
+                    <Controller
+                      name={`line_items.${index}.quantity`}
+                      control={control}
                       render={({ field, fieldState: { error } }) => (
-                        <FormControl
-                          variant="standard"
-                          fullWidth
-                          required
-                          error={Boolean(error)}
-                        >
+                        <FormControl>
                           <TextField
                             {...field}
-                            id={field.name}
                             type="number"
+                            inputProps={{ min: 1 }}
                             size="small"
                             fullWidth={false}
                             error={Boolean(error)}
-                            helperText={error?.message}
-                            InputProps={{ startAdornment: '$' }}
-                            sx={{ minWidth: 100 }}
                           />
                         </FormControl>
                       )}
                     />
+                    {field.measure_unit_id ? (
+                      <MeasureUnit unitId={field.measure_unit_id} />
+                    ) : (
+                      '—'
+                    )}
+                  </StyledTableCell>
+                  <TableCell align="right">
+                    <Controller
+                      name={`line_items.${index}.price`}
+                      control={control}
+                      defaultValue={field.price}
+                      render={({
+                        field: controllerField,
+                        fieldState: { error },
+                      }) => {
+                        const formattedValue = formatCurrencyToDisplay(
+                          controllerField.value?.value || 0,
+                          controllerField.value?.currency || 'USD',
+                          false
+                        );
+                        return (
+                          <FormControl
+                            variant="standard"
+                            fullWidth
+                            required
+                            error={Boolean(error)}
+                          >
+                            <TextField
+                              {...controllerField}
+                              id={controllerField.name}
+                              type="text"
+                              size="small"
+                              fullWidth={false}
+                              error={Boolean(error)}
+                              helperText={error?.message}
+                              InputProps={{
+                                startAdornment: getSymbolFromCurrency(
+                                  controllerField.value?.currency || 'USD'
+                                ),
+                                readOnly: true,
+                              }}
+                              sx={{ minWidth: 100 }}
+                              value={formattedValue || ''}
+                              onChange={(e) => {
+                                const newValue = parseFloat(
+                                  e.target.value.replace(/[^0-9.]/g, '')
+                                );
+                                if (!isNaN(newValue)) {
+                                  controllerField.onChange({
+                                    ...controllerField.value,
+                                    value: newValue,
+                                  });
+                                }
+                              }}
+                            />
+                          </FormControl>
+                        );
+                      }}
+                    />
                   </TableCell>
                   <TableCell>
                     {isNonVatSupported ? (