@saasquatch/mint-components 1.5.0-1 → 1.5.0-2

package/dist/cjs/sqm-share-code.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./use-callback-fadb2643.js');
-const index_module = require('./index.module-c0bf9df0.js');
+const index_module = require('./index.module-7dd4b981.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
 const cjs = require('./cjs-1066ec21.js');
@@ -21,11 +21,18 @@ const MessageLinkQuery = index_module.dist.gql `
     }
   }
 `;
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
 function useShareCode(props) {
   var _a, _b;
   const programId = index_module.M();
-  const user = index_module.ne();
-  const { data } = index_module.cn(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const user = index_module.T();
+  const engagementMedium = index_module.x();
+  const { data } = index_module.en(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.be(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -36,6 +43,18 @@ function useShareCode(props) {
     navigator.clipboard.writeText(shareString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
   }
   return { ...props, onClick, open, shareString };
 }

package/dist/cjs/{useDemoBigStat-5d71bbdf.js → useDemoBigStat-2786227e.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
-const index_module = require('./index.module-c0bf9df0.js');
+const index_module = require('./index.module-7dd4b981.js');
 const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
 const cjs = require('./cjs-1066ec21.js');
 
@@ -338,7 +338,7 @@ function BigStatView(props, children) {
 const debug = _extends.browser("sq:useBigStat");
 const LOADING = "...";
 const debugQuery = (query, variables, getStat) => {
-  const res = index_module.cn(query, variables);
+  const res = index_module.en(query, variables);
   if (!(res === null || res === void 0 ? void 0 : res.data) && !res.loading) {
     console.error("issue getting stat:", res);
   }
@@ -898,7 +898,7 @@ function useBigStat(props) {
   const { statType, flexReverse, alignment } = props;
   const programId = index_module.M();
   const locale = index_module.R();
-  const userIdent = index_module.ne();
+  const userIdent = index_module.T();
   const re = _extends.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {

package/dist/collection/collection-manifest.json

@@ -6,6 +6,7 @@
     "./components/sqm-rewards-table/sqm-rewards-table.js",
     "./components/sqm-asset-card/sqm-asset-card.js",
     "./components/sqm-big-stat/sqm-big-stat.js",
+    "./components/sqm-brand/sqm-brand.js",
     "./components/sqm-divided-layout/sqm-divided-layout.js",
     "./components/sqm-edit-profile/sqm-edit-profile.js",
     "./components/sqm-form-message/sqm-form-message.js",
@@ -32,6 +33,8 @@
     "./components/sqm-portal-register/sqm-portal-register.js",
     "./components/sqm-portal-reset-password/sqm-portal-reset-password.js",
     "./components/sqm-portal-verify-email/sqm-portal-verify-email.js",
+    "./components/sqm-program-explainer/sqm-program-explainer.js",
+    "./components/sqm-program-explainer-step/sqm-program-explainer-step.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",

package/dist/collection/components/sqm-brand/SqmBrand.stories.js

@@ -0,0 +1,75 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Brand",
+};
+const SampleComponents = () => (h("div", { style: { padding: "10px", border: "5px solid #EEE" } },
+  h("sl-button", { type: "default" }, "Default"),
+  h("sl-button", { type: "primary" }, "Primary"),
+  h("sl-button", { type: "success" }, "Success"),
+  h("sl-button", { type: "neutral" }, "Neutral"),
+  h("sl-button", { type: "warning" }, "Warning"),
+  h("sl-button", { type: "danger" }, "Danger"),
+  h("br", null),
+  h("sl-badge", { type: "primary" }, "Primary"),
+  h("sl-badge", { type: "success" }, "Success"),
+  h("sl-badge", { type: "neutral" }, "Neutral"),
+  h("sl-badge", { type: "warning" }, "Warning"),
+  h("sl-badge", { type: "danger" }, "Danger"),
+  h("div", { class: "color-palette" },
+    h("div", { class: "color-palette__name" },
+      "Primary",
+      h("br", null),
+      h("code", null,
+        "--sl-color-primary-",
+        h("em", null, `{n}`))),
+    h("div", { style: { display: "flex", gap: "5px" } },
+      h(ColorSwatch, { depth: 50 }),
+      h(ColorSwatch, { depth: 100 }),
+      h(ColorSwatch, { depth: 200 }),
+      h(ColorSwatch, { depth: 300 }),
+      h(ColorSwatch, { depth: 400 }),
+      h(ColorSwatch, { depth: 500 }),
+      h(ColorSwatch, { depth: 600 }),
+      h(ColorSwatch, { depth: 700 }),
+      h(ColorSwatch, { depth: 800 }),
+      h(ColorSwatch, { depth: 900 }),
+      h(ColorSwatch, { depth: 950 })))));
+export const Examples = () => {
+  return (h("div", null,
+    h(SampleComponents, null),
+    h("sqm-brand", { "brand-color": "#FF0000" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#00FF00" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#0000FF" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#000000" },
+      h(SampleComponents, null))));
+};
+export const Nested = () => {
+  return (h("div", null,
+    "Default ",
+    h(SampleComponents, null),
+    h("sqm-brand", { "brand-color": "#FF0000" },
+      "Red:",
+      h(SampleComponents, null),
+      h("sqm-brand", { "brand-color": "#00FF00" },
+        "Green:",
+        h(SampleComponents, null),
+        h("sqm-brand", { "brand-color": "#0000FF" },
+          "Blue:",
+          h(SampleComponents, null),
+          h("sqm-brand", { "brand-color": "#000000" },
+            "Black:",
+            h(SampleComponents, null)))))));
+};
+function ColorSwatch({ depth }) {
+  return (h("div", { style: {
+      backgroundColor: `var(--sl-color-primary-${depth})`,
+      width: "50px",
+      height: "50px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    } }, depth));
+}

package/dist/collection/components/sqm-brand/sqm-brand.js

@@ -0,0 +1,59 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { autoColorScaleCss, } from "../sqm-stencilbook/AutoColor";
+/**
+ *
+ * @uiName Big Stat
+ * @slot the description of the component
+ */
+export class BrandComponent {
+  constructor() {
+    /**
+     * Controls the primary brand color used in the Mint Components library. Note that this
+     * does not affect vanilla components or other component libraries.
+     *
+     * @uiName Brand Color
+     */
+    this.brandColor = "#0000FF";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const css = autoColorScaleCss(this.brandColor);
+    return (h(Host, null,
+      h("style", null, `
+          :host{
+            display: contents;
+          }
+          /* Selects any element placed inside a slot */
+          ::slotted(*) {
+            ${css}
+          }`),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-brand"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "brandColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Brand Color",
+            "name": "uiName"
+          }],
+        "text": "Controls the primary brand color used in the Mint Components library. Note that this\r\ndoes not affect vanilla components or other component libraries."
+      },
+      "attribute": "brand-color",
+      "reflect": false,
+      "defaultValue": "\"#0000FF\""
+    }
+  }; }
+}

package/dist/collection/components/sqm-program-explainer/ProgramExplainer.stories.js

@@ -0,0 +1,33 @@
+export default {
+  title: "Components/Program Explainer",
+};
+export const DefaultProgramExplainerView = () => {
+  const barProps = {
+    data: {
+      programs: [
+        {
+          key: "program1",
+          label: "My Referral Program",
+        },
+        {
+          key: "program2",
+          label: "My Rewards Program",
+        },
+      ],
+    },
+  };
+  const item1Props = {
+    title: "hello",
+    description: "world"
+  };
+  const item2Props = {
+    title: "hello",
+    description: "world"
+  };
+  return ("asd"
+  // <ProgramExplainerView {...barProps}>
+  //   <ProgramExplainerStepView {...item1Props} />
+  //   <ProgramExplainerStepView {...item2Props} />
+  // </ProgramExplainerView>
+  );
+};

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer-view.js

@@ -0,0 +1,33 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { gap } from "../../global/mixins";
+const style = {
+  ItemsContainer: {
+    "min-width": "290px",
+    "max-width": "320px",
+    "box-sizing": "border-box",
+    padding: "20px 15px",
+    ...gap({ direction: "column", size: "4px" }),
+  },
+};
+const vanillaStyle = `
+  :host{    
+    width: 30vw;
+    min-width: min-content;
+    max-width: 320px;
+  }
+`;
+jss.setup(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export function ProgramExplainerView(
+// @ts-ignore - Stencil requires props (even if empty)
+props, children) {
+  return (h("div", null,
+    h("div", { class: sheet.classes.ItemsContainer },
+      h("style", { type: "text/css" },
+        vanillaStyle,
+        styleString),
+      children)));
+}

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer.js

@@ -0,0 +1,24 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, State } from "@stencil/core";
+import { ProgramExplainerView } from "./sqm-program-explainer-view";
+/**
+ * A holder for navigation menu items
+ *
+ * @uiName Navigation Sidebar
+ */
+export class ProgramExplainer {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(ProgramExplainerView, null,
+      h("slot", null)));
+  }
+  static get is() { return "sqm-program-explainer"; }
+  static get encapsulation() { return "shadow"; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-program-explainer-step/ProgramExplainerStep.stories.js

@@ -0,0 +1,21 @@
+import { h } from "@stencil/core";
+import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
+export default {
+  title: "Components/Program Explainer Step",
+};
+export const Example1 = () => {
+  const props = {
+    title: "Invite your friends to Klip",
+    description: "Earn up to $1200 in rewards for each referral",
+    color: "white",
+    background: "#5B3EDA"
+  };
+  return h(ProgramExplainerStepView, Object.assign({}, props));
+};
+// export const ActiveItem = () => {
+//   const props = {
+//     title: "hello",
+//     description: "world",
+//   };
+//   return <ProgramExplainerStepView {...props} />;
+// };

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step-view.js

@@ -0,0 +1,45 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+export function ProgramExplainerStepView(props) {
+  const style = {
+    Container: {
+      display: "flex",
+      width: "100%",
+      height: "100%",
+      placeItems: "center",
+      placeContent: "center",
+      color: props.color,
+      background: props.background,
+    },
+    Logo: {
+      margin: "var(--sl-spacing-x-large)",
+    },
+    Text: {
+      margin: "var(--sl-spacing-x-large)",
+    },
+    Title: {
+      textTransform: "uppercase",
+      fontSize: "var(--sl-font-size-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    Description: {
+      fontSize: "var(--sl-font-size-medium)",
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { style: {
+      resize: "both",
+      overflow: "hidden",
+      height: "600px",
+      width: "500px",
+    } },
+    h("div", { class: sheet.classes.Container },
+      h("style", { type: "text/css" }, styleString),
+      h("div", { class: sheet.classes.Logo },
+        h("div", { style: { width: "64px", height: "64px", background: "white" } })),
+      h("div", { class: sheet.classes.Title }, props.title),
+      h("div", { class: sheet.classes.Description }, props.description))));
+}

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step.js

@@ -0,0 +1,123 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop } from "@stencil/core";
+import deepmerge from "deepmerge";
+import { getProps } from "../../utils/utils";
+import { ProgramExplainerStepView, } from "./sqm-program-explainer-step-view";
+/**
+ * @uiName Navigation Link
+ */
+export class ProgramExplainerStep {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = useSidebarDemo(getProps(this));
+    return h(ProgramExplainerStepView, Object.assign({}, props));
+  }
+  static get is() { return "sqm-program-explainer-step"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "path": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Navigation path",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "path",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Icon",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<ProgramExplainerStepViewProps>",
+        "resolved": "{ title?: string; description?: string; color?: string; background?: string; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "ProgramExplainerStepViewProps": {
+            "location": "import",
+            "path": "./sqm-program-explainer-step-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+}
+function useSidebarDemo(props) {
+  return deepmerge({
+    states: {
+      active: false,
+    },
+    data: {
+      label: props.label || "Dashboard",
+      icon: props.icon || "house",
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -12,7 +12,6 @@ const stageProgressList = {
   confirmation: "Confirm",
 };
 export function RewardExchangeView(props) {
-  console.log(props);
   const style = {
     HostBlock: HostBlock,
     Container: {
@@ -72,11 +71,8 @@ export function RewardExchangeView(props) {
       marginBottom: "20px",
     },
     Select: {
-      "&::part(base)": {
-        flex: "0.75",
-      },
-      "&::part(menu)": {
-        maxHeight: "40vh",
+      "&::part(label)": {
+        color: "var(--sl-color-primary-500)",
       },
     },
     Buttons: {
@@ -232,6 +228,12 @@ export function RewardExchangeView(props) {
         marginTop: "var(--sl-spacing-xx-small)",
       },
     },
+    Grid: {
+      display: "grid",
+      justifyContent: "center",
+      gap: "20px",
+      gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+    },
     KutayButton: {
       display: "flex",
       flexWrap: "wrap-reverse",
@@ -307,28 +309,18 @@ export function RewardExchangeView(props) {
   function chooseReward() {
     var _a;
     return [
-      h("div", { style: {
-          display: "grid",
-          justifyContent: "center",
-          gap: "20px",
-          gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
-        } }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
-        var _a, _b, _c;
+      h("div", { class: sheet.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
+        var _a, _b;
         const style = {
           boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
             ? "0 0 0 2px var(--sl-color-primary-500)"
             : "none",
-          marginBottom: "10px 0",
-          borderRadius: "var(--sl-border-radius-medium)",
-          flex: "1",
-          minWidth: "100%",
-          color: !item.available && "#eee",
         };
         const amount = item.ruleType === "FIXED_GLOBAL_REWARD"
           ? item.prettySourceValue
-          : item.ruleType === "STEPPED_FIXED_GLOBAL_REWARD"
-            ? `${(_a = item.steps[0]) === null || _a === void 0 ? void 0 : _a.sourceValue} to ${item.steps.slice(-1).pop().prettySourceValue}`
-            : `${item.sourceMinValue} to ${item.prettySourceMaxValue}`;
+          : item.prettySourceMinValue && item.prettySourceMaxValue
+            ? `${item.prettySourceMinValue} to ${item.prettySourceMaxValue}`
+            : "";
         return (h("div", { key: item.key, class: item.available ? sheet.classes.CardContainer : "", style: style },
           h("sl-card", { class: sheet.classes.KutayCard, style: {
               cursor: item.unavailableReasonCode
@@ -357,7 +349,7 @@ export function RewardExchangeView(props) {
                 h("div", { class: "amount" }, amount),
                 item.unavailableReasonCode && (h("div", { class: "error" }, intl.formatMessage({
                   id: "unavailableCode",
-                  defaultMessage: (_c = (_b = states.content) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.notAvailableError,
+                  defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
                 }, {
                   unavailableReason: item.unavailableReason ||
                     item.unavailableReasonCode,

package/dist/collection/components/sqm-reward-exchange-list/useRewardExchangeList.js

@@ -86,7 +86,6 @@ export function useRewardExchangeList(props) {
       accountId: user === null || user === void 0 ? void 0 : user.accountId,
       userId: user.id,
     };
-    console.log({ selectedItem, selectedStep });
     switch (selectedItem.ruleType) {
       case "FIXED_GLOBAL_REWARD":
         exchangeVariables = {

package/dist/collection/components/sqm-rewards-table/useRewardsTable.js

@@ -109,7 +109,6 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
     rewardsData && getComponentData(components);
   }, [rewardsData, components, tick]);
   const isEmpty = !((_b = content === null || content === void 0 ? void 0 : content.rows) === null || _b === void 0 ? void 0 : _b.length) && !(data === null || data === void 0 ? void 0 : data.length);
-  console.log(states.loading, content.loading, rewardsData);
   const show = 
   // 1 - Loading if loading
   states.loading || content.loading

package/dist/collection/components/sqm-share-code/useShareCode.js

@@ -1,4 +1,4 @@
-import { useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
 const MessageLinkQuery = gql `
@@ -10,11 +10,18 @@ const MessageLinkQuery = gql `
     }
   }
 `;
+const WIDGET_ENGAGEMENT_EVENT = gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
 export function useShareCode(props) {
   var _a, _b;
   const programId = useProgramId();
   const user = useUserIdentity();
+  const engagementMedium = useEngagementMedium();
   const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
   const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
@@ -25,6 +32,18 @@ export function useShareCode(props) {
     navigator.clipboard.writeText(shareString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
   }
   return { ...props, onClick, open, shareString };
 }