MPR Handle generate mockup failure/partial success

Handle generate mockup failure/partial success

package.json

@@ -23,11 +23,13 @@
     "image-size": "^1.1.1",
     "jszip": "^3.10.1",
     "localforage": "^1.10.0",
+    "toastify-js": "1.12.0",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/file-saver": "^2.0.7",
     "@types/node": "^20.4.5",
+    "@types/toastify-js": "1.12.3",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
     "eslint": "^8.46.0",

src/pages/download/_downloadPythonPackage.js

@@ -1,6 +1,7 @@
 import JSZip from "jszip";
 import localforage from "localforage";
 import { saveAs } from "file-saver";
+import { showToast } from "../../scripts/utils/toast/toast";
 
 async function allStorage() {
   var values = new Map(),
@@ -43,22 +44,38 @@ function getJSZipDateWithOffset() {
   return dateWithOffset;
 }
 
-export async function generateZIP(deviceId) {
+function handlePartialSuccess(failedImages) {
+  const description = `
+    <div>Image(s) failed to generate. Try a different image/device:</div>
+    <ul>
+      ${failedImages.map((failedImage) => `<li>${failedImage}</li>`).join("")}
+    </ul>
+    <div>If the issue persists, please report it on <a href='https://github.com/oursky/mockuphone.com/issues'>Github</a></div>
+  `;
+
+  showToast({
+    title: "Partial Success",
+    description: description,
+    avatar: "/images/upload-warning.svg",
+  });
+}
+
+function handleNoGeneratedMockup() {
+  const description = `
+    <div>Try a different image/device. <br> If the issue persists, please report it on <a href='https://github.com/oursky/mockuphone.com/issues'>Github</a></div>
+  `;
+  showToast({
+    title: "No generated mockup",
+    description: description,
+    avatar: "/images/upload-error.svg",
+  });
+}
+
+function downloadGeneratedMockup(deviceId, images) {
   var zip = new JSZip();
   var count = 0;
   const zipFilename = !!deviceId ? `${deviceId}-mockup.zip` : "mockup.zip";
-  var images = new Map();
-  var dataurlkey = await allStorage();
-  var failedImages = [];
-  dataurlkey.forEach(function (value, key) {
-    // Only zip successfully generated mockups
-    if (value !== null) {
-      var file = dataURLtoFile(value, key.substring(3, key.length) + ".png");
-      images.set(key, URL.createObjectURL(file));
-    } else {
-      failedImages.push(key);
-    }
-  });
+
   images.forEach(async function (imgURL, k) {
     var filename = unescape(k.substring(3, k.length)) + ".png";
     var image = await fetch(imgURL);
@@ -75,3 +92,28 @@ export async function generateZIP(deviceId) {
     }
   });
 }
+
+export async function generateZIP(deviceId) {
+  var images = new Map();
+  var dataurlkey = await allStorage();
+  var failedImages = [];
+  dataurlkey.forEach(function (value, key) {
+    // Only zip successfully generated mockups
+    if (value !== null) {
+      var file = dataURLtoFile(value, key.substring(3, key.length) + ".png");
+      images.set(key, URL.createObjectURL(file));
+    } else {
+      failedImages.push(key);
+    }
+  });
+
+  downloadGeneratedMockup(deviceId, images);
+
+  if (failedImages.length > 0 && images.size > 0) {
+    handlePartialSuccess(failedImages);
+  }
+
+  if (images.size === 0) {
+    handleNoGeneratedMockup();
+  }
+}

src/scripts/utils/toast/toast.css

@@ -0,0 +1,14 @@
+@import url("toastify-js/src/toastify.css");
+
+.toast-close {
+  color: black !important;
+}
+
+.toast-header {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
+  font-size: 20px;
+  font-weight: bold;
+  color: black;
+}

src/scripts/utils/toast/toast.ts

@@ -0,0 +1,42 @@
+import StartToastifyInstance from "toastify-js";
+import Toastify from "toastify-js";
+import "./toast.css";
+
+interface ToastOptions extends StartToastifyInstance.Options {
+  description: string;
+  title?: string;
+}
+
+export function showToast(options: ToastOptions) {
+  const { description, avatar, title } = options;
+  const toastNode = document.createElement("div");
+  const toastHeader = document.createElement("div");
+  const toastMessage = document.createElement("div");
+
+  toastHeader.classList.add("toast-header");
+  toastHeader.innerHTML = `${avatar ? `<img src="${avatar}">` : ""}<span>${
+    title ?? ""
+  }</span>`;
+
+  toastMessage.innerHTML = description;
+  toastNode.appendChild(toastHeader);
+  toastNode.appendChild(toastMessage);
+
+  Toastify({
+    node: toastNode,
+    style: {
+      display: "flex",
+      background: "white",
+      color: "black",
+      alignItems: "start",
+      justifyContent: "start",
+    },
+    onClick: function () {},
+    duration: 3000,
+    close: true,
+    gravity: "top",
+    position: "center",
+    stopOnFocus: true,
+    ...options,
+  }).showToast();
+}