@finos/legend-application-marketplace 0.1.50 → 0.1.52

package/src/components/AddToCart/RecommendedAddOnsModal.tsx

@@ -15,6 +15,7 @@
  */
 
 import { observer } from 'mobx-react-lite';
+import { useMemo, useState } from 'react';
 import {
   Dialog,
   DialogTitle,
@@ -22,15 +23,24 @@ import {
   DialogActions,
   Button,
   Typography,
-  Grid,
   Box,
   IconButton,
+  TextField,
+  InputAdornment,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  type SelectChangeEvent,
 } from '@mui/material';
 import {
   CloseIcon,
   CheckCircleIcon,
   ArrowRightIcon,
   WarningIcon,
+  SearchIcon,
+  ArrowUpIcon,
+  ArrowDownIcon,
 } from '@finos/legend-art';
 import {
   TerminalItemType,
@@ -58,8 +68,34 @@ export const RecommendedAddOnsModal = observer(
       onViewCart,
     } = props;
 
+    const [searchTerm, setSearchTerm] = useState('');
+    const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | ''>('');
+
+    const filteredAndSortedItems = useMemo(() => {
+      let items = [...recommendedItems];
+
+      if (searchTerm) {
+        const search = searchTerm.toLowerCase();
+        items = items.filter(
+          (item) =>
+            item.productName.toLowerCase().includes(search) ||
+            item.providerName.toLowerCase().includes(search),
+        );
+      }
+
+      if (sortOrder) {
+        items.sort((a, b) =>
+          sortOrder === 'asc' ? a.price - b.price : b.price - a.price,
+        );
+      }
+
+      return items;
+    }, [recommendedItems, searchTerm, sortOrder]);
+
     const closeModal = () => {
       setShowModal(false);
+      setSearchTerm('');
+      setSortOrder('');
     };
 
     const handleViewCart = () => {
@@ -67,6 +103,12 @@ export const RecommendedAddOnsModal = observer(
       closeModal();
     };
 
+    const handleSortChange = (
+      event: SelectChangeEvent<'asc' | 'desc' | ''>,
+    ) => {
+      setSortOrder(event.target.value);
+    };
+
     if (!showModal) {
       return null;
     }
@@ -119,8 +161,10 @@ export const RecommendedAddOnsModal = observer(
               className="recommended-addons-modal__section-title"
             >
               {terminal?.terminalItemType === TerminalItemType.TERMINAL
-                ? 'Recommended Add-Ons'
-                : 'Recommended Terminals'}
+                ? `Recommended Add-Ons for ${terminal.providerName}`
+                : terminal
+                  ? `Recommended Terminals for ${terminal.providerName}`
+                  : ''}
             </Typography>
             <Typography
               variant="body2"
@@ -141,24 +185,108 @@ export const RecommendedAddOnsModal = observer(
               </Typography>
             </Box>
           ) : (
-            <Grid container={true} spacing={2}>
-              {recommendedItems.map((item) => (
-                <Grid size={{ xs: 12, sm: 6 }} key={item.id}>
-                  {terminal ? (
-                    <RecommendedItemsCard
-                      key={item.id}
-                      vendorProfileId={terminal.id}
-                      recommendedItem={item}
-                    />
-                  ) : (
+            <>
+              <Box className="recommended-addons-modal__filter-controls">
+                <TextField
+                  size="medium"
+                  placeholder="Search any service..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="recommended-addons-modal__search-field"
+                  slotProps={{
+                    input: {
+                      endAdornment: (
+                        <InputAdornment position="end">
+                          <SearchIcon />
+                        </InputAdornment>
+                      ),
+                    },
+                  }}
+                />
+                <FormControl
+                  size="medium"
+                  className="recommended-addons-modal__sort-select"
+                  sx={{ minWidth: 180 }}
+                >
+                  <InputLabel
+                    id="recommended-addons-sort-label"
+                    sx={{ fontSize: '1rem' }}
+                  >
+                    Sort by Price
+                  </InputLabel>
+                  <Select
+                    labelId="recommended-addons-sort-label"
+                    value={sortOrder}
+                    label="Sort by Price"
+                    onChange={handleSortChange}
+                    sx={{ fontSize: '1rem' }}
+                  >
+                    <MenuItem value="" sx={{ fontSize: '1rem' }}>
+                      <em>None</em>
+                    </MenuItem>
+                    <MenuItem value="asc" sx={{ fontSize: '1rem' }}>
+                      <Box display="flex" alignItems="center">
+                        <ArrowUpIcon fontSize="small" />
+                        <Typography sx={{ ml: 0.5, fontSize: '1rem' }}>
+                          Low to High
+                        </Typography>
+                      </Box>
+                    </MenuItem>
+                    <MenuItem value="desc" sx={{ fontSize: '1rem' }}>
+                      <Box display="flex" alignItems="center">
+                        <ArrowDownIcon fontSize="small" />
+                        <Typography sx={{ ml: 0.5, fontSize: '1rem' }}>
+                          High to Low
+                        </Typography>
+                      </Box>
+                    </MenuItem>
+                  </Select>
+                </FormControl>
+              </Box>
+
+              {filteredAndSortedItems.length === 0 ? (
+                <Box className="recommended-addons-modal__empty-state">
+                  <Typography variant="body1">
+                    No items match your search criteria.
+                  </Typography>
+                </Box>
+              ) : (
+                <Box className="recommended-addons-modal__list">
+                  <Box className="recommended-addons-modal__list-header">
+                    <Typography
+                      variant="subtitle2"
+                      className="recommended-addons-modal__header-name"
+                    >
+                      Product Name
+                    </Typography>
+                    <Typography
+                      variant="subtitle2"
+                      className="recommended-addons-modal__header-provider"
+                    >
+                      Provider
+                    </Typography>
+                    <Typography
+                      variant="subtitle2"
+                      className="recommended-addons-modal__header-price"
+                    >
+                      Price
+                    </Typography>
+                    <Typography
+                      variant="subtitle2"
+                      className="recommended-addons-modal__header-action"
+                    >
+                      Action
+                    </Typography>
+                  </Box>
+                  {filteredAndSortedItems.map((item) => (
                     <RecommendedItemsCard
                       key={item.id}
                       recommendedItem={item}
                     />
-                  )}
-                </Grid>
-              ))}
-            </Grid>
+                  ))}
+                </Box>
+              )}
+            </>
           )}
         </DialogContent>
 

package/src/components/AddToCart/RecommendedItemsCard.tsx

@@ -16,16 +16,7 @@
 
 import { clsx, PlusIcon } from '@finos/legend-art';
 import type { TerminalResult } from '@finos/legend-server-marketplace';
-import {
-  Box,
-  Button,
-  Card,
-  CardActions,
-  CardContent,
-  Chip,
-  CircularProgress,
-  Typography,
-} from '@mui/material';
+import { Box, Button, CircularProgress, Typography } from '@mui/material';
 import { flowResult } from 'mobx';
 import { useState } from 'react';
 import { assertErrorThrown } from '@finos/legend-shared';
@@ -33,12 +24,11 @@ import { toastManager } from '../Toast/CartToast.js';
 import { useLegendMarketplaceBaseStore } from '../../application/providers/LegendMarketplaceFrameworkProvider.js';
 
 interface RecommendedItemsCardProps {
-  vendorProfileId?: number;
   recommendedItem: TerminalResult;
 }
 
 export const RecommendedItemsCard = (props: RecommendedItemsCardProps) => {
-  const { vendorProfileId, recommendedItem } = props;
+  const { recommendedItem } = props;
   const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
   const [isAddingToCart, setIsAddingToCart] = useState(false);
   const [inCart, setInCart] = useState(false);
@@ -47,9 +37,6 @@ export const RecommendedItemsCard = (props: RecommendedItemsCardProps) => {
     setIsAddingToCart(true);
     const cartItemRequest =
       legendMarketplaceBaseStore.cartStore.providerToCartRequest(addon);
-    if (vendorProfileId) {
-      cartItemRequest.vendorProfileId = vendorProfileId;
-    }
 
     flowResult(
       legendMarketplaceBaseStore.cartStore.addToCartWithAPI(cartItemRequest),
@@ -70,62 +57,45 @@ export const RecommendedItemsCard = (props: RecommendedItemsCardProps) => {
   };
 
   return (
-    <Card className="recommended-addons-modal__addon-card">
-      <CardContent className="recommended-addons-modal__card-content">
-        <Box className="recommended-addons-modal__card-header">
-          <Typography
-            variant="subtitle1"
-            className="recommended-addons-modal__product-name"
-          >
-            {recommendedItem.productName}
-          </Typography>
-          <Chip
-            label={recommendedItem.providerName}
-            size="small"
-            className="recommended-addons-modal__provider-chip"
-          />
-        </Box>
-
-        <Typography
-          variant="body2"
-          className="recommended-addons-modal__description"
-        >
-          {recommendedItem.description || 'No description available'}
-        </Typography>
-
-        <Box className="recommended-addons-modal__card-footer">
-          <Typography
-            variant="body2"
-            className={clsx('recommended-addons-modal__price', {
-              'recommended-addons-modal__price__free':
-                recommendedItem.price === 0,
+    <Box className="recommended-addons-modal__list-item">
+      <Typography
+        variant="body1"
+        className="recommended-addons-modal__item-name"
+      >
+        {recommendedItem.productName}
+      </Typography>
+      <Typography
+        variant="body2"
+        className="recommended-addons-modal__item-provider"
+      >
+        {recommendedItem.providerName}
+      </Typography>
+      <Typography
+        variant="body2"
+        className="recommended-addons-modal__item-price"
+      >
+        {recommendedItem.price === 0
+          ? 'Free'
+          : recommendedItem.price.toLocaleString('en-US', {
+              style: 'currency',
+              currency: 'USD',
+              maximumFractionDigits: 2,
             })}
-          >
-            {recommendedItem.price === 0
-              ? 'Free'
-              : recommendedItem.price.toLocaleString('en-US', {
-                  style: 'currency',
-                  currency: 'USD',
-                  maximumFractionDigits: 2,
-                })}
-          </Typography>
-        </Box>
-      </CardContent>
-
-      <CardActions className="recommended-addons-modal__card-actions">
+      </Typography>
+      <Box className="recommended-addons-modal__item-action">
         <Button
           variant={inCart ? 'outlined' : 'contained'}
           onClick={() => handleAddAddonToCart(recommendedItem)}
           disabled={inCart || isAddingToCart}
-          fullWidth={true}
+          size="small"
           className={clsx('recommended-addons-modal__add-btn', {
-            'recommended-addons-modal__add-btn__added': inCart,
+            'recommended-addons-modal__add-btn--added': inCart,
           })}
         >
           {isAddingToCart ? (
             <>
               Adding... &nbsp;
-              <CircularProgress size={16} />
+              <CircularProgress size={14} />
             </>
           ) : inCart ? (
             'Added to Cart'
@@ -136,7 +106,7 @@ export const RecommendedItemsCard = (props: RecommendedItemsCardProps) => {
             </>
           )}
         </Button>
-      </CardActions>
-    </Card>
+      </Box>
+    </Box>
   );
 };

package/src/components/ProviderCard/LegendMarketplaceTerminalCard.tsx

@@ -25,6 +25,7 @@ import {
   CardMedia,
   Chip,
   CircularProgress,
+  Typography,
 } from '@mui/material';
 import type { TerminalResult } from '@finos/legend-server-marketplace';
 import { CheckCircleIcon, ShoppingCartIcon } from '@finos/legend-art';
@@ -104,10 +105,25 @@ export const LegendMarketplaceTerminalCard = observer(
             image={getImageUrl()}
             alt="data asset"
           />
+          {terminalResult.category && (
+            <Chip
+              label={terminalResult.category}
+              className="legend-marketplace-terminal-card__category-chip"
+            />
+          )}
           <CardContent className="legend-marketplace-terminal-card__content">
-            <Box className="legend-marketplace-terminal-card__title">
+            <Typography
+              variant="subtitle2"
+              className="legend-marketplace-terminal-card__provider"
+            >
+              {terminalResult.providerName}
+            </Typography>
+            <Typography
+              variant="h6"
+              className="legend-marketplace-terminal-card__title"
+            >
               {terminalResult.productName}
-            </Box>
+            </Typography>
           </CardContent>
         </CardActionArea>
         <CardActions className="legend-marketplace-terminal-card__action-buttons">

package/src/components/orders/CancelOrderDialog.tsx

@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2025-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { flowResult } from 'mobx';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  Typography,
+  Box,
+  CircularProgress,
+} from '@mui/material';
+import { WarningIcon } from '@finos/legend-art';
+import type { TerminalProductOrder } from '@finos/legend-server-marketplace';
+import type { OrdersStore } from '../../stores/orders/OrderStore.js';
+import { getProcessInstanceId } from '../../stores/orders/OrderHelpers.js';
+
+interface CancelOrderDialogProps {
+  open: boolean;
+  onClose: () => void;
+  order: TerminalProductOrder;
+  orderStore: OrdersStore;
+}
+
+export const CancelOrderDialog: React.FC<CancelOrderDialogProps> = observer(
+  ({ open, onClose, order, orderStore }) => {
+    const [cancellationReason, setCancellationReason] = useState('');
+
+    const isLoading = orderStore.cancelOrderState.isInProgress;
+    const trimmedReason = cancellationReason.trim();
+    const isReasonValid = trimmedReason.length > 0;
+
+    const handleClose = (): void => {
+      if (!isLoading) {
+        setCancellationReason('');
+        onClose();
+      }
+    };
+
+    const handleConfirm = async (): Promise<void> => {
+      if (!isReasonValid) {
+        return;
+      }
+
+      const processInstanceId = getProcessInstanceId(order);
+      if (!processInstanceId) {
+        return;
+      }
+
+      const success = await flowResult(
+        orderStore.cancelOrder(
+          order.order_id,
+          processInstanceId,
+          trimmedReason,
+        ),
+      );
+      if (success) {
+        handleClose();
+      }
+    };
+
+    return (
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        maxWidth="sm"
+        fullWidth={true}
+        className="legend-marketplace-cancel-order-dialog"
+      >
+        <DialogTitle>
+          <Box className="legend-marketplace-cancel-order-dialog__title">
+            <WarningIcon className="legend-marketplace-cancel-order-dialog__warning-icon" />
+            <Typography variant="h6">Cancel Order</Typography>
+          </Box>
+        </DialogTitle>
+
+        <DialogContent>
+          <Box className="legend-marketplace-cancel-order-dialog__content">
+            <Typography className="legend-marketplace-cancel-order-dialog__message">
+              Are you sure you want to cancel this order?
+            </Typography>
+
+            <Box className="legend-marketplace-cancel-order-dialog__order-info">
+              <Typography variant="body2">
+                <strong>Order ID:</strong> {order.order_id}
+              </Typography>
+              <Typography variant="body2">
+                <strong>Vendor:</strong> {order.vendor_name}
+              </Typography>
+              <Typography variant="body2">
+                <strong>Order Type:</strong> {order.order_type}
+              </Typography>
+            </Box>
+
+            <TextField
+              autoFocus={true}
+              margin="dense"
+              label="Cancellation Reason"
+              placeholder="Please provide a reason for canceling this order..."
+              fullWidth={true}
+              multiline={true}
+              rows={4}
+              value={cancellationReason}
+              onChange={(e) => setCancellationReason(e.target.value)}
+              disabled={isLoading}
+              required={true}
+              helperText="Required: Please explain why you are canceling this order"
+              error={cancellationReason.length > 0 && !isReasonValid}
+              className="legend-marketplace-cancel-order-dialog__text-field"
+            />
+          </Box>
+        </DialogContent>
+
+        <DialogActions className="legend-marketplace-cancel-order-dialog__actions">
+          <Button
+            onClick={handleClose}
+            disabled={isLoading}
+            variant="text"
+            color="inherit"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              // eslint-disable-next-line no-void
+              void handleConfirm();
+            }}
+            disabled={isLoading || !isReasonValid}
+            variant="contained"
+            color="error"
+            startIcon={isLoading ? <CircularProgress size={16} /> : undefined}
+          >
+            {isLoading ? 'Canceling...' : 'Confirm Cancellation'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  },
+);