feat: accounts

apps/frontend/src/components/launches/add.edit.model.tsx

@@ -111,14 +111,8 @@ export const AddEditModal: FC<{
   // selected integrations to allow edit
   const [selectedIntegrations, setSelectedIntegrations] = useStateCallback<
     Integrations[]
-  >(
-    set
-      ? ints.filter(
-          (f) =>
-            uniq(set.posts.flatMap((p) => p.integration.id)).indexOf(f.id) > -1
-        )
-      : []
-  );
+  >([]);
+
   const integrations = useMemo(() => {
     if (!customer) {
       return ints;
@@ -134,6 +128,28 @@ export const AddEditModal: FC<{
   // hook to open a new modal
   const modal = useModals();
 
+  const selectIntegrationsDefault = useMemo(() => {
+    if (!set) {
+      return [];
+    }
+
+    const keepReference: Integrations[] = [];
+    const neededIntegrations = uniq(set.posts.flatMap((p) => p.integration.id));
+    for (const i of ints) {
+      if (neededIntegrations.indexOf(i.id) > -1) {
+        keepReference.push(i);
+      }
+    }
+
+    return keepReference;
+  }, [set]);
+
+  useEffect(() => {
+    if (set?.posts) {
+      setSelectedIntegrations(selectIntegrationsDefault);
+    }
+  }, [selectIntegrationsDefault]);
+
   // value of each editor
   const [value, setValue] = useState<
     Array<{
@@ -148,7 +164,7 @@ export const AddEditModal: FC<{
     onlyValues
       ? onlyValues
       : set
-      ? set?.posts?.[0].value || [
+      ? set?.posts?.[0]?.value || [
           {
             content: '',
           },
@@ -683,7 +699,7 @@ Here are the things you can do:
                 <PickPlatforms
                   toolTip={true}
                   integrations={integrations.filter((f) => !f.disabled)}
-                  selectedIntegrations={set ? selectedIntegrations : []}
+                  selectedIntegrations={selectIntegrationsDefault}
                   singleSelect={false}
                   onChange={setSelectedIntegrations}
                   isMain={true}

apps/frontend/src/components/launches/calendar.tsx

@@ -551,9 +551,35 @@ export const CalendarColumn: FC<{
 
   const addModal = useCallback(async () => {
     const signature = await (await fetch('/signatures/default')).json();
-    const set = !sets.length ? undefined : await new Promise(() => {
+    const set: any = !sets.length
+      ? undefined
+      : await new Promise((resolve) => {
+          modal.openModal({
+            title: t('select_set', 'Select a Set'),
+            closeOnClickOutside: true,
+            closeOnEscape: true,
+            withCloseButton: true,
+            onClose: () => resolve('exit'),
+            classNames: {
+              modal: 'bg-secondary text-textColor',
+            },
+            children: (
+              <SetSelectionModal
+                sets={sets}
+                onSelect={(selectedSet) => {
+                  resolve(selectedSet);
+                  modal.closeAll();
+                }}
+                onContinueWithoutSet={() => {
+                  resolve(undefined);
+                  modal.closeAll();
+                }}
+              />
+            ),
+          });
+        });
 
-    });
+    if (set === 'exit') return;
 
     modal.openModal({
       closeOnClickOutside: false,
@@ -583,6 +609,7 @@ export const CalendarColumn: FC<{
           date={
             randomHour ? getDate.hour(Math.floor(Math.random() * 24)) : getDate
           }
+          {...set?.content ? {set: JSON.parse(set.content)} : {}}
           reopenModal={() => ({})}
         />
       ),
@@ -939,3 +966,45 @@ export const Statistics = () => {
     </svg>
   );
 };
+
+const SetSelectionModal: FC<{
+  sets: any[];
+  onSelect: (set: any) => void;
+  onContinueWithoutSet: () => void;
+}> = ({ sets, onSelect, onContinueWithoutSet }) => {
+  const t = useT();
+
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="text-lg font-medium">
+        {t('choose_set_or_continue', 'Choose a set or continue without one')}
+      </div>
+
+      <div className="flex flex-col gap-2 max-h-60 overflow-y-auto">
+        {sets.map((set) => (
+          <div
+            key={set.id}
+            onClick={() => onSelect(set)}
+            className="p-3 border border-tableBorder rounded-lg cursor-pointer hover:bg-customColor31 transition-colors"
+          >
+            <div className="font-medium">{set.name}</div>
+            {set.description && (
+              <div className="text-sm text-gray-400 mt-1">
+                {set.description}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <div className="flex gap-2 pt-2 border-t border-tableBorder">
+        <button
+          onClick={onContinueWithoutSet}
+          className="flex-1 px-4 py-2 bg-customColor31 text-textColor rounded-lg hover:bg-customColor23 transition-colors"
+        >
+          {t('continue_without_set', 'Continue without set')}
+        </button>
+      </div>
+    </div>
+  );
+};

apps/frontend/src/components/launches/providers/high.order.provider.tsx

@@ -177,7 +177,7 @@ export const withProvider = function <T extends object>(
     // this is a smart function, it updates the global value without updating the states (too heavy) and set the settings validation
     const form = useValues(
       set?.set
-        ? set.set.posts.find((p) => p.integration.id === props.id).settings
+        ? set?.set?.posts?.find((p) => p?.integration?.id === props?.id)?.settings
         : existingData.settings,
       props.id,
       props.identifier,