@saasquatch/mint-components 2.1.8-2 → 2.1.8-4

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,111 @@ export class ShareLink {
      * @uiGroup Style
      */
     this.buttonStyle = "icon";
+    /**
+     * Enable users to customize their referral link
+     *
+     * @uiName Customize URL
+     * @uiType boolean
+     */
+    this.customizeUrl = false;
+    /**
+     * Text shown below the share link input to trigger customization
+     *
+     * @uiName Customize link label
+     * @uiType string
+     */
+    this.customizeLinkLabel = "Customize Link";
+    /**
+     * Text for the save button in editing mode
+     *
+     * @uiName Save button label
+     * @uiType string
+     */
+    this.saveLabelText = "Save";
+    /**
+     * Text for the cancel button in editing mode
+     *
+     * @uiName Cancel button label
+     * @uiType string
+     */
+    this.cancelLabelText = "Cancel";
+    /**
+     * Message shown briefly after successfully saving a custom link
+     *
+     * @uiName Success message
+     * @uiType string
+     */
+    this.successMessage = "Link updated successfully";
+    /**
+     * Title text shown when the custom link is already taken
+     *
+     * @uiName Link taken error title
+     * @uiType string
+     */
+    this.linkTakenErrorTitle = "This link is already taken";
+    /**
+     * Description text shown when the custom link is already taken
+     *
+     * @uiName Link taken error description
+     * @uiType string
+     */
+    this.linkTakenErrorDescription = "Try adding numbers, a dash or underscore to create a unique link.";
+    /**
+     * Title text shown when the link contains invalid symbols
+     *
+     * @uiName Invalid symbols error title
+     * @uiType string
+     */
+    this.invalidSymbolsErrorTitle = "Please use only letters, numbers, dashes and underscores";
+    /**
+     * Description text shown when the link contains invalid symbols
+     *
+     * @uiName Invalid symbols error description
+     * @uiType string
+     */
+    this.invalidSymbolsErrorDescription = "Special symbols can break the link when sharing.";
+    /**
+     * Title text shown when the link contains a restricted word
+     *
+     * @uiName Restricted word error title
+     * @uiType string
+     */
+    this.restrictedWordErrorTitle = "Please try a different link";
+    /**
+     * Description text shown when the link contains a restricted word
+     *
+     * @uiName Restricted word error description
+     * @uiType string
+     */
+    this.restrictedWordErrorDescription = "This link contains a restricted word.";
+    /**
+     * Text describing the edit limit
+     *
+     * @uiName Edit limit text
+     * @uiType string
+     */
+    this.editLimitText = "You can edit your link up to 5 times.";
+    /**
+     * Message shown when the edit limit has been reached. Use {supportLink} as a placeholder for the support link.
+     *
+     * @uiName Edit limit reached text
+     * @uiType string
+     */
+    this.editLimitReachedText = "5 edit limit reached. To make more changes, please contact {supportLink}.";
+    /**
+     * Display text for the support link in the edit limit reached message
+     *
+     * @uiName Support link text
+     * @uiType string
+     */
+    this.supportLinkText = "Support";
+    /**
+     * Tooltip text shown when link customization is disabled
+     *
+     * @uiName Customize disabled tooltip
+     * @uiType string
+     */
+    this.customizeDisabledTooltip = "Link customization is not available.";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -66,7 +171,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 +474,380 @@ export class ShareLink {
       "reflect": false,
       "defaultValue": "\"icon\""
     },
+    "customizeUrl": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Customize URL",
+            "name": "uiName"
+          }, {
+            "text": "boolean",
+            "name": "uiType"
+          }],
+        "text": "Enable users to customize their referral link"
+      },
+      "attribute": "customize-url",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "customizeLinkLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Customize link label",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Text shown below the share link input to trigger customization"
+      },
+      "attribute": "customize-link-label",
+      "reflect": false,
+      "defaultValue": "\"Customize 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": "Text for the save button in editing mode"
+      },
+      "attribute": "save-label-text",
+      "reflect": false,
+      "defaultValue": "\"Save\""
+    },
+    "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": "Text for the cancel button in editing mode"
+      },
+      "attribute": "cancel-label-text",
+      "reflect": false,
+      "defaultValue": "\"Cancel\""
+    },
+    "successMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Success message",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Message shown briefly after successfully saving a custom link"
+      },
+      "attribute": "success-message",
+      "reflect": false,
+      "defaultValue": "\"Link updated successfully\""
+    },
+    "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": "Title text shown when the custom link is already taken"
+      },
+      "attribute": "link-taken-error-title",
+      "reflect": false,
+      "defaultValue": "\"This link is already taken\""
+    },
+    "linkTakenErrorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Link taken error description",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Description text shown when the custom link is already taken"
+      },
+      "attribute": "link-taken-error-description",
+      "reflect": false,
+      "defaultValue": "\"Try adding numbers, a dash or underscore to create a unique link.\""
+    },
+    "invalidSymbolsErrorTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Invalid symbols error title",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Title text shown when the link contains invalid symbols"
+      },
+      "attribute": "invalid-symbols-error-title",
+      "reflect": false,
+      "defaultValue": "\"Please use only letters, numbers, dashes and underscores\""
+    },
+    "invalidSymbolsErrorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Invalid symbols error description",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Description text shown when the link contains invalid symbols"
+      },
+      "attribute": "invalid-symbols-error-description",
+      "reflect": false,
+      "defaultValue": "\"Special symbols can break the link when sharing.\""
+    },
+    "restrictedWordErrorTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Restricted word error title",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Title text shown when the link contains a restricted word"
+      },
+      "attribute": "restricted-word-error-title",
+      "reflect": false,
+      "defaultValue": "\"Please try a different link\""
+    },
+    "restrictedWordErrorDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Restricted word error description",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Description text shown when the link contains a restricted word"
+      },
+      "attribute": "restricted-word-error-description",
+      "reflect": false,
+      "defaultValue": "\"This link contains a restricted word.\""
+    },
+    "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": "Text describing the edit limit"
+      },
+      "attribute": "edit-limit-text",
+      "reflect": false,
+      "defaultValue": "\"You can edit your link up to 5 times.\""
+    },
+    "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": "Message shown when the edit limit has been reached. Use {supportLink} as a placeholder for the support link."
+      },
+      "attribute": "edit-limit-reached-text",
+      "reflect": false,
+      "defaultValue": "\"5 edit limit reached. To make more changes, please contact {supportLink}.\""
+    },
+    "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": "Display text for the support link in the edit limit reached message"
+      },
+      "attribute": "support-link-text",
+      "reflect": false,
+      "defaultValue": "\"Support\""
+    },
+    "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": "Tooltip text shown when link customization is disabled"
+      },
+      "attribute": "customize-disabled-tooltip",
+      "reflect": false,
+      "defaultValue": "\"Link customization is not available.\""
+    },
     "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; customizeUrl?: boolean; customizeLinkLabel?: string; saveLabelText?: string; cancelLabelText?: string; successMessage?: string; isEditing?: boolean; editValue?: string; domainPrefix?: string; editsRemaining?: number; maxEdits?: number; limitReached?: boolean; validationError?: ValidationErrorInfo; isValidating?: boolean; isSaving?: boolean; showSuccess?: boolean; characterLimit?: number; charactersRemaining?: number; editLimitText?: string; editLimitReachedText?: 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"
           }
         }
       },
@@ -402,27 +867,72 @@ export class ShareLink {
   }; }
 }
 function useDemoShareLink(props) {
+  var _a;
   const [open, setOpen] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+  const [showSuccess, setShowSuccess] = useState(false);
   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);
+  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);
+      },
+    },
+    customizeUrl: props.customizeUrl,
+    customizeLinkLabel: props.customizeLinkLabel,
+    saveLabelText: props.saveLabelText,
+    cancelLabelText: props.cancelLabelText,
+    successMessage: props.successMessage,
+    isEditing,
+    editValue,
+    domainPrefix,
+    editsRemaining: 5,
+    maxEdits: 5,
+    limitReached: false,
+    validationError: null,
+    isValidating: false,
+    isSaving: false,
+    showSuccess,
+    characterLimit: 15,
+    charactersRemaining: 15 - editValue.length,
+    editLimitText: props.editLimitText,
+    editLimitReachedText: props.editLimitReachedText,
+    supportLinkText: props.supportLinkText,
+    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);
+      setShowSuccess(true);
+      setTimeout(() => setShowSuccess(false), 3000);
+    },
+    onCancel: () => {
+      setIsEditing(false);
+      setEditValue("");
     },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  };
+  return deepmerge(baseProps, props.demoData || {}, {
+    arrayMerge: (_, a) => a,
+  });
 }