[pull] dev from KelvinTegelaar:dev

src/components/CippComponents/CippAutocomplete.jsx

@@ -69,6 +69,7 @@ export const CippAutoComplete = (props) => {
     isFetching = false,
     sx,
     removeOptions = [],
+    sortOptions = false,
     ...other
   } = props;
 
@@ -178,6 +179,9 @@ export const CippAutoComplete = (props) => {
     if (removeOptions && removeOptions.length) {
       finalOptions = finalOptions.filter((o) => !removeOptions.includes(o.value));
     }
+    if (sortOptions) {
+      finalOptions.sort((a, b) => a.label?.localeCompare(b.label));
+    }
     return finalOptions;
   }, [api, usedOptions, options, removeOptions]);
 

src/pages/tenant/administration/add-subscription/index.jsx

@@ -1,11 +1,15 @@
 import React from "react";
-import { Box, Divider, Grid } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import CippFormPage from "/src/components/CippFormPages/CippFormPage";
 import { Layout as DashboardLayout } from "/src/layouts/index.js";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import CippFormComponent from "/src/components/CippComponents/CippFormComponent";
 import { useSettings } from "/src/hooks/use-settings";
-import { darken, lighten, styled } from "@mui/system";
+import { Grid, darken, lighten, styled } from "@mui/system";
+import { CippPropertyList } from "/src/components/CippComponents/CippPropertyList";
+import { CippPropertyListCard } from "../../../../components/CippCards/CippPropertyListCard";
+import { getCippFormatting } from "../../../../utils/get-cipp-formatting";
+import { getCippTranslation } from "../../../../utils/get-cipp-translation";
 
 const Page = () => {
   const userSettingsDefaults = useSettings();
@@ -19,6 +23,12 @@ const Page = () => {
       iagree: false,
     },
   });
+
+  const selectedSku = useWatch({
+    control: formControl.control,
+    name: "sku",
+  });
+
   const GroupHeader = styled("div")(({ theme }) => ({
     position: "sticky",
     top: "-8px",
@@ -46,7 +56,7 @@ const Page = () => {
         <Box sx={{ my: 2 }}>
           <Grid container spacing={2}>
             {/* Conditional Access Policy Selector */}
-            <Grid item xs={6}>
+            <Grid size={{ xs: 6 }}>
               <CippFormComponent
                 type="autoComplete"
                 creatable={false}
@@ -57,20 +67,69 @@ const Page = () => {
                   url: "/api/ListCSPsku",
                   labelField: (option) => `${option?.name[0]?.value} (${option?.sku})`,
                   valueField: "sku",
+
+                  addedField: {
+                    billingCycle: "billingCycle",
+                    commitmentTerm: "commitmentTerm",
+                    description: "description",
+                  },
                 }}
                 multiple={false}
                 formControl={formControl}
+                required={true}
+                validators={{
+                  validate: (option) => {
+                    return option?.value ? true : "This field is required.";
+                  },
+                }}
+                sortOptions={true}
               />
             </Grid>
-            <Grid item xs={6}>
+            <Grid size={{ xs: 6 }}>
               <CippFormComponent
                 type="number"
                 label="Quantity of licenses to purchase."
                 name="Quantity"
                 formControl={formControl}
+                validators={{
+                  required: "This field is required.",
+                  min: {
+                    value: 1,
+                    message: "Minimum value is 1.",
+                  },
+                }}
+                required={true}
               />
             </Grid>
-            <Grid item xs={12}>
+            {selectedSku?.value && (
+              <Grid size={{ xs: 12 }}>
+                {console.log(selectedSku)}
+                <CippPropertyListCard
+                  title="Selected SKU Details"
+                  variant="outlined"
+                  showDivider={false}
+                  propertyItems={[
+                    { label: "Name", value: selectedSku?.label },
+                    {
+                      label: "Billing Cycle",
+                      value: getCippTranslation(selectedSku?.addedFields?.billingCycle),
+                    },
+                    {
+                      label: "Commitment Term",
+                      value: getCippTranslation(selectedSku?.addedFields?.commitmentTerm),
+                    },
+                    {
+                      label: "Description",
+                      value: getCippFormatting(
+                        selectedSku?.addedFields?.description?.[0]?.value,
+                        "htmlDescription"
+                      ),
+                    },
+                  ]}
+                />
+              </Grid>
+            )}
+            <Grid size={{ xs: 12 }}>
               <CippFormComponent
                 type="checkbox"
                 label="I understand that buy pressing submit this license will be purchased according to the terms and conditions for this SKU with Sherweb."

src/utils/get-cipp-formatting.js

@@ -19,6 +19,7 @@ import { CippTimeAgo } from "../components/CippComponents/CippTimeAgo";
 import { getCippRoleTranslation } from "./get-cipp-role-translation";
 import { CogIcon, ServerIcon, UserIcon, UsersIcon } from "@heroicons/react/24/outline";
 import { getCippTranslation } from "./get-cipp-translation";
+import DOMPurify from "dompurify";
 import { getSignInErrorCodeTranslation } from "./get-cipp-signin-errorcode-translation";
 
 export const getCippFormatting = (data, cellName, type, canReceive) => {
@@ -432,6 +433,20 @@ export const getCippFormatting = (data, cellName, type, canReceive) => {
     );
   }
 
+  // handle htmlDescription
+  if (cellName === "htmlDescription") {
+    return isText ? (
+      data
+    ) : (
+      <Box
+        component="span"
+        dangerouslySetInnerHTML={{
+          __html: DOMPurify.sanitize(data),
+        }}
+      />
+    );
+  }
+
   const durationArray = ["autoExtendDuration"];
   if (durationArray.includes(cellName)) {
     isoDuration.setLocales(