FIX: Integration of Welcome dialog

webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/WelcomeDialog.tsx

@@ -6,8 +6,9 @@ import IronCalcIcon from "./ironcalc_icon_white.svg";
 
 function WelcomeDialog(properties: {
   onClose: () => void;
+  onSelectTemplate: (templateId: string) => void;
 }) {
-  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(
+  const [selectedTemplate, setSelectedTemplate] = useState<string>(
     "blank",
   );
 
@@ -59,21 +60,23 @@ function WelcomeDialog(properties: {
             description="Estimate payments, interest, and overall cost."
             icon={<House />}
             iconColor="#2F80ED"
-            active={selectedTemplate === "mortgage"}
-            onClick={() => handleTemplateSelect("mortgage")}
+            active={selectedTemplate === "mortgage_calculator"}
+            onClick={() => handleTemplateSelect("mortgage_calculator")}
           />
           <TemplatesListItem
             title="Travel expenses tracker"
             description="Track trip costs and stay on budget."
             icon={<TicketsPlane />}
             iconColor="#EB5757"
-            active={selectedTemplate === "travel"}
-            onClick={() => handleTemplateSelect("travel")}
+            active={selectedTemplate === "travel_expenses_tracker"}
+            onClick={() => handleTemplateSelect("travel_expenses_tracker")}
           />
         </TemplatesListWrapper>
       </DialogContent>
       <DialogFooter>
-        <DialogFooterButton>Create workbook</DialogFooterButton>
+        <DialogFooterButton onClick={() => properties.onSelectTemplate(selectedTemplate)}>
+          Create workbook
+        </DialogFooterButton>
       </DialogFooter>
     </DialogWrapper>
   );

webapp/app.ironcalc.com/frontend/src/components/storage.ts

@@ -60,7 +60,7 @@ export function createNewModel(): Model {
   return model;
 }
 
-export function loadModelFromStorageOrCreate(): Model {
+export function loadModelFromStorageOrCreate(): Model | null {
   const uuid = localStorage.getItem("selected");
   if (uuid) {
     // We try to load the selected model
@@ -68,14 +68,22 @@ export function loadModelFromStorageOrCreate(): Model {
     if (modelBytesString) {
       return Model.from_bytes(base64ToBytes(modelBytesString));
     }
-    // If it doesn't exist we create one at that uuid
-    const newModel = new Model("Workbook1", "en", "UTC");
-    localStorage.setItem("selected", uuid);
-    localStorage.setItem(uuid, bytesToBase64(newModel.toBytes()));
-    return newModel;
   }
-  // If there was no selected model we create a new one
-  return createNewModel();
+  return null;
+}
+
+// check if storage is empty
+export function isStorageEmpty(): boolean {
+  const modelsJson = localStorage.getItem("models");
+  if (!modelsJson) {
+    return true;
+  }
+  try {
+    const models = JSON.parse(modelsJson);
+    return Object.keys(models).length === 0;
+  } catch (e) {
+    return true;
+  }
 }
 
 export function saveSelectedModelInStorage(model: Model) {