@cling-se/widget 0.3.2 → 0.4.0

package/dist/DocTimeline.fbf264f2.js

@@ -0,0 +1,378 @@
+import { n as p, i as g, J as f, d as x } from "./main.5aaccd3f.js";
+const $ = {
+  name: "DynamicLink",
+  props: {
+    template: {
+      type: String,
+      required: !0
+    }
+  },
+  computed: {
+    transformed() {
+      return { template: this.template };
+    }
+  }
+};
+var v = function() {
+  var e = this, t = e._self._c;
+  return t(e.transformed, { tag: "component" });
+}, b = [], C = /* @__PURE__ */ p(
+  $,
+  v,
+  b,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const k = C.exports, S = {
+  name: "EventItem",
+  components: {
+    DynamicLink: k
+  },
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    template: {
+      type: String,
+      default: ""
+    },
+    content: {
+      type: [String, Array],
+      default: ""
+    },
+    createdAt: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: String,
+      default: "square"
+    },
+    compact: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    color: {
+      type: String,
+      default: "gray",
+      validator: (n) => ["blue", "teal", "orange", "green", "red", "purple", "gray", "primary"].indexOf(n) !== -1
+    },
+    isFuture: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    date() {
+      return g(f(this.createdAt)) ? this.$formatDate(this.createdAt, "Pp") : null;
+    },
+    dayOfMonth() {
+      return g(f(this.createdAt)) ? this.$formatDate(this.createdAt, "d") : null;
+    },
+    month() {
+      return g(f(this.createdAt)) ? this.$formatDate(this.createdAt, "MMM") : null;
+    },
+    iconClasses() {
+      const n = {
+        blue: "text-blue-600 bg-blue-50",
+        teal: "text-cyan-600 bg-cyan-50",
+        orange: "text-orange-600 bg-orange-50",
+        green: "text-green-600 bg-green-50",
+        red: "text-red-600 bg-red-50",
+        purple: "text-purple-600 bg-purple-50",
+        gray: "text-gray-500 bg-gray-100",
+        primary: "text-primary-500 bg-primary-50"
+      };
+      return this.isFuture ? "bg-purple-100 text-purple-500" : n[this.color] || n.gray;
+    },
+    titleSize() {
+      return this.size === "large" ? "text-base" : "text-sm";
+    },
+    textSize() {
+      return this.size === "large" ? "text-[15px]" : "text-[13px]";
+    },
+    dateSize() {
+      return this.size === "large" ? "text-sm" : "text-xs";
+    }
+  }
+};
+var D = function() {
+  var e = this, t = e._self._c;
+  return t("div", { staticClass: "flex flex-nowrap relative text-primary-500 cursor-default pb-5 ml-4 event before:content-[''] before:absolute before:w-px before:h-full before:bg-gray-300 before:-left-px before:top-4 last:before:hidden" }, [t("div", { staticClass: "m-0 h-[23px] relative", staticStyle: { "--bg": "#fff" } }, [t("div", { staticClass: "rounded-full absolute left-1/2 top-1/2 z-[1] w-7 h-7 flex items-center justify-center border-none bg-gray-100", class: e.iconClasses, staticStyle: { transform: "translate(-50%, calc(-50% + 8px))", "box-shadow": "0 0 0 2px var(--bg)" } }, [e.loading ? e._e() : t("BaseIcon", { attrs: { type: e.icon, size: "14" } })], 1)]), t("div", { staticClass: "ml-7 min-w-0 flex-grow flex flex-col pt-1" }, [e.loading ? [t("CSkeleton", { staticClass: "max-w-md text-gray-900 font-medium", class: e.titleSize, attrs: { width: "80%" } }), t("CSkeleton", { staticClass: "text-gray-600", class: e.textSize, attrs: { width: "40%" } }), t("CSkeleton", { staticClass: "text-center text-gray-500 text-xs inline-flex pt-0.5", class: e.dateSize, attrs: { hidden: "" } })] : e._e(), t("div", { staticClass: "max-w-md font-medium", class: [e.isFuture ? "text-gray-500" : "text-gray-700", e.titleSize] }, [e.template ? t("DynamicLink", { attrs: { template: e.template } }) : [e._v(e._s(e.title))]], 2), e.content ? t("div", { class: [e.isFuture ? "text-gray-400" : "text-gray-600", e.textSize] }, [t("div", { domProps: { innerHTML: e._s(e.content) } })]) : e._e(), t("div", { staticClass: "text-center text-gray-500 inline-flex pt-1", class: e.dateSize }, [t("div", { directives: [{ name: "tooltip", rawName: "v-tooltip", value: e.date, expression: "date" }] }, [e._v(e._s(e.dayOfMonth) + " " + e._s(e.month))])])], 2)]);
+}, w = [], z = /* @__PURE__ */ p(
+  S,
+  D,
+  w,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const I = z.exports, M = {
+  name: "DocumentTimeline",
+  i18nOptions: {
+    namespaces: "DocumentTimeline",
+    messages: {
+      en: {
+        clientName: "Client",
+        byName: "By {{- name}}",
+        withBankId: "with BankID",
+        propertyDesignation: "Request for property designation",
+        viewed: "Viewed",
+        viewedContent: "{{- name}} has viewed the document",
+        signed: "Signed",
+        denied: "denied",
+        accepted: "accepted",
+        statusChanged: "Document was",
+        requestChange: "Manually marked as",
+        mailOpened: "Email opened",
+        mailOpenedContent: "{{email}} viewed",
+        mailDropped: "Could not send email",
+        smsDropped: "Could not send SMS",
+        expired: "Expired",
+        expiredContent: "Marked as declined - expiration date has passed"
+      },
+      sv: {
+        clientName: "Kunden",
+        byName: "Av {{- name}}",
+        withBankId: "med BankID",
+        propertyDesignation: "Beg\xE4ran om fastighetsbeteckning",
+        viewed: "Granskat",
+        viewedContent: "{{- name}} har visat dokumentet",
+        signed: "Signerat",
+        denied: "Nekat",
+        accepted: "godk\xE4nt",
+        statusChanged: "Dokumentet blev",
+        requestChange: "Markerades manuellt som",
+        mailOpened: "Mail visat",
+        mailOpenedContent: "{{email}} visat",
+        mailDropped: "E-post kunde inte skickas",
+        smsDropped: "SMS kunde inte skickas",
+        expired: "Upph\xF6rde att g\xE4lla",
+        expiredContent: "Markerades som nekat f\xF6r att giltighetstiden har passerat"
+      }
+    }
+  },
+  components: {
+    EventItem: I
+  },
+  props: {
+    id: {
+      type: String,
+      required: !0
+    }
+  },
+  computed: {
+    ...x({
+      docById: "documents2/byId",
+      userById: "companyUsers/byId"
+    }),
+    document() {
+      return this.docById(this.id);
+    },
+    events() {
+      var i;
+      const n = [
+        this.formatEvent({
+          code: "created",
+          createdAt: (i = this.document) == null ? void 0 : i.createdAt
+        })
+      ], { events: e, scheduledFirstDelivery: t } = this.document || {};
+      if ((t == null ? void 0 : t.status) === "active") {
+        const r = t.deliveryTypes.join(
+          ` ${this.$t("_common:and")} `
+        );
+        n.push({
+          title: this.$t("_common:scheduledDelivery"),
+          content: `${this.$t(
+            "_common:via"
+          )} ${r}, ${this.$formatDate(
+            t.sendAt
+          )}`,
+          isFuture: !0,
+          icon: "calendar",
+          color: "primary"
+        });
+      }
+      return e == null || e.forEach((r) => n.push(this.formatEvent(r))), n;
+    }
+  },
+  methods: {
+    formatEvent({ code: n, data: e, createdAt: t, children: i = [] }) {
+      const {
+        client: r = {},
+        clients: u,
+        email: c,
+        status: d,
+        counter: _,
+        sendSource: h,
+        companyUserId: y
+      } = e || {}, m = _ || i.length + 1, o = r.name;
+      return {
+        created: () => ({
+          title: this.$t("_common:created"),
+          createdAt: t,
+          icon: "folder",
+          color: "primary"
+        }),
+        viewed: () => ({
+          title: this.$t("viewed"),
+          content: (o ? this.$t("viewedContent", { name: o }) : "") + (m ? ` ${this.$tc("_common:times", { count: m })}` : ""),
+          createdAt: t,
+          icon: "eye",
+          color: "primary"
+        }),
+        accepted: () => {
+          var a;
+          const s = {
+            title: this.$t("_common:status.signed"),
+            content: o ? this.$t("byName", { name: o }) : "",
+            createdAt: t,
+            icon: "check",
+            color: "primary"
+          };
+          return s.content && ((a = r.answerMethod) == null ? void 0 : a.accept) === "bankId" && (s.content += this.$t("withBankId")), s;
+        },
+        denied: () => ({
+          title: this.$t("_common:status.denied"),
+          content: o ? this.$t("byName", { name: o }) : "",
+          createdAt: t,
+          icon: "x",
+          color: "primary"
+        }),
+        sent: () => {
+          let s = this.$t("_common:sent");
+          return ["reminder", "propertyDesignation"].includes(h) && (s = this.$t("_common:sentThing", {
+            thing: h === "reminder" ? this.$t("_common:reminder") : this.$t("propertyDesignation")
+          })), {
+            title: s,
+            content: u == null ? void 0 : u.map(
+              (a) => ["email", "cellphone"].filter((l) => !!a[l]).map((l) => a[l]).join(` ${this.$t("_common:and")} `)
+            ).reduce(
+              (a, l) => a ? `${a}<div>${l}</div>` : `${this.$t("_common:to")}: ${l}`.capitalize(),
+              ""
+            ),
+            createdAt: t,
+            icon: h === "reminder" ? "bell" : "send",
+            color: "primary"
+          };
+        },
+        statusChanged: () => ["accepted", "denied"].includes(d) ? {
+          title: `${this.$t("statusChanged")} ${this.$t(
+            `_common:status.${d}`
+          )}`,
+          createdAt: t,
+          icon: d === "accepted" ? "check" : "x",
+          color: d === "accepted" ? "green" : "red"
+        } : null,
+        requestChange: () => {
+          var a;
+          const s = ((a = this.userById(y)) == null ? void 0 : a.fullName) || "";
+          return {
+            title: `${this.$t("requestChange")} ${this.$t(
+              `_common:status.${d}`
+            )}`,
+            content: s && this.$t("byName", { name: s }),
+            createdAt: t,
+            icon: "tool",
+            color: "primary"
+          };
+        },
+        mailDelivered: () => ({
+          title: this.$t("_common:sentThing", {
+            thing: this.$t("_common:email").capitalize()
+          }),
+          content: c ? `${this.$t("_common:to")}: ${c}`.capitalize() : "",
+          createdAt: t,
+          icon: "inbox",
+          color: "primary"
+        }),
+        mailOpened: () => ({
+          title: this.$t("mailOpened"),
+          content: `${this.$t("mailOpenedContent", { email: c })} ${m ? this.$tc("_common:times", { count: m }) : ""}`,
+          createdAt: t,
+          icon: "email",
+          color: "primary"
+        }),
+        mailDropped: () => ({
+          title: this.$t("mailDropped"),
+          content: c ? this.$t("toEmail", { email: c }) : null,
+          createdAt: t,
+          icon: "alert-triangle",
+          color: "orange"
+        }),
+        smsDropped: () => ({
+          title: this.$t("smsDropped"),
+          content: e ? `${this.$t("_common:to")}: ${e}`.capitalize() : "",
+          createdAt: t,
+          icon: "alert-triangle",
+          color: "orange"
+        }),
+        expired: () => ({
+          title: this.$t("expired"),
+          content: this.$t("expiredContent"),
+          createdAt: t,
+          icon: "x",
+          color: "red"
+        })
+      }[n]();
+    }
+  }
+};
+var B = function() {
+  var e = this, t = e._self._c;
+  return t("div", [t("div", { staticClass: "border-b mb-4 pb-4" }, [t("div", { staticClass: "mb-2" }, [t("div", { staticClass: "text-xs text-gray-600", domProps: { textContent: e._s(e.$t("_common:document").capitalize()) } }), t("div", { staticClass: "font-semibold text-lg" }, [e._v(e._s(e.document.name))])]), t("div", { staticClass: "inline-flex items-center rounded-full bg-gray-100 border-gray-200 -ml-2" }, [t("div", { staticClass: "text-xs text-gray-600 mr-1 py-1 pl-2", domProps: { textContent: e._s(e.$t("_common:status.status")) } }), t("div", { staticClass: "text-xs font-semibold py-1 px-2 bg-gray-300 rounded-r-full", domProps: { textContent: e._s(e.$t(`_common:status.${e.document.status}`)) } })])]), e._l(e.events, function(i, r) {
+    return t("EventItem", { key: r, attrs: { title: i.title, content: i.content, createdAt: i.createdAt, icon: i.icon, color: i.color, "is-future": i.isFuture, size: "large" } });
+  })], 2);
+}, O = [], E = /* @__PURE__ */ p(
+  M,
+  B,
+  O,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const N = E.exports, T = {
+  name: "DocTimeline",
+  components: {
+    DocumentTimeline: N
+  },
+  props: {
+    id: {
+      type: String,
+      required: !0
+    }
+  }
+};
+var q = function() {
+  var e = this, t = e._self._c;
+  return t("div", { staticClass: "p-8" }, [t("DocumentTimeline", { attrs: { id: e.id } })], 1);
+}, F = [], P = /* @__PURE__ */ p(
+  T,
+  q,
+  F,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const j = P.exports;
+export {
+  j as default
+};