fix: default group added, no-groups added to option of targeted groups control

Author: drewpledger

core/lib/makeswift/components/customer-group-slot/customer-group-slot.makeswift.tsx

@@ -39,31 +39,26 @@ async function fetchCustomerGroupData(): Promise<GetCustomerGroupResponse | unde
   return group;
 }
 
-function UntargetedGroup() {
-  return (
-    <div className="p-4 text-center text-lg text-gray-400">
-      This group needs to be added to "Targeted customer groups".
-    </div>
-  );
-}
-
 function getGroupSlot(
-  allSlots: Array<{ group?: string; slot: ReactNode }> | undefined,
+  targetedSlots: Array<{ group?: string; slot: ReactNode }> | undefined,
   simulateGroup: boolean,
-  simulatedGroup: string,
+  simulatedGroup: string | undefined,
   customerGroupId: number | undefined,
-  noGroupSlot: ReactNode,
+  defaultSlot: ReactNode,
 ): ReactNode {
-  const simulatedSlot = allSlots?.find((s) => s.group === simulatedGroup)?.slot ?? (
-    <UntargetedGroup />
-  );
-  const actualSlot = allSlots?.find((s) => s.group === `${customerGroupId}`)?.slot ?? (
-    <UntargetedGroup />
-  );
+  const simulatedSlot =
+    targetedSlots?.find((s) => {
+      if (!s.group) return false;
 
-  if (!customerGroupId && !simulateGroup) {
-    return noGroupSlot;
-  }
+      return s.group === simulatedGroup;
+    })?.slot ?? defaultSlot;
+
+  const actualSlot =
+    targetedSlots?.find((s) => {
+      if (!s.group) return false;
+
+      return s.group === `${customerGroupId}`;
+    })?.slot ?? defaultSlot;
 
   return simulateGroup ? simulatedSlot : actualSlot;
 }
@@ -80,11 +75,11 @@ interface Props {
   className: string;
   slots?: Array<{ group?: string; slot: ReactNode }>;
   simulatedGroup?: string;
-  noGroupSlot: ReactNode;
+  defaultSlot: ReactNode;
 }
 
-function CustomerGroupSlot({ className, slots, simulatedGroup = NO_GROUP_ID, noGroupSlot }: Props) {
-  const allSlots = slots?.concat({ group: NO_GROUP_ID, slot: noGroupSlot });
+function CustomerGroupSlot({ className, slots, simulatedGroup, defaultSlot }: Props) {
+  const targetedSlots = slots;
   const isInBuilder = useIsInBuilder();
 
   const { data, isLoading, error } = useSWR<GetCustomerGroupResponse | undefined, Error>(
@@ -104,11 +99,11 @@ function CustomerGroupSlot({ className, slots, simulatedGroup = NO_GROUP_ID, noG
 
   const customerGroupId = data?.customer?.customerGroupId;
   const groupSlot = getGroupSlot(
-    allSlots,
+    targetedSlots,
     isInBuilder,
     simulatedGroup,
     customerGroupId,
-    noGroupSlot,
+    defaultSlot,
   );
 
   return <div className={className}>{groupSlot}</div>;
@@ -132,13 +127,20 @@ runtime.registerComponent(CustomerGroupSlot, {
 
                 if (!data) return [];
 
-                return data
-                  .map((d) => ({
-                    id: `${d.id}`,
-                    label: d.name,
-                    value: `${d.id}`,
-                  }))
-                  .filter((option) => option.label.toLowerCase().includes(query.toLowerCase()));
+                return [
+                  {
+                    id: NO_GROUP_ID,
+                    label: 'No group',
+                    value: NO_GROUP_ID,
+                  },
+                  ...data
+                    .map((d) => ({
+                      id: `${d.id}`,
+                      label: d.name,
+                      value: `${d.id}`,
+                    }))
+                    .filter((option) => option.label.toLowerCase().includes(query.toLowerCase())),
+                ];
               } catch (error) {
                 // eslint-disable-next-line no-console
                 console.error('Error fetching customer group options:', error);
@@ -184,6 +186,7 @@ runtime.registerComponent(CustomerGroupSlot, {
         }
       },
     }),
+    defaultSlot: Slot(),
     noGroupSlot: Slot(),
   },
 });