@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

package/dist/collection/components/sqm-task-card/sqm-task-card-view.js

@@ -1,165 +1,253 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { HostBlock } from "../../global/mixins";
-import * as SVGs from "./SVGs";
-import { ProgressBarView, } from "./progress-bar/progress-bar-view";
 import { DateTime } from "luxon";
-export function TaskCardView(props) {
-  //   console.log({ props });
-  const checkmark_circle = SVGs.checkmark_circle();
-  const checkmark_filled = SVGs.checkmark_filled();
-  const arrow_left_right = SVGs.arrow_left_right();
-  const style = {
-    HostBlock: HostBlock,
-    TaskCard: {
-      "& .main": {
-        position: "relative",
-        boxSizing: "border-box",
-        minWidth: "347px",
-        background: "var(--sl-color-neutral-0)",
-        border: "1px solid var(--sl-color-neutral-200)",
-        borderRadius: "var(--sl-border-radius-large)",
-        fontSize: "var(--sl-font-size-small)",
-        lineHeight: "var(--sl-line-height-dense)",
-        color: "var(--sl-color-neutral-600)",
-      },
-      "& .main.complete": {
-        background: "var(--sl-color-primary-50)",
-        borderColor: "var(--sl-color-primary-500)",
-      },
-      "& .main.expired": {
-        color: "var(--sl-color-neutral-400)",
-        background: "var(--sl-color-neutral-50)",
-      },
-      "& .title": {
-        fontSize: "var(--sl-font-size-small)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        color: "var(--sl-color-neutral-950)",
-      },
-      "& .container": {
-        margin: "var(--sl-spacing-medium)",
-      },
-      "& .container.subdued": {
-        opacity: "0.66",
-      },
-      "& .container > div": {
-        margin: "var(--sl-spacing-medium) 0",
-      },
+import { intl } from "../../global/global";
+import { createStyleSheet } from "../../styling/JSS";
+import { luxonLocale } from "../../utils/utils";
+import { Details } from "./DetailsView";
+import { ProgressBarView } from "./progress-bar/progress-bar-view";
+import * as SVGs from "./SVGs";
+const style = {
+  TaskCard: {
+    display: "inline-block",
+    width: "100%",
+    "& .main": {
+      position: "relative",
+      boxSizing: "border-box",
+      background: "var(--sl-color-neutral-0)",
+      border: "1px solid var(--sl-color-neutral-200)",
+      borderRadius: "var(--sl-border-radius-medium)",
+      boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
+      fontSize: "var(--sl-font-size-small)",
+      lineHeight: "var(--sl-line-height-dense)",
+      color: "var(--sl-color-neutral-600)",
     },
-    Expired: {
+    "& .main.complete": {
+      background: "var(--sl-color-primary-50)",
+      borderColor: "var(--sl-color-primary-500)",
+    },
+    "& .main.expired": {
+      color: "var(--sl-color-neutral-600)",
+      background: "var(--sl-color-neutral-50)",
+    },
+    "& .title": {
+      fontSize: "var(--sl-font-size-medium)",
+      color: "var(--sl-color-neutral-950)",
+    },
+    "& .container": {
       margin: "var(--sl-spacing-medium)",
-      marginBottom: "calc(var(--sl-spacing-x-small)*-1)",
+    },
+    "& .container.subdued": {
+      opacity: "0.45",
+    },
+    "& .container > div": {
+      margin: "var(--sl-spacing-medium) 0",
+    },
+  },
+  NotStarted: {
+    fontSize: "var(--sl-font-size-small)",
+    padding: "var(--sl-spacing-medium)",
+    color: "var(--sl-color-primary-600)",
+    border: "1px solid var(--sl-color-neutral-200)",
+    borderRadius: "var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0 0",
+    borderBottom: "none",
+    background: "var(--sl-color-primary-50)",
+    fontWeight: "var(--sl-font-weight-semibold)",
+    lineHeight: "var(--sl-line-height-dense)",
+    "& .icon": {
+      position: "relative",
+      top: "0.1em",
+      marginRight: "var(--sl-spacing-small)",
+      color: "var(--sl-color-primary-500)",
+    },
+  },
+  Ended: {
+    fontSize: "var(--sl-font-size-small)",
+    padding: "var(--sl-spacing-medium)",
+    color: "var(--sl-color-warning-600)",
+    border: "1px solid var(--sl-color-neutral-200)",
+    borderRadius: "var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0 0",
+    borderBottom: "none",
+    background: "var(--sl-color-warning-50)",
+    fontWeight: "var(--sl-font-weight-semibold)",
+    lineHeight: "var(--sl-line-height-dense)",
+    "& .icon": {
+      position: "relative",
+      top: "0.1em",
+      marginRight: "var(--sl-spacing-small)",
       color: "var(--sl-color-warning-500)",
+    },
+  },
+  Header: {
+    display: "flex",
+    "& .icon": {
+      position: "relative",
+      top: "5%",
+      alignSelf: "center",
+      lineHeight: "0",
+      color: "var(--sl-color-primary-400)",
+      fontSize: "var(--sl-font-size-large)",
+      marginRight: "var(--sl-spacing-x-small)",
+    },
+    "& .value": {
+      alignSelf: "center",
+      fontSize: "var(--sl-font-size-x-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
+      color: "var(--sl-color-neutral-950)",
+      lineHeight: "100%",
+      marginRight: "var(--sl-spacing-xx-small)",
     },
-    Header: {
-      display: "flex",
-      "& .icon": {
-        alignSelf: "center",
-        lineHeight: "0",
-        color: "var(--sl-color-primary-400)",
-        fontSize: "var(--sl-font-size-large)",
-        marginRight: "var(--sl-spacing-x-small)",
-      },
-      "& .value": {
-        alignSelf: "center",
-        fontSize: "var(--sl-font-size-x-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        color: "var(--sl-color-neutral-950)",
-        lineHeight: "100%",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .text": {
-        alignSelf: "end",
-        textTransform: "uppercase",
-        fontSize: "var(--sl-font-size-x-small)",
-        color: "var(--sl-color-neutral-950)",
-        lineHeight: "var(--sl-font-size-medium)",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .end": {
-        color: "var(--sl-color-warning-500)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        marginBottom: "var(--sl-spacing-xx-small)",
-      },
-      "& .neutral": {
-        color: "var(--sl-color-neutral-400)",
-      },
+    "& .text": {
+      alignSelf: "end",
+      textTransform: "uppercase",
+      fontSize: "var(--sl-font-size-x-small)",
+      color: "var(--sl-color-neutral-950)",
+      lineHeight: "var(--sl-font-size-medium)",
+      marginRight: "var(--sl-spacing-xx-small)",
     },
-    Footer: {
-      display: "flex",
-      "& .icon": {
-        fontSize: "var(--sl-font-size-xx-small)",
-        marginRight: "var(--sl-spacing-xx-small)",
-        verticalAlign: "bottom",
-      },
-      "& .text": {
-        marginTop: "auto",
-        verticalAlign: "text-bottom",
-        fontSize: "var(--sl-font-size-x-small)",
-      },
-      "& .success": {
-        color: "var(--sl-color-primary-500)",
-        fontWeight: "var(--sl-font-weight-semibold)",
+    "& .end": {
+      color: "var(--sl-color-warning-500)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      marginBottom: "var(--sl-spacing-xx-small)",
+    },
+    "& .neutral": {
+      color: "var(--sl-color-neutral-400)",
+    },
+  },
+  Footer: {
+    display: "flex",
+    "& .icon": {
+      fontSize: "var(--sl-font-size-xx-small)",
+      marginRight: "var(--sl-spacing-xx-small)",
+      verticalAlign: "middle",
+    },
+    "& .text": {
+      marginTop: "auto",
+      verticalAlign: "text-bottom",
+      fontSize: "var(--sl-font-size-x-small)",
+      color: "var(--sl-color-neutral-400)",
+    },
+    "& .success": {
+      color: "var(--sl-color-primary-500)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    "& .action": {
+      marginTop: "auto",
+      marginLeft: "auto",
+      "&::part(base)": {
+        color: "var(--sl-color-neutral-0)",
+        borderRadius: "var(--sl-border-radius-medium)",
       },
-      "& .action": {
-        marginTop: "auto",
-        marginLeft: "auto",
-        "&::part(base)": {
-          color: "var(--sl-color-neutral-0)",
-          borderRadius: "var(--sl-border-radius-medium)",
-        },
-        "&.disabled::part(base)": {
-          border: "1px solid var(--sl-color-primary-400)",
-          background: "var(--sl-color-primary-400)",
-        },
-        "&.neutral::part(base)": {
-          border: "1px solid var(--sl-color-neutral-400)",
-          background: "var(--sl-color-neutral-400)",
-        },
+      "&.disabled::part(base)": {
+        border: "1px solid var(--sl-color-primary-400)",
+        background: "var(--sl-color-primary-400)",
       },
-      "& .neutral": {
-        color: "var(--sl-color-neutral-400)",
+      "&.neutral::part(base)": {
+        border: "1px solid var(--sl-color-neutral-400)",
+        background: "var(--sl-color-neutral-400)",
       },
     },
-  };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const showComplete = props.progress >= props.goal;
-  const repetitions = props.showProgressBar
-    ? Math.floor(props.progress / props.goal)
-    : props.progress;
-  const dateStart = props.showExpiry && DateTime.fromISO(props.rewardDuration.split("/")[0]);
-  const dateEnd = props.showExpiry && DateTime.fromISO(props.rewardDuration.split("/")[1]);
+    "& .neutral": {
+      color: "var(--sl-color-neutral-400)",
+    },
+    "& .datetime": {
+      display: "block",
+      marginTop: "var(--sl-spacing-xx-small)",
+      color: "var(--sl-color-neutral-400)",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function TaskCardView(props) {
+  var _a, _b, _c;
+  console.log("TASK CARD PROPS " + ((_a = props === null || props === void 0 ? void 0 : props.content) === null || _a === void 0 ? void 0 : _a.cardTitle));
+  console.log({ props });
+  const { callbacks, states, content } = props;
+  const dateStart = content.rewardDuration &&
+    DateTime.fromISO(content.rewardDuration.split("/")[0]);
+  const dateEnd = content.rewardDuration &&
+    DateTime.fromISO(content.rewardDuration.split("/")[1]);
   const dateToday = DateTime.now();
-  const taskComplete = (showComplete && props.repeatable === false) ||
-    (props.finite && props.progress >= props.finite * props.goal);
-  const taskEnded = props.showExpiry && dateEnd <= dateToday;
-  const taskNotStarted = props.showExpiry && dateToday <= dateStart;
+  if (content.displayDuration) {
+    const start = (_b = content.displayDuration.split("/")) === null || _b === void 0 ? void 0 : _b[0];
+    const end = (_c = content.displayDuration.split("/")) === null || _c === void 0 ? void 0 : _c[1];
+    const displayDateStart = start ? DateTime.fromISO(start) : dateToday;
+    const displayDateEnd = end ? DateTime.fromISO(end) : dateToday;
+    console.log({ displayDateStart, dateToday, displayDateEnd });
+    if (dateToday < displayDateStart || dateToday > displayDateEnd)
+      return h("span", null);
+  }
+  const checkmark_circle = SVGs.checkmark_circle();
+  const checkmark_filled = SVGs.checkmark_filled();
+  const arrow_left_right = SVGs.arrow_left_right();
+  const showComplete = states.progress >= content.goal;
+  const repetitions = content.showProgressBar
+    ? Math.floor(states.progress / content.goal)
+    : states.progress;
+  const taskComplete = (showComplete && content.repeatable === false) ||
+    (content.finite && states.progress >= content.finite * content.goal);
+  const taskEnded = content.rewardDuration && dateEnd <= dateToday;
+  const taskNotStarted = content.rewardDuration && dateToday <= dateStart;
   const taskUnavailable = taskEnded || taskNotStarted;
+  const vanillaStyle = `
+	:host{
+		display: block;
+		margin-bottom: var(--sl-spacing-large);
+	}
+  `;
   return (h("div", { class: sheet.classes.TaskCard },
-    h("div", { class: taskUnavailable
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    !states.loading && taskNotStarted && (h("div", { class: sheet.classes.NotStarted },
+      h("span", { class: "icon" },
+        h("sl-icon", { name: "info-circle-fill" })),
+      intl.formatMessage({
+        id: "startsOnMessage",
+        defaultMessage: content.startsOnMessage,
+      }, {
+        startDate: dateStart
+          .setLocale(luxonLocale(states.locale))
+          .toLocaleString(DateTime.DATETIME_MED),
+      }))),
+    !states.loading && taskEnded && (h("div", { class: sheet.classes.Ended },
+      h("span", { class: "icon" },
+        h("sl-icon", { name: "exclamation-triangle-fill" })),
+      intl.formatMessage({
+        id: "endedMessage",
+        defaultMessage: content.endedMessage,
+      }, {
+        endDate: dateEnd
+          .setLocale(luxonLocale(states.locale))
+          .toLocaleString(DateTime.DATETIME_MED),
+      }))),
+    h("div", { style: {
+        borderRadius: taskUnavailable &&
+          "0 0 var(--sl-border-radius-medium) var(--sl-border-radius-medium)",
+      }, class: taskUnavailable
         ? "main expired"
         : taskComplete
           ? "main complete"
           : "main" },
-      h("style", { type: "text/css" }, styleString),
-      taskUnavailable && (h("div", { class: sheet.classes.Expired }, taskEnded
-        ? "Ended " + dateEnd.toLocaleString(DateTime.DATE_MED)
-        : "Starts " + dateStart.toLocaleString(DateTime.DATE_MED))),
       h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
-        h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+        h("div", { class: sheet.classes.Header }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled : checkmark_circle)),
-          h("span", { class: taskUnavailable ? "value black" : "value black" }, props.rewardAmount),
-          h("span", { class: "text" }, props.rewardUnit)))),
-        props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: taskUnavailable ? "title black" : "title black" }, props.cardTitle)),
-        props.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (h(Details, Object.assign({}, props))),
-        props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskUnavailable })))),
-        h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
+          h("span", { class: "value" }, content.rewardAmount),
+          h("span", { class: "text" }, content.rewardUnit)))),
+        states.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", style: {
+            marginBottom: !content.description
+              ? content.steps
+                ? "var(--sl-spacing-x-large)"
+                : content.showProgressBar
+                  ? "var(--sl-spacing-xx-large)"
+                  : ""
+              : "",
+          } }, content.cardTitle)),
+        states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && h(Details, Object.assign({}, props))),
+        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { complete: taskComplete, expired: taskUnavailable })))),
+        h("div", { class: sheet.classes.Footer }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
-            props.repeatable && (h("div", null,
+            content.repeatable && (h("div", null,
               h("span", { class: repetitions > 0
                   ? taskUnavailable
                     ? "icon neutral"
@@ -169,70 +257,26 @@ export function TaskCardView(props) {
                   ? taskUnavailable
                     ? "neutral"
                     : "success"
-                  : "" }, "Completed " +
-                (props.finite
-                  ? Math.min(repetitions, props.finite)
-                  : repetitions) +
-                (props.finite ? "/" + props.finite : "") +
-                " times"))),
-            props.showExpiry && !taskUnavailable && (h("span", null, "Ends " + dateEnd.toLocaleString(DateTime.DATE_FULL)))),
+                  : "" }, intl.formatMessage({
+                id: "completedMessage",
+                defaultMessage: content.completedText,
+              }, {
+                finite: content.finite,
+                count: content.finite
+                  ? Math.min(repetitions, content.finite)
+                  : repetitions,
+              })))),
+            dateEnd && !taskUnavailable && (h("span", { class: "datetime" }, intl.formatMessage({
+              id: "expiryMessage",
+              defaultMessage: content.expiryMessage,
+            }, {
+              endDate: dateEnd
+                .setLocale(luxonLocale(states.locale))
+                .toLocaleString(DateTime.DATETIME_MED),
+            })))),
           h("sl-button", { class: taskUnavailable
               ? "action neutral"
               : taskComplete
                 ? "action disabled"
-                : "action", type: "primary", size: "small", onClick: () => props.openNewTab
-              ? window.open(props.buttonLink)
-              : window.open(props.buttonLink, "_parent"), disabled: taskComplete || taskUnavailable }, props.buttonText))))))));
-}
-function Details(props) {
-  const style = {
-    Description: {
-      "& input[type=checkbox]": {
-        display: "none",
-      },
-      "& input:checked ~ .details": {
-        transform: "rotate(-180deg)",
-      },
-      "& .details": {
-        position: "absolute",
-        top: "var(--sl-spacing-medium)",
-        right: "var(--sl-spacing-medium)",
-        color: "var(--sl-color-neutral-700)",
-        fontSize: "var(--sl-font-size-large)",
-        "& :hover": {
-          color: "var(--sl-color-primary-700)",
-        },
-        transformOrigin: "50% 37%",
-        transition: "transform var(--sl-transition-medium) ease",
-      },
-      "& input:checked ~ .summary": {
-        transition: "all var(--sl-transition-medium) ease",
-        maxHeight: "300px",
-        marginBottom: props.steps
-          ? "var(--sl-spacing-x-large)"
-          : props.showProgressBar
-            ? "var(--sl-spacing-xx-large)"
-            : "var(--sl-spacing-x-large)",
-      },
-      "& .summary": {
-        display: "block",
-        overflow: "hidden",
-        fontSize: "var(--sl-font-size-small)",
-        maxHeight: "0px",
-        transition: "all var(--sl-transition-fast) ease-out",
-        marginBottom: "var(--sl-spacing-medium)",
-      },
-    },
-  };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  const rid = Math.random().toString(36).slice(2);
-  return (h("div", null,
-    h("style", { type: "text/css" }, styleString),
-    h("span", { class: sheet.classes.Description },
-      h("input", { type: "checkbox", id: "details-" + rid }),
-      h("label", { class: "details", htmlFor: "details-" + rid },
-        h("sl-icon", { name: "chevron-down" })),
-      h("span", { class: "summary" }, props.description))));
+                : "action", type: "primary", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable }, content.buttonText))))))));
 }