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

package/dist/cjs/{ShadowViewAddon-a26deae6.js → ShadowViewAddon-f5a79b05.js}

@@ -3024,7 +3024,7 @@ function ReferralIframeView(props) {
   const styleString = sheet.toString();
   return (index.h("div", { class: sheet.classes.Container },
     index.h("style", { type: "text/css" }, styleString),
-    index.h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?${encodeURIComponent(content.codeParam)}=${data.shareCode}` })));
+    index.h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
 }
 
 const CheckMark = () => (index.h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -4229,6 +4229,178 @@ function useShareButton(props) {
   };
 }
 
+const vanillaStyle$6 = `
+  :host {
+    display: block;
+    width: 100%;
+  }
+`;
+function ShareLinkView(props) {
+  const { copyTextViewProps, customizeUrl, customizeLinkLabel, saveLabelText, cancelLabelText, successMessage, isEditing, editValue, domainPrefix, editsRemaining, maxEdits, limitReached, validationError, isValidating, isSaving, showSuccess, characterLimit, charactersRemaining, editLimitText, editLimitReachedText, supportLinkText, customizeDisabled, customizeDisabledTooltip, onCustomizeClick, onEditValueChange, onSave, onCancel, } = props;
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-x-small)",
+      width: "100%",
+    },
+    CustomizeLinkText: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      cursor: "pointer",
+      color: "var(--sl-color-neutral-900)",
+      textAlign: "left",
+      "&:hover": {
+        textDecoration: "underline",
+      },
+    },
+    CustomizeLinkDisabled: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      color: "var(--sl-color-neutral-400)",
+      cursor: "default",
+      textAlign: "left",
+    },
+    EditContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-x-small)",
+      width: "100%",
+    },
+    EditInputWrapper: {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-input-border-color, #d1d5db)",
+      borderRadius: "var(--sqm-border-radius-normal, 4px)",
+      background: "var(--sqm-input-background, #fff)",
+      overflow: "hidden",
+      "&:focus-within": {
+        borderColor: "#999999",
+        boxShadow: "0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color)",
+      },
+    },
+    DomainPrefix: {
+      padding: "0 0 0 var(--sl-spacing-medium)",
+      fontSize: "var(--sl-font-size-medium)",
+      color: "var(--sl-color-neutral-500)",
+      whiteSpace: "nowrap",
+      userSelect: "none",
+      lineHeight: "var(--sl-input-height-medium)",
+    },
+    EditInput: {
+      flex: "1",
+      border: "none",
+      outline: "none",
+      padding: "0 var(--sl-spacing-medium) 0 0",
+      fontSize: "var(--sl-font-size-medium)",
+      fontFamily: "var(--sl-font-sans)",
+      color: "var(--sl-input-color)",
+      background: "transparent",
+      lineHeight: "var(--sl-input-height-medium)",
+      minWidth: "0",
+    },
+    EditLabel: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-color-neutral-500)",
+    },
+    HelperText: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-color-neutral-500)",
+    },
+    ErrorText: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sqm-danger-color-text, #dc2626)",
+    },
+    SuccessText: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      color: "var(--sl-color-success-600, #16a34a)",
+    },
+    ActionRow: {
+      display: "flex",
+      gap: "var(--sl-spacing-medium)",
+      alignItems: "center",
+    },
+    SaveButton: {
+      cursor: "pointer",
+      fontFamily: "var(--sl-font-sans)",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
+      borderRadius: "var(--sqm-border-radius-normal, 4px)",
+      border: "1px solid var(--sl-color-neutral-900)",
+      background: "var(--sl-color-neutral-900)",
+      color: "#fff",
+      "&:disabled": {
+        opacity: "0.5",
+        cursor: "default",
+      },
+    },
+    CancelButton: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      cursor: "pointer",
+      background: "none",
+      border: "none",
+      padding: "0",
+      fontFamily: "var(--sl-font-sans)",
+      color: "var(--sl-color-neutral-500)",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const errorMessageType = (validationError === null || validationError === void 0 ? void 0 : validationError.code) === "LINK_TAKEN" ? "info" : "warning";
+  const showCharactersRemaining = charactersRemaining <= 7;
+  // Editing state
+  if (isEditing) {
+    return (index.h("div", { class: sheet.classes.Container },
+      index.h("style", { type: "text/css" },
+        styleString,
+        vanillaStyle$6),
+      index.h("p", { class: sheet.classes.EditLabel }, "Enter your link"),
+      index.h("div", { class: sheet.classes.EditInputWrapper },
+        index.h("span", { class: sheet.classes.DomainPrefix }, domainPrefix),
+        index.h("input", { class: sheet.classes.EditInput, type: "text", value: editValue, onInput: (e) => onEditValueChange(e.target.value), disabled: isSaving, maxLength: characterLimit })),
+      index.h("p", { class: sheet.classes.HelperText },
+        editLimitText,
+        showCharactersRemaining &&
+          ` Characters remaining: ${charactersRemaining}`),
+      validationError && (index.h("sqm-form-message", { type: errorMessageType },
+        index.h("p", { part: "alert-title" }, validationError.title),
+        validationError.description)),
+      isValidating && index.h("p", { class: sheet.classes.HelperText }, "Validating..."),
+      index.h("div", { class: sheet.classes.ActionRow },
+        index.h("button", { class: sheet.classes.SaveButton, onClick: onSave, disabled: isSaving || isValidating || !!validationError || !editValue }, isSaving ? "Saving..." : saveLabelText),
+        index.h("button", { class: sheet.classes.CancelButton, onClick: onCancel, disabled: isSaving }, cancelLabelText))));
+  }
+  // Default / Customized / Limit reached states
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle$6),
+    index.h(copyTextView.CopyTextView, Object.assign({}, copyTextViewProps)),
+    showSuccess && index.h("p", { class: sheet.classes.SuccessText }, successMessage),
+    customizeUrl && (customizeDisabled ? (index.h("sl-tooltip", { content: customizeDisabledTooltip, placement: "top", style: { display: "inline-block", width: "fit-content" } },
+      index.h("p", { class: sheet.classes.CustomizeLinkDisabled }, customizeLinkLabel))) : (index.h("p", { class: limitReached
+        ? sheet.classes.CustomizeLinkDisabled
+        : sheet.classes.CustomizeLinkText, onClick: limitReached ? undefined : onCustomizeClick }, customizeLinkLabel))),
+    customizeUrl && limitReached && (index.h("p", { class: sheet.classes.HelperText }, global.intl.formatMessage({
+      id: "editLimitReached",
+      defaultMessage: editLimitReachedText,
+    }, {
+      supportLink: (index.h("a", { target: "_blank", href: "https://example.com" }, supportLinkText)),
+    })))));
+}
+
+const MAX_EDITS = 5;
+const CHARACTER_LIMIT = 15;
 const MessageLinkQuery$1 = index_module.dist.gql `
   query ($programId: ID, $engagementMedium: UserEngagementMedium!) {
     user: viewer {
@@ -4247,19 +4419,119 @@ const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
     createUserAnalyticsEvent(eventMeta: $eventMeta)
   }
 `;
+const ADD_SHARE_LINK_CODE = index_module.dist.gql `
+  mutation ($addShareLinkCodeInput: AddShareLinkCodeInput!) {
+    addShareLinkCode(addShareLinkCodeInput: $addShareLinkCodeInput) {
+      linkCode {
+        linkCode
+        shortUrl
+        referralCode {
+          code
+        }
+      }
+    }
+  }
+`;
+// TODO: Replace with actual validation query when backend is ready
+const VALIDATE_LINK_CODE = index_module.dist.gql `
+  query validateLinkCode($linkCode: String!, $programId: ID) {
+    validateShareLinkCode(linkCode: $linkCode, programId: $programId) {
+      valid
+      message
+    }
+  }
+`;
+const GET_LINK_DOMAIN = index_module.dist.gql `
+  query getLinkDomain {
+    tenantSettings {
+      primaryLinkDomain {
+        host
+      }
+    }
+  }
+`;
+// TODO: Replace with actual edit count query when backend is ready
+const SHARE_LINK_EDIT_COUNT = index_module.dist.gql `
+  query shareLinkEditCount($programId: ID) {
+    viewer {
+      ... on User {
+        shareLinkCodes(programId: $programId) {
+          totalCount
+        }
+      }
+    }
+  }
+`;
+function parseDomainPrefix(url) {
+  try {
+    const parsed = new URL(url);
+    return parsed.origin + "/";
+  }
+  catch {
+    return url;
+  }
+}
+function parsePathSuffix(url) {
+  try {
+    const parsed = new URL(url);
+    // Remove leading slash
+    return parsed.pathname.slice(1) + parsed.search + parsed.hash;
+  }
+  catch {
+    return "";
+  }
+}
 function useShareLink(props) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f;
   const { programId = index_module.H() } = props;
   const user = index_module.J();
   const engagementMedium = index_module.B();
   const contextData = index_module.Fn(useReferralCodes.REFERRAL_CODES_NAMESPACE);
-  const { data } = index_module.wn(MessageLinkQuery$1, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
+  const { data, refetch } = index_module.wn(MessageLinkQuery$1, { programId, engagementMedium }, !(user === null || user === void 0 ? void 0 : user.jwt) || !!props.linkOverride || (contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) !== undefined);
   const [sendLoadEvent] = index_module.$e(WIDGET_ENGAGEMENT_EVENT);
-  const [setCopied, copiedRes] = index_module.$e(useReferralCodes.SET_CODE_COPIED);
+  const [setCopied] = index_module.$e(useReferralCodes.SET_CODE_COPIED);
+  const [addShareLinkCode, { loading: isSaving }] = index_module.$e(ADD_SHARE_LINK_CODE);
+  const { data: linkDomainData } = index_module.wn(GET_LINK_DOMAIN, {}, !(user === null || user === void 0 ? void 0 : user.jwt) || !props.customizeUrl);
+  // TODO: Wire up when backend query is ready
+  const { data: editCountData } = index_module.wn(SHARE_LINK_EDIT_COUNT, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt) || !props.customizeUrl);
   const copyString = (_b = ((contextData === null || contextData === void 0 ? void 0 : contextData.shareLink) || ((_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink))) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
   const [open, setOpen] = domContextHooks_module.useState(false);
+  const [isEditing, setIsEditing] = domContextHooks_module.useState(false);
+  const [editValue, setEditValue] = domContextHooks_module.useState("");
+  const [validationError, setValidationError] = domContextHooks_module.useState(null);
+  const [isValidating, setIsValidating] = domContextHooks_module.useState(false);
+  const [showSuccess, setShowSuccess] = domContextHooks_module.useState(false);
+  const debounceTimerRef = domContextHooks_module.useRef(undefined);
+  const domainPrefix = parseDomainPrefix(copyString);
+  const hasPrimaryLinkDomain = ((_c = linkDomainData === null || linkDomainData === void 0 ? void 0 : linkDomainData.tenantSettings) === null || _c === void 0 ? void 0 : _c.primaryLinkDomain) != null;
+  const customizeDisabled = !hasPrimaryLinkDomain;
+  const editCount = (_f = (_e = (_d = editCountData === null || editCountData === void 0 ? void 0 : editCountData.viewer) === null || _d === void 0 ? void 0 : _d.shareLinkCodes) === null || _e === void 0 ? void 0 : _e.totalCount) !== null && _f !== void 0 ? _f : 0;
+  const editsRemaining = Math.max(0, MAX_EDITS - editCount);
+  const limitReached = editsRemaining <= 0;
+  function mapErrorCodeToInfo(errorCode) {
+    if (!errorCode)
+      return null;
+    const errorMap = {
+      LINK_TAKEN: {
+        code: "LINK_TAKEN",
+        title: props.linkTakenErrorTitle,
+        description: props.linkTakenErrorDescription,
+      },
+      INVALID_SYMBOLS: {
+        code: "INVALID_SYMBOLS",
+        title: props.invalidSymbolsErrorTitle,
+        description: props.invalidSymbolsErrorDescription,
+      },
+      RESTRICTED_WORD: {
+        code: "RESTRICTED_WORD",
+        title: props.restrictedWordErrorTitle,
+        description: props.restrictedWordErrorDescription,
+      },
+    };
+    return errorMap[errorCode];
+  }
   async function onClick() {
     if (contextData) {
       await setCopied({ referralCode: contextData.referralCode });
@@ -4283,7 +4555,101 @@ function useShareLink(props) {
       },
     });
   }
-  return { ...props, onClick, open, copyString: copyString };
+  function onCustomizeClick() {
+    if (limitReached || customizeDisabled)
+      return;
+    setIsEditing(true);
+    setEditValue(editCount === 0 ? "" : parsePathSuffix(copyString));
+    setValidationError(null);
+  }
+  function onEditValueChange(value) {
+    const trimmed = value.slice(0, CHARACTER_LIMIT);
+    setEditValue(trimmed);
+    setValidationError(null);
+    if (debounceTimerRef.current)
+      clearTimeout(debounceTimerRef.current);
+    if (!trimmed) {
+      setIsValidating(false);
+      return;
+    }
+    setIsValidating(true);
+    debounceTimerRef.current = setTimeout(async () => {
+      // TODO: Call actual validation query when backend is ready
+      // Example: const result = await validateLinkCode({ linkCode: trimmed, programId });
+      // if (!result?.validateShareLinkCode?.valid) {
+      //   setValidationError(mapErrorCodeToInfo(result.validateShareLinkCode.errorCode));
+      // }
+      setIsValidating(false);
+    }, 2000);
+  }
+  async function onSave() {
+    var _a, _b;
+    if (!editValue || validationError || isValidating)
+      return;
+    try {
+      await addShareLinkCode({
+        addShareLinkCodeInput: {
+          userId: user === null || user === void 0 ? void 0 : user.id,
+          accountId: user === null || user === void 0 ? void 0 : user.accountId,
+          programId,
+          linkCode: editValue,
+        },
+      });
+      setIsEditing(false);
+      setShowSuccess(true);
+      await refetch();
+      setTimeout(() => setShowSuccess(false), 3000);
+    }
+    catch (e) {
+      const errorCode = (_a = e === null || e === void 0 ? void 0 : e.extensions) === null || _a === void 0 ? void 0 : _a.code;
+      setValidationError((_b = mapErrorCodeToInfo(errorCode)) !== null && _b !== void 0 ? _b : {
+        code: null,
+        title: "Error",
+        description: (e === null || e === void 0 ? void 0 : e.message) || "Failed to save custom link. Please try again.",
+      });
+    }
+  }
+  function onCancel() {
+    setIsEditing(false);
+    setEditValue("");
+    setValidationError(null);
+    setIsValidating(false);
+  }
+  return {
+    copyTextViewProps: {
+      ...props,
+      onClick,
+      open,
+      copyString,
+    },
+    customizeUrl: props.customizeUrl,
+    customizeLinkLabel: props.customizeLinkLabel,
+    saveLabelText: props.saveLabelText,
+    cancelLabelText: props.cancelLabelText,
+    successMessage: props.successMessage,
+    isEditing,
+    editValue,
+    domainPrefix,
+    editsRemaining,
+    maxEdits: MAX_EDITS,
+    limitReached,
+    validationError,
+    isValidating,
+    isSaving,
+    showSuccess,
+    characterLimit: CHARACTER_LIMIT,
+    charactersRemaining: CHARACTER_LIMIT - editValue.length,
+    editLimitText: props.editLimitText,
+    editLimitReachedText: props.editLimitReachedText,
+    supportLinkText: props.supportLinkText,
+    // customizeDisabled,
+    customizeDisabled: false,
+    customizeDisabledTooltip: props.customizeDisabledTooltip,
+    onCustomizeClick,
+    onEditValueChange,
+    onSave,
+    onCancel,
+  };
 }
 
 const style$9 = {
@@ -4324,7 +4690,7 @@ const style$9 = {
   },
   ErrorStyle: mixins.ErrorStyles,
 };
-const vanillaStyle$6 = `
+const vanillaStyle$7 = `
 sqm-portal-register {
   margin: 0 auto;
   width: 100%;
@@ -4356,7 +4722,7 @@ function LeadFormView(props) {
   return (index.h(index.Fragment, null,
     states.success && (index.h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base" },
       index.h("style", { type: "text/css" },
-        vanillaStyle$6,
+        vanillaStyle$7,
         styleString$9),
       index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
       index.h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
@@ -4366,7 +4732,7 @@ function LeadFormView(props) {
       index.h("sl-button", { class: sheet$9.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
     index.h("div", { class: sheet$9.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
       index.h("style", { type: "text/css" },
-        vanillaStyle$6,
+        vanillaStyle$7,
         styleString$9),
       index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
       index.h("sl-form", { class: sheet$9.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
@@ -4419,7 +4785,7 @@ const style$a = {
     "margin-bottom": "var(--sl-spacing-large)",
   },
 };
-const vanillaStyle$7 = `
+const vanillaStyle$8 = `
 :host {
   margin: 0 auto;
   width: 100%;
@@ -4448,7 +4814,7 @@ function LeadDropdownFieldView(props) {
   });
   return (index.h("div", { class: sheet$a.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
-      vanillaStyle$7,
+      vanillaStyle$8,
       styleString$a),
     index.h("sl-select", Object.assign({ style: { maxHeight: "100px" }, exportparts: "label: input-label, base: input-base", label: `${content.dropdownLabel}${content.dropdownOptional ? ` ${content.optionalLabel}` : ""}`, name: `/${content.dropdownName}`, multiple: content.multiple }, (!content.dropdownOptional ? { required: true } : []), { disabled: ((_b = states.leadFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
         if (!value && !content.dropdownOptional) {
@@ -4523,6 +4889,7 @@ exports.ReferralIframeView = ReferralIframeView;
 exports.RewardExchangeView = RewardExchangeView;
 exports.ShadowViewAddon = ShadowViewAddon;
 exports.ShareButtonView = ShareButtonView;
+exports.ShareLinkView = ShareLinkView;
 exports.StatContainerView = StatContainerView;
 exports.TaskCardView = TaskCardView;
 exports.chooseAmountFixed = chooseAmountFixed;