@saasquatch/mint-components 2.1.9-20 → 2.1.9-22

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -3,7 +3,7 @@ import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
-import { CopyTextView } from "../views/copy-text-view";
+import { ShareLinkView } from "./sqm-share-link-view";
 import { useShareLink } from "./useShareLink";
 /**
  * @uiName Share Link
@@ -58,6 +58,143 @@ export class ShareLink {
      * @uiGroup Style
      */
     this.buttonStyle = "icon";
+    /**
+     * Let advocates customize their share links up to 5 times.
+     *
+     * @uiName Allow customization
+     * @uiType boolean
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.allowCustomization = false;
+    /**
+     * Text for the cancel button in editing mode
+     *
+     * @uiName Cancel button label
+     * @uiType string
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.cancelLabelText = "Cancel";
+    /**
+     * Tooltip text shown when link customization is disabled
+     *
+     * @uiName Customize disabled tooltip
+     * @uiType string
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.customizeDisabledTooltip = "Link customization is not available.";
+    /**
+     * Displayed below the share link.
+     *
+     * @uiName Customize link button label
+     * @uiType string
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.customizeLinkButtonLabel = "Customize Link";
+    /**
+     * Message shown when the URL has been edited 5 times. To display a clickable link, use {supportLink} as a placeholder.
+     *
+     * @uiName Edit limit reached text
+     * @uiType string
+     * @uiWidget textarea
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.editLimitReachedText = "5 edit limit reached. To make more changes, please contact {supportLink}.";
+    /**
+     * Subtext shown while the user is customizing their URL.
+     *
+     * @uiName Edit limit text
+     * @uiType string
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.editLimitText = "You can edit your link up to {editsRemaining} more time(s).";
+    /**
+     * Description text shown when the link contains invalid special characters.
+     *
+     * @uiName Invalid characters error description
+     * @uiType string
+     * @uiWidget textarea
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.invalidCharactersErrorDescription = "Special characters can break the link when sharing.";
+    /**
+     * Title of the error message shown when the link contains invalid special characters.
+     *
+     * @uiName Invalid characters error title
+     * @uiType string
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.invalidCharactersErrorTitle = "Please use only letters, numbers, dashes and underscores";
+    /**
+     * Description text shown when the link has already been taken
+     *
+     * @uiName Link taken error message
+     * @uiType string
+     * @uiWidget textarea
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.linkTakenErrorDescription = "Try adding numbers, a dash or underscore to create a unique link.";
+    /**
+     * Title of the error message shown when the link has already been taken
+     *
+     * @uiName Link taken error title
+     * @uiType string
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.linkTakenErrorTitle = "This link is already taken";
+    /**
+     * Description text shown when the link contains profanity or brand names.
+     *
+     * @uiName Restricted words error description
+     * @uiType string
+     * @uiWidget textarea
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.restrictedWordsErrorDescription = "This link contains a restricted word.";
+    /**
+     * Title of the error message shown when the link contains profanity or brand names.
+     *
+     * @uiName Restricted words error title
+     * @uiType string
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.restrictedWordsErrorTitle = "Please try a different link";
+    /**
+     * Text for the save button in editing mode
+     *
+     * @uiName Save button label
+     * @uiType string
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.saveLabelText = "Save";
+    /**
+     * @uiName Min characters text
+     * @uiType string
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.minCharactersText = "Minimum 3 characters.";
+    /**
+     * Display text for the support link in the edit limit reached message
+     *
+     * @uiName Support link text
+     * @uiType string
+     * @uiGroup Customizable Vanity Link
+     * @requiredFlavor impact
+     */
+    this.supportLinkText = "Support";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -66,7 +203,7 @@ export class ShareLink {
     const props = isDemo()
       ? useDemoShareLink(thisProps)
       : useShareLink(thisProps);
-    return h(CopyTextView, Object.assign({}, props));
+    return h(ShareLinkView, Object.assign({}, props));
   }
   static get is() { return "sqm-share-link"; }
   static get encapsulation() { return "shadow"; }
@@ -369,20 +506,482 @@ export class ShareLink {
       "reflect": false,
       "defaultValue": "\"icon\""
     },
+    "allowCustomization": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Allow customization",
+            "name": "uiName"
+          }, {
+            "text": "boolean",
+            "name": "uiType"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Let advocates customize their share links up to 5 times."
+      },
+      "attribute": "allow-customization",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "cancelLabelText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Cancel button label",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Text for the cancel button in editing mode"
+      },
+      "attribute": "cancel-label-text",
+      "reflect": false,
+      "defaultValue": "\"Cancel\""
+    },
+    "customizeDisabledTooltip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Customize disabled tooltip",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Tooltip text shown when link customization is disabled"
+      },
+      "attribute": "customize-disabled-tooltip",
+      "reflect": false,
+      "defaultValue": "\"Link customization is not available.\""
+    },
+    "customizeLinkButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Customize link button label",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Displayed below the share link."
+      },
+      "attribute": "customize-link-button-label",
+      "reflect": false,
+      "defaultValue": "\"Customize Link\""
+    },
+    "editLimitReachedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Edit limit reached text",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "textarea",
+            "name": "uiWidget"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Message shown when the URL has been edited 5 times. To display a clickable link, use {supportLink} as a placeholder."
+      },
+      "attribute": "edit-limit-reached-text",
+      "reflect": false,
+      "defaultValue": "\"5 edit limit reached. To make more changes, please contact {supportLink}.\""
+    },
+    "editLimitText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Edit limit text",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Subtext shown while the user is customizing their URL."
+      },
+      "attribute": "edit-limit-text",
+      "reflect": false,
+      "defaultValue": "\"You can edit your link up to {editsRemaining} more time(s).\""
+    },
+    "invalidCharactersErrorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Invalid characters error description",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "textarea",
+            "name": "uiWidget"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Description text shown when the link contains invalid special characters."
+      },
+      "attribute": "invalid-characters-error-description",
+      "reflect": false,
+      "defaultValue": "\"Special characters can break the link when sharing.\""
+    },
+    "invalidCharactersErrorTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Invalid characters error title",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Title of the error message shown when the link contains invalid special characters."
+      },
+      "attribute": "invalid-characters-error-title",
+      "reflect": false,
+      "defaultValue": "\"Please use only letters, numbers, dashes and underscores\""
+    },
+    "linkTakenErrorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Link taken error message",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "textarea",
+            "name": "uiWidget"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Description text shown when the link has already been taken"
+      },
+      "attribute": "link-taken-error-description",
+      "reflect": false,
+      "defaultValue": "\"Try adding numbers, a dash or underscore to create a unique link.\""
+    },
+    "linkTakenErrorTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Link taken error title",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Title of the error message shown when the link has already been taken"
+      },
+      "attribute": "link-taken-error-title",
+      "reflect": false,
+      "defaultValue": "\"This link is already taken\""
+    },
+    "restrictedWordsErrorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Restricted words error description",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "textarea",
+            "name": "uiWidget"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Description text shown when the link contains profanity or brand names."
+      },
+      "attribute": "restricted-words-error-description",
+      "reflect": false,
+      "defaultValue": "\"This link contains a restricted word.\""
+    },
+    "restrictedWordsErrorTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Restricted words error title",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Title of the error message shown when the link contains profanity or brand names."
+      },
+      "attribute": "restricted-words-error-title",
+      "reflect": false,
+      "defaultValue": "\"Please try a different link\""
+    },
+    "saveLabelText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Save button label",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Text for the save button in editing mode"
+      },
+      "attribute": "save-label-text",
+      "reflect": false,
+      "defaultValue": "\"Save\""
+    },
+    "minCharactersText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Min characters text",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": ""
+      },
+      "attribute": "min-characters-text",
+      "reflect": false,
+      "defaultValue": "\"Minimum 3 characters.\""
+    },
+    "supportLinkText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Support link text",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Customizable Vanity Link",
+            "name": "uiGroup"
+          }, {
+            "text": "impact",
+            "name": "requiredFlavor"
+          }],
+        "text": "Display text for the support link in the edit limit reached message"
+      },
+      "attribute": "support-link-text",
+      "reflect": false,
+      "defaultValue": "\"Support\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; textColor?: string; buttonType?: \"primary\" | \"secondary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
+        "original": "DemoData<ShareLinkViewProps>",
+        "resolved": "{ copyTextViewProps?: CopyTextViewProps; allowCustomization?: boolean; customizeLinkLabel?: string; saveLabelText?: string; cancelLabelText?: string; isEditing?: boolean; editValue?: string; domainPrefix?: string; editsRemaining?: number; maxEdits?: number; limitReached?: boolean; validationError?: ValidationErrorInfo; isValidating?: boolean; isSaving?: boolean; characterLimit?: number; minCharacters?: number; charactersRemaining?: number; editLimitText?: string; editLimitReachedText?: string; minCharactersText?: string; supportLinkText?: string; customizeDisabled?: boolean; customizeDisabledTooltip?: string; onCustomizeClick?: () => void; onEditValueChange?: (value: string) => void; onSave?: () => void; onCancel?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
           },
-          "CopyTextViewProps": {
+          "ShareLinkViewProps": {
             "location": "import",
-            "path": "../views/copy-text-view"
+            "path": "./sqm-share-link-view"
           }
         }
       },
@@ -398,31 +997,90 @@ export class ShareLink {
           }],
         "text": ""
       }
+    },
+    "editsRemaining": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "edits-remaining",
+      "reflect": false
     }
   }; }
 }
 function useDemoShareLink(props) {
+  var _a;
   const [open, setOpen] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
   const copyString = "https://www.example.com/sharelink/abc";
-  return deepmerge({
-    copyString: copyString,
-    tooltiptext: props.tooltiptext,
-    textAlign: props.textAlign,
-    buttonStyle: props.buttonStyle,
-    backgroundColor: props.backgroundColor,
-    textColor: props.textColor,
-    borderRadius: props.borderRadius,
-    buttonType: props.buttonType,
-    copyButtonLabel: props.copyButtonLabel,
-    borderColor: props.borderColor,
-    rewardStatus: "AVAILABLE",
-    open,
-    onClick: () => {
-      // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
-      // Only if called from a user-initiated event
-      navigator.clipboard.writeText(copyString);
-      setOpen(true);
-      setTimeout(() => setOpen(false), props.tooltiplifespan);
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  const domainPrefix = "https://www.example.com/";
+  const baseProps = {
+    copyTextViewProps: {
+      copyString,
+      tooltiptext: props.tooltiptext,
+      textAlign: props.textAlign,
+      buttonStyle: props.buttonStyle,
+      backgroundColor: props.backgroundColor,
+      textColor: props.textColor,
+      borderRadius: props.borderRadius,
+      buttonType: props.buttonType,
+      copyButtonLabel: props.copyButtonLabel,
+      borderColor: props.borderColor,
+      open,
+      onClick: () => {
+        navigator.clipboard.writeText(copyString);
+        setOpen(true);
+        setTimeout(() => setOpen(false), props.tooltiplifespan);
+      },
+    },
+    allowCustomization: props.allowCustomization,
+    customizeLinkLabel: props.customizeLinkButtonLabel,
+    saveLabelText: props.saveLabelText,
+    cancelLabelText: props.cancelLabelText,
+    isEditing,
+    editValue,
+    domainPrefix,
+    editsRemaining: 5,
+    maxEdits: 5,
+    limitReached: false,
+    validationError: null,
+    isValidating: false,
+    isSaving: false,
+    characterLimit: 15,
+    minCharacters: 3,
+    charactersRemaining: 15 - editValue.length,
+    editLimitText: props.editLimitText,
+    editLimitReachedText: props.editLimitReachedText,
+    supportLinkText: props.supportLinkText,
+    minCharactersText: props.minCharactersText,
+    customizeDisabled: false,
+    customizeDisabledTooltip: (_a = props.customizeDisabledTooltip) !== null && _a !== void 0 ? _a : "Link customization is not available.",
+    onCustomizeClick: () => {
+      setIsEditing(true);
+      setEditValue("");
+    },
+    onEditValueChange: (value) => {
+      setEditValue(value);
+    },
+    onSave: () => {
+      setIsEditing(false);
+    },
+    onCancel: () => {
+      setIsEditing(false);
+      setEditValue("");
+    },
+  };
+  return deepmerge(baseProps, props.demoData || {}, {
+    arrayMerge: (_, a) => a,
+  });
 }