@xyo-network/react-xns 3.0.14 → 3.0.15

package/dist/browser/components/XnsNameCapture/XnsNameCaptureWithContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XnsNameCaptureWithContext.d.ts","sourceRoot":"","sources":["../../../../src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAGrD,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAanE,CAAA"}
+{"version":3,"file":"XnsNameCaptureWithContext.d.ts","sourceRoot":"","sources":["../../../../src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAGrD,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAenE,CAAA"}

package/dist/browser/index.mjs

@@ -291,14 +291,17 @@ var XnsNameCapture = /* @__PURE__ */ __name(({ autoFocus = false, buttonText = "
 }, "XnsNameCapture");
 
 // src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx
+import { useUserEvents } from "@xylabs/react-pixel";
 import React5, { useMemo as useMemo3 } from "react";
 var XnsNameCaptureWithContext = /* @__PURE__ */ __name((props) => {
   const routingProps = useXnsNameCaptureRouting(props);
   const providersProps = useXnsNameCaptureProviders(routingProps);
+  const userEvents = useUserEvents(false);
   const updatedProps = useMemo3(() => ({
     ...props,
     ...routingProps,
-    ...providersProps
+    ...providersProps,
+    userEvents: props.userEvents ?? userEvents
   }), [
     providersProps
   ]);

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/EstimateName/EstimateNameTextField.tsx","../../src/components/XnsNameCapture/Errors.tsx","../../src/components/XnsNameCapture/hooks/routing/useXnsNameCaptureRouting.ts","../../src/components/XnsNameCapture/hooks/routing/useXnsNameFromLocation.ts","../../src/components/XnsNameCapture/hooks/useXnsNameCaptureProviders.ts","../../src/components/XnsNameCapture/SecondaryLink.tsx","../../src/components/XnsNameCapture/XnsNameCapture.tsx","../../src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx"],"sourcesContent":["import type { StandardTextFieldProps, TextFieldProps } from '@mui/material'\nimport {\n  alpha, TextField, useTheme,\n} from '@mui/material'\nimport { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport React, { useState } from 'react'\n\nexport interface XnsEstimateNameTextFieldProps {\n  maskOutput?: boolean\n}\n\nexport const XnsEstimateNameTextField: React.FC<XnsEstimateNameTextFieldProps & TextFieldProps> = ({\n  maskOutput = true, onChange: onChangeProp, onBlur: onBlurProp, ...props\n}) => {\n  const theme = useTheme()\n  const [validLength, setValidLength] = useState(false)\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  // override onChange to mask the input and update the event value\n  const handleChange: StandardTextFieldProps['onChange'] = (event) => {\n    if (maskOutput) {\n      const value = event.target.value\n      event.target.value = XnsNameHelper.mask(value)\n    }\n    onChangeProp?.(event)\n\n    if (inputRef.current) {\n      setValidLength(inputRef.current.value.length >= MIN_DOMAIN_LENGTH)\n    }\n  }\n\n  const handleBlur: StandardTextFieldProps['onBlur'] = (event) => {\n    if (maskOutput) {\n      const value = event.target.value\n      event.target.value = XnsNameHelper.mask(value, { maskStartEndHyphens: true })\n    }\n    onBlurProp?.(event)\n  }\n\n  return (\n    <TextField\n      inputProps={{ style: { color: validLength ? theme.palette.text.primary : alpha(theme.palette.text.primary, 0.5) } }}\n      inputRef={inputRef}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      {...props}\n    />\n  )\n}\n","import {\n  Alert, Snackbar, useMediaQuery, useTheme,\n} from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nexport interface XnsNameCaptureErrorsProps {\n  error?: Error\n  errorUi?: 'alert' | 'toast'\n  resetError?: () => void\n}\n\nexport const XnsNameCaptureErrors: React.FC<XnsNameCaptureErrorsProps> = ({\n  error, errorUi, resetError,\n}) => {\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  return (\n    <>\n      {(errorUi === 'toast')\n        ? (\n            <Snackbar\n              open={!!error}\n              message={error?.toString()}\n              autoHideDuration={3000}\n              onClose={() => resetError?.()}\n              anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n            >\n              <Alert\n                severity=\"error\"\n                sx={{\n                  width: '100%', display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden',\n                }}\n              >\n                {error?.message}\n              </Alert>\n            </Snackbar>\n          )\n        : (() => {\n            // setTimeout(() => setError(undefined), 1500)\n            return (\n              <FlexRow alignSelf=\"stretch\">\n                <Alert\n                  severity=\"error\"\n                  sx={{ display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden' }}\n                >\n                  {error?.message}\n                </Alert>\n              </FlexRow>\n            )\n          })()}\n    </>\n  )\n}\n","import { useMemo } from 'react'\nimport { useNavigate, useSearchParams } from 'react-router-dom'\n\nimport type { XnsNameCaptureProps } from '../../Props.ts'\nimport { useXnsNameFromLocation } from './useXnsNameFromLocation.ts'\n\nexport const useXnsNameCaptureRouting = (props: XnsNameCaptureProps) => {\n  const [params] = useSearchParams()\n\n  const navigate = useNavigate()\n\n  const [name, error] = useXnsNameFromLocation()\n\n  return useMemo(() => ({\n    ...props,\n    defaultXnsName: name,\n    routingError: error,\n    navigate: props.navigate ?? ((to: string) => navigate(to)),\n    paramsString: props.paramsString ? `${props.paramsString}${params.toString()}` : params.toString(),\n  }), [props, params, name, error])\n}\n","import { useLocation } from 'react-router-dom'\n\n/**\n * Assumes the user was redirected with a link that contains a username query parameter.\n * @returns The xNS name from the URI username query parameter.\n */\nexport const useXnsNameFromLocation = (): [name: string | undefined, error: Error | undefined] => {\n  const location = useLocation()\n  const search = new URLSearchParams(location.search)\n  const rawName = (search.get('xnsname') ?? search.get('name') ?? search.get('username') ?? '').toLowerCase()\n  switch (rawName?.split('.').length) {\n    case 1: {\n      return [rawName, undefined]\n    }\n    case 2: {\n      const rawNameParts = rawName.split('.')\n      if (rawNameParts[1] !== 'xyo') {\n        return [, new Error('Invalid xNS name [Bad root]')]\n      }\n      return [rawNameParts[0], undefined]\n    }\n    default: {\n      return [, new Error('Invalid xNS name [Too many parts]')]\n    }\n  }\n}\n","import { useMixpanel } from '@xylabs/react-mixpanel'\nimport { useMemo } from 'react'\n\nimport type { XnsNameCaptureProps } from '../Props.ts'\n\nexport const useXnsNameCaptureProviders = (props: XnsNameCaptureProps) => {\n  const mixpanel = useMixpanel()\n\n  return useMemo(() => ({\n    ...props,\n    mixpanel: props.mixpanel ?? mixpanel,\n  }), [props, mixpanel])\n}\n","import { ArrowForwardRounded } from '@mui/icons-material'\nimport { Stack } from '@mui/material'\nimport type { LinkExProps } from '@xylabs/react-link'\nimport { LinkEx } from '@xylabs/react-link'\nimport { XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport type { Dispatch } from 'react'\nimport React from 'react'\n\nimport type {\n  XnsNameCaptureBuyCallbacks, XnsNameCaptureRoutingProps, XnsNameCaptureTrackingProps,\n} from './Props.ts'\n\nexport interface XnsCaptureSecondaryLinkProps extends XnsNameCaptureTrackingProps, XnsNameCaptureRoutingProps, XnsNameCaptureBuyCallbacks, LinkExProps {\n  event?: string\n  funnel?: string\n  placement?: string\n  setError?: Dispatch<Error | undefined>\n  text?: string\n  xnsName: string\n}\n\nexport const XnsCaptureSecondaryLink: React.FC<XnsCaptureSecondaryLinkProps> = ({\n  event = 'Click to Reservation',\n  funnel = 'xns',\n  mixpanel,\n  navigate,\n  onCaptureName,\n  paramsString = '',\n  placement = '',\n  setError,\n  text = 'Or make a free reservation',\n  to = '/xns/reservation',\n  userEvents,\n  xnsName,\n  ...props\n}) => {\n  return (\n    <LinkEx\n      paddingX={0}\n      color=\"inherit\"\n      style={{ textDecoration: 'underline', textUnderlineOffset: '5px' }}\n      onClick={async () => {\n        mixpanel?.track(event, {\n          Funnel: funnel,\n          Placement: placement,\n        })\n        const formattedXnsName = `${xnsName}.xyo`\n        const helper = XnsNameHelper.fromString(formattedXnsName)\n        const [valid, errors] = await helper.validate()\n        if (valid) {\n          await userEvents?.userClick({ elementName: event, elementType: 'xns-cta' })\n          navigate?.(`${to}?username=${xnsName}${paramsString}`)\n          await onCaptureName?.(xnsName)\n        } else {\n          setError?.(new Error(errors.join(', ')))\n        }\n      }}\n      {...props}\n    >\n      <Stack flexDirection=\"row\" gap={0.5} alignItems=\"center\" sx={{ cursor: 'pointer' }}>\n        {text}\n        <ArrowForwardRounded />\n      </Stack>\n    </LinkEx>\n  )\n}\n","import { KeyboardArrowRightRounded } from '@mui/icons-material'\nimport type { StandardTextFieldProps } from '@mui/material'\nimport { useMediaQuery, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport type { KeyboardEventHandler } from 'react'\nimport React, { useCallback, useState } from 'react'\n\nimport { XnsEstimateNameTextField } from '../EstimateName/index.ts'\nimport { XnsNameCaptureErrors } from './Errors.tsx'\nimport type { XnsNameCaptureProps } from './Props.ts'\nimport { XnsCaptureSecondaryLink } from './SecondaryLink.js'\n\nexport const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({\n  autoFocus = false,\n  buttonText = 'Buy My Name',\n  children,\n  defaultXnsName,\n  errorUi = 'alert',\n  event = 'Click to Checkout',\n  funnel = 'xns',\n  mixpanel,\n  mobileButtonText = 'Buy',\n  navigate,\n  onCaptureName: onCaptureNameProp,\n  paramsString = '',\n  placement = '',\n  routingError,\n  showSecondary = false,\n  to = '/xns/estimation',\n  userEvents,\n  ...props\n}) => {\n  const [xnsName, setXnsName] = useState<string>(() => defaultXnsName ?? '')\n  const [error, setError] = useState<Error | undefined>(routingError)\n\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  const captureDisabled = !xnsName || xnsName.length < MIN_DOMAIN_LENGTH\n\n  const handleChange: StandardTextFieldProps['onChange'] = (event) => {\n    const NsName = XnsNameHelper.mask(event.target.value)\n    setXnsName(NsName)\n    setError(undefined)\n  }\n\n  const onCaptureName = useCallback(async () => {\n    if (captureDisabled) return\n    mixpanel?.track(event, {\n      Funnel: funnel,\n      Placement: placement,\n    })\n    const formattedXnsName = `${xnsName}.xyo`\n    const helper = XnsNameHelper.fromString(formattedXnsName)\n    const [valid, errors] = await helper.validate()\n    if (valid) {\n      await userEvents?.userClick({ elementName: event, elementType: 'xns-cta' })\n      await onCaptureNameProp?.(xnsName)\n      navigate?.(`${to}?username=${xnsName}${paramsString}`)\n    } else {\n      setError(new Error(errors.join(', ')))\n    }\n  }, [event, funnel, mixpanel, paramsString, placement, to, userEvents, xnsName])\n\n  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(async (event) => {\n    if (event.key === 'Enter' && !captureDisabled) {\n      await onCaptureName?.()\n    }\n  }, [captureDisabled, onCaptureName])\n\n  return (\n    <FlexCol gap={showSecondary ? 1.5 : 0} alignItems=\"center\" {...props}>\n      <FlexRow gap={1}>\n        <XnsEstimateNameTextField\n          autoFocus={autoFocus}\n          label=\"xNS Name\"\n          variant=\"outlined\"\n          size=\"small\"\n          value={xnsName ?? ''}\n          onKeyDown={onKeyDown}\n          onChange={handleChange}\n          onBlur={handleChange}\n        />\n        <ButtonEx\n          disabled={captureDisabled}\n          variant=\"contained\"\n          color=\"success\"\n          endIcon={<KeyboardArrowRightRounded />}\n          onClick={onCaptureName}\n        >\n          {isMobile ? mobileButtonText : buttonText}\n        </ButtonEx>\n      </FlexRow>\n      {(showSecondary === true)\n        ? (\n            <XnsCaptureSecondaryLink\n              xnsName={xnsName}\n              placement={placement}\n              funnel={funnel}\n              setError={setError}\n            />\n          )\n        : null}\n      {\n        // eslint-disable-next-line unicorn/prefer-logical-operator-over-ternary\n        showSecondary ? showSecondary : null\n      }\n      {children}\n      <XnsNameCaptureErrors error={error} errorUi={errorUi} resetError={() => setError(undefined)} />\n    </FlexCol>\n  )\n}\n","import React, { useMemo } from 'react'\n\nimport { useXnsNameCaptureProviders, useXnsNameCaptureRouting } from './hooks/index.ts'\nimport type { XnsNameCaptureProps } from './Props.ts'\nimport { XnsNameCapture } from './XnsNameCapture.tsx'\n\nexport const XnsNameCaptureWithContext: React.FC<XnsNameCaptureProps> = (props) => {\n  const routingProps = useXnsNameCaptureRouting(props)\n  const providersProps = useXnsNameCaptureProviders(routingProps)\n\n  const updatedProps = useMemo<XnsNameCaptureProps>(() => ({\n    ...props,\n    ...routingProps,\n    ...providersProps,\n  }), [providersProps])\n\n  return (\n    <XnsNameCapture {...updatedProps} />\n  )\n}\n"],"mappings":"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","names":["alpha","TextField","useTheme","MIN_DOMAIN_LENGTH","XnsNameHelper","React","useState","XnsEstimateNameTextField","maskOutput","onChange","onChangeProp","onBlur","onBlurProp","props","theme","useTheme","validLength","setValidLength","useState","inputRef","React","useRef","handleChange","event","value","target","XnsNameHelper","mask","current","length","MIN_DOMAIN_LENGTH","handleBlur","maskStartEndHyphens","TextField","inputProps","style","color","palette","text","primary","alpha","Alert","Snackbar","useMediaQuery","useTheme","FlexRow","React","XnsNameCaptureErrors","error","errorUi","resetError","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","React","Snackbar","open","message","toString","autoHideDuration","onClose","anchorOrigin","vertical","horizontal","Alert","severity","sx","width","display","undefined","visibility","FlexRow","alignSelf","useMemo","useNavigate","useSearchParams","useLocation","useXnsNameFromLocation","location","useLocation","search","URLSearchParams","rawName","get","toLowerCase","split","length","undefined","rawNameParts","Error","useXnsNameCaptureRouting","props","params","useSearchParams","navigate","useNavigate","name","error","useXnsNameFromLocation","useMemo","defaultXnsName","routingError","to","paramsString","toString","useMixpanel","useMemo","useXnsNameCaptureProviders","props","mixpanel","useMixpanel","useMemo","ArrowForwardRounded","Stack","LinkEx","XnsNameHelper","React","XnsCaptureSecondaryLink","event","funnel","mixpanel","navigate","onCaptureName","paramsString","placement","setError","text","to","userEvents","xnsName","props","React","LinkEx","paddingX","color","style","textDecoration","textUnderlineOffset","onClick","track","Funnel","Placement","formattedXnsName","helper","XnsNameHelper","fromString","valid","errors","validate","userClick","elementName","elementType","Error","join","Stack","flexDirection","gap","alignItems","sx","cursor","ArrowForwardRounded","KeyboardArrowRightRounded","useMediaQuery","useTheme","ButtonEx","FlexCol","FlexRow","MIN_DOMAIN_LENGTH","XnsNameHelper","React","useCallback","useState","XnsNameCapture","autoFocus","buttonText","children","defaultXnsName","errorUi","event","funnel","mixpanel","mobileButtonText","navigate","onCaptureName","onCaptureNameProp","paramsString","placement","routingError","showSecondary","to","userEvents","props","xnsName","setXnsName","useState","error","setError","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","captureDisabled","length","MIN_DOMAIN_LENGTH","handleChange","NsName","XnsNameHelper","mask","target","value","undefined","useCallback","track","Funnel","Placement","formattedXnsName","helper","fromString","valid","errors","validate","userClick","elementName","elementType","Error","join","onKeyDown","key","React","FlexCol","gap","alignItems","FlexRow","XnsEstimateNameTextField","label","variant","size","onChange","onBlur","ButtonEx","disabled","color","endIcon","KeyboardArrowRightRounded","onClick","XnsCaptureSecondaryLink","XnsNameCaptureErrors","resetError","React","useMemo","XnsNameCaptureWithContext","props","routingProps","useXnsNameCaptureRouting","providersProps","useXnsNameCaptureProviders","updatedProps","useMemo","React","XnsNameCapture"]}
+{"version":3,"sources":["../../src/components/EstimateName/EstimateNameTextField.tsx","../../src/components/XnsNameCapture/Errors.tsx","../../src/components/XnsNameCapture/hooks/routing/useXnsNameCaptureRouting.ts","../../src/components/XnsNameCapture/hooks/routing/useXnsNameFromLocation.ts","../../src/components/XnsNameCapture/hooks/useXnsNameCaptureProviders.ts","../../src/components/XnsNameCapture/SecondaryLink.tsx","../../src/components/XnsNameCapture/XnsNameCapture.tsx","../../src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx"],"sourcesContent":["import type { StandardTextFieldProps, TextFieldProps } from '@mui/material'\nimport {\n  alpha, TextField, useTheme,\n} from '@mui/material'\nimport { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport React, { useState } from 'react'\n\nexport interface XnsEstimateNameTextFieldProps {\n  maskOutput?: boolean\n}\n\nexport const XnsEstimateNameTextField: React.FC<XnsEstimateNameTextFieldProps & TextFieldProps> = ({\n  maskOutput = true, onChange: onChangeProp, onBlur: onBlurProp, ...props\n}) => {\n  const theme = useTheme()\n  const [validLength, setValidLength] = useState(false)\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  // override onChange to mask the input and update the event value\n  const handleChange: StandardTextFieldProps['onChange'] = (event) => {\n    if (maskOutput) {\n      const value = event.target.value\n      event.target.value = XnsNameHelper.mask(value)\n    }\n    onChangeProp?.(event)\n\n    if (inputRef.current) {\n      setValidLength(inputRef.current.value.length >= MIN_DOMAIN_LENGTH)\n    }\n  }\n\n  const handleBlur: StandardTextFieldProps['onBlur'] = (event) => {\n    if (maskOutput) {\n      const value = event.target.value\n      event.target.value = XnsNameHelper.mask(value, { maskStartEndHyphens: true })\n    }\n    onBlurProp?.(event)\n  }\n\n  return (\n    <TextField\n      inputProps={{ style: { color: validLength ? theme.palette.text.primary : alpha(theme.palette.text.primary, 0.5) } }}\n      inputRef={inputRef}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      {...props}\n    />\n  )\n}\n","import {\n  Alert, Snackbar, useMediaQuery, useTheme,\n} from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nexport interface XnsNameCaptureErrorsProps {\n  error?: Error\n  errorUi?: 'alert' | 'toast'\n  resetError?: () => void\n}\n\nexport const XnsNameCaptureErrors: React.FC<XnsNameCaptureErrorsProps> = ({\n  error, errorUi, resetError,\n}) => {\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  return (\n    <>\n      {(errorUi === 'toast')\n        ? (\n            <Snackbar\n              open={!!error}\n              message={error?.toString()}\n              autoHideDuration={3000}\n              onClose={() => resetError?.()}\n              anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n            >\n              <Alert\n                severity=\"error\"\n                sx={{\n                  width: '100%', display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden',\n                }}\n              >\n                {error?.message}\n              </Alert>\n            </Snackbar>\n          )\n        : (() => {\n            // setTimeout(() => setError(undefined), 1500)\n            return (\n              <FlexRow alignSelf=\"stretch\">\n                <Alert\n                  severity=\"error\"\n                  sx={{ display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden' }}\n                >\n                  {error?.message}\n                </Alert>\n              </FlexRow>\n            )\n          })()}\n    </>\n  )\n}\n","import { useMemo } from 'react'\nimport { useNavigate, useSearchParams } from 'react-router-dom'\n\nimport type { XnsNameCaptureProps } from '../../Props.ts'\nimport { useXnsNameFromLocation } from './useXnsNameFromLocation.ts'\n\nexport const useXnsNameCaptureRouting = (props: XnsNameCaptureProps) => {\n  const [params] = useSearchParams()\n\n  const navigate = useNavigate()\n\n  const [name, error] = useXnsNameFromLocation()\n\n  return useMemo(() => ({\n    ...props,\n    defaultXnsName: name,\n    routingError: error,\n    navigate: props.navigate ?? ((to: string) => navigate(to)),\n    paramsString: props.paramsString ? `${props.paramsString}${params.toString()}` : params.toString(),\n  }), [props, params, name, error])\n}\n","import { useLocation } from 'react-router-dom'\n\n/**\n * Assumes the user was redirected with a link that contains a username query parameter.\n * @returns The xNS name from the URI username query parameter.\n */\nexport const useXnsNameFromLocation = (): [name: string | undefined, error: Error | undefined] => {\n  const location = useLocation()\n  const search = new URLSearchParams(location.search)\n  const rawName = (search.get('xnsname') ?? search.get('name') ?? search.get('username') ?? '').toLowerCase()\n  switch (rawName?.split('.').length) {\n    case 1: {\n      return [rawName, undefined]\n    }\n    case 2: {\n      const rawNameParts = rawName.split('.')\n      if (rawNameParts[1] !== 'xyo') {\n        return [, new Error('Invalid xNS name [Bad root]')]\n      }\n      return [rawNameParts[0], undefined]\n    }\n    default: {\n      return [, new Error('Invalid xNS name [Too many parts]')]\n    }\n  }\n}\n","import { useMixpanel } from '@xylabs/react-mixpanel'\nimport { useMemo } from 'react'\n\nimport type { XnsNameCaptureProps } from '../Props.ts'\n\nexport const useXnsNameCaptureProviders = (props: XnsNameCaptureProps) => {\n  const mixpanel = useMixpanel()\n\n  return useMemo(() => ({\n    ...props,\n    mixpanel: props.mixpanel ?? mixpanel,\n  }), [props, mixpanel])\n}\n","import { ArrowForwardRounded } from '@mui/icons-material'\nimport { Stack } from '@mui/material'\nimport type { LinkExProps } from '@xylabs/react-link'\nimport { LinkEx } from '@xylabs/react-link'\nimport { XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport type { Dispatch } from 'react'\nimport React from 'react'\n\nimport type {\n  XnsNameCaptureBuyCallbacks, XnsNameCaptureRoutingProps, XnsNameCaptureTrackingProps,\n} from './Props.ts'\n\nexport interface XnsCaptureSecondaryLinkProps extends XnsNameCaptureTrackingProps, XnsNameCaptureRoutingProps, XnsNameCaptureBuyCallbacks, LinkExProps {\n  event?: string\n  funnel?: string\n  placement?: string\n  setError?: Dispatch<Error | undefined>\n  text?: string\n  xnsName: string\n}\n\nexport const XnsCaptureSecondaryLink: React.FC<XnsCaptureSecondaryLinkProps> = ({\n  event = 'Click to Reservation',\n  funnel = 'xns',\n  mixpanel,\n  navigate,\n  onCaptureName,\n  paramsString = '',\n  placement = '',\n  setError,\n  text = 'Or make a free reservation',\n  to = '/xns/reservation',\n  userEvents,\n  xnsName,\n  ...props\n}) => {\n  return (\n    <LinkEx\n      paddingX={0}\n      color=\"inherit\"\n      style={{ textDecoration: 'underline', textUnderlineOffset: '5px' }}\n      onClick={async () => {\n        mixpanel?.track(event, {\n          Funnel: funnel,\n          Placement: placement,\n        })\n        const formattedXnsName = `${xnsName}.xyo`\n        const helper = XnsNameHelper.fromString(formattedXnsName)\n        const [valid, errors] = await helper.validate()\n        if (valid) {\n          await userEvents?.userClick({ elementName: event, elementType: 'xns-cta' })\n          navigate?.(`${to}?username=${xnsName}${paramsString}`)\n          await onCaptureName?.(xnsName)\n        } else {\n          setError?.(new Error(errors.join(', ')))\n        }\n      }}\n      {...props}\n    >\n      <Stack flexDirection=\"row\" gap={0.5} alignItems=\"center\" sx={{ cursor: 'pointer' }}>\n        {text}\n        <ArrowForwardRounded />\n      </Stack>\n    </LinkEx>\n  )\n}\n","import { KeyboardArrowRightRounded } from '@mui/icons-material'\nimport type { StandardTextFieldProps } from '@mui/material'\nimport { useMediaQuery, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport type { KeyboardEventHandler } from 'react'\nimport React, { useCallback, useState } from 'react'\n\nimport { XnsEstimateNameTextField } from '../EstimateName/index.ts'\nimport { XnsNameCaptureErrors } from './Errors.tsx'\nimport type { XnsNameCaptureProps } from './Props.ts'\nimport { XnsCaptureSecondaryLink } from './SecondaryLink.js'\n\nexport const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({\n  autoFocus = false,\n  buttonText = 'Buy My Name',\n  children,\n  defaultXnsName,\n  errorUi = 'alert',\n  event = 'Click to Checkout',\n  funnel = 'xns',\n  mixpanel,\n  mobileButtonText = 'Buy',\n  navigate,\n  onCaptureName: onCaptureNameProp,\n  paramsString = '',\n  placement = '',\n  routingError,\n  showSecondary = false,\n  to = '/xns/estimation',\n  userEvents,\n  ...props\n}) => {\n  const [xnsName, setXnsName] = useState<string>(() => defaultXnsName ?? '')\n  const [error, setError] = useState<Error | undefined>(routingError)\n\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  const captureDisabled = !xnsName || xnsName.length < MIN_DOMAIN_LENGTH\n\n  const handleChange: StandardTextFieldProps['onChange'] = (event) => {\n    const NsName = XnsNameHelper.mask(event.target.value)\n    setXnsName(NsName)\n    setError(undefined)\n  }\n\n  const onCaptureName = useCallback(async () => {\n    if (captureDisabled) return\n    mixpanel?.track(event, {\n      Funnel: funnel,\n      Placement: placement,\n    })\n    const formattedXnsName = `${xnsName}.xyo`\n    const helper = XnsNameHelper.fromString(formattedXnsName)\n    const [valid, errors] = await helper.validate()\n    if (valid) {\n      await userEvents?.userClick({ elementName: event, elementType: 'xns-cta' })\n      await onCaptureNameProp?.(xnsName)\n      navigate?.(`${to}?username=${xnsName}${paramsString}`)\n    } else {\n      setError(new Error(errors.join(', ')))\n    }\n  }, [event, funnel, mixpanel, paramsString, placement, to, userEvents, xnsName])\n\n  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(async (event) => {\n    if (event.key === 'Enter' && !captureDisabled) {\n      await onCaptureName?.()\n    }\n  }, [captureDisabled, onCaptureName])\n\n  return (\n    <FlexCol gap={showSecondary ? 1.5 : 0} alignItems=\"center\" {...props}>\n      <FlexRow gap={1}>\n        <XnsEstimateNameTextField\n          autoFocus={autoFocus}\n          label=\"xNS Name\"\n          variant=\"outlined\"\n          size=\"small\"\n          value={xnsName ?? ''}\n          onKeyDown={onKeyDown}\n          onChange={handleChange}\n          onBlur={handleChange}\n        />\n        <ButtonEx\n          disabled={captureDisabled}\n          variant=\"contained\"\n          color=\"success\"\n          endIcon={<KeyboardArrowRightRounded />}\n          onClick={onCaptureName}\n        >\n          {isMobile ? mobileButtonText : buttonText}\n        </ButtonEx>\n      </FlexRow>\n      {(showSecondary === true)\n        ? (\n            <XnsCaptureSecondaryLink\n              xnsName={xnsName}\n              placement={placement}\n              funnel={funnel}\n              setError={setError}\n            />\n          )\n        : null}\n      {\n        // eslint-disable-next-line unicorn/prefer-logical-operator-over-ternary\n        showSecondary ? showSecondary : null\n      }\n      {children}\n      <XnsNameCaptureErrors error={error} errorUi={errorUi} resetError={() => setError(undefined)} />\n    </FlexCol>\n  )\n}\n","import { useUserEvents } from '@xylabs/react-pixel'\nimport React, { useMemo } from 'react'\n\nimport { useXnsNameCaptureProviders, useXnsNameCaptureRouting } from './hooks/index.ts'\nimport type { XnsNameCaptureProps } from './Props.ts'\nimport { XnsNameCapture } from './XnsNameCapture.tsx'\n\nexport const XnsNameCaptureWithContext: React.FC<XnsNameCaptureProps> = (props) => {\n  const routingProps = useXnsNameCaptureRouting(props)\n  const providersProps = useXnsNameCaptureProviders(routingProps)\n  const userEvents = useUserEvents(false)\n\n  const updatedProps = useMemo<XnsNameCaptureProps>(() => ({\n    ...props,\n    ...routingProps,\n    ...providersProps,\n    userEvents: props.userEvents ?? userEvents,\n  }), [providersProps])\n\n  return (\n    <XnsNameCapture {...updatedProps} />\n  )\n}\n"],"mappings":"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","names":["alpha","TextField","useTheme","MIN_DOMAIN_LENGTH","XnsNameHelper","React","useState","XnsEstimateNameTextField","maskOutput","onChange","onChangeProp","onBlur","onBlurProp","props","theme","useTheme","validLength","setValidLength","useState","inputRef","React","useRef","handleChange","event","value","target","XnsNameHelper","mask","current","length","MIN_DOMAIN_LENGTH","handleBlur","maskStartEndHyphens","TextField","inputProps","style","color","palette","text","primary","alpha","Alert","Snackbar","useMediaQuery","useTheme","FlexRow","React","XnsNameCaptureErrors","error","errorUi","resetError","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","React","Snackbar","open","message","toString","autoHideDuration","onClose","anchorOrigin","vertical","horizontal","Alert","severity","sx","width","display","undefined","visibility","FlexRow","alignSelf","useMemo","useNavigate","useSearchParams","useLocation","useXnsNameFromLocation","location","useLocation","search","URLSearchParams","rawName","get","toLowerCase","split","length","undefined","rawNameParts","Error","useXnsNameCaptureRouting","props","params","useSearchParams","navigate","useNavigate","name","error","useXnsNameFromLocation","useMemo","defaultXnsName","routingError","to","paramsString","toString","useMixpanel","useMemo","useXnsNameCaptureProviders","props","mixpanel","useMixpanel","useMemo","ArrowForwardRounded","Stack","LinkEx","XnsNameHelper","React","XnsCaptureSecondaryLink","event","funnel","mixpanel","navigate","onCaptureName","paramsString","placement","setError","text","to","userEvents","xnsName","props","React","LinkEx","paddingX","color","style","textDecoration","textUnderlineOffset","onClick","track","Funnel","Placement","formattedXnsName","helper","XnsNameHelper","fromString","valid","errors","validate","userClick","elementName","elementType","Error","join","Stack","flexDirection","gap","alignItems","sx","cursor","ArrowForwardRounded","KeyboardArrowRightRounded","useMediaQuery","useTheme","ButtonEx","FlexCol","FlexRow","MIN_DOMAIN_LENGTH","XnsNameHelper","React","useCallback","useState","XnsNameCapture","autoFocus","buttonText","children","defaultXnsName","errorUi","event","funnel","mixpanel","mobileButtonText","navigate","onCaptureName","onCaptureNameProp","paramsString","placement","routingError","showSecondary","to","userEvents","props","xnsName","setXnsName","useState","error","setError","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","captureDisabled","length","MIN_DOMAIN_LENGTH","handleChange","NsName","XnsNameHelper","mask","target","value","undefined","useCallback","track","Funnel","Placement","formattedXnsName","helper","fromString","valid","errors","validate","userClick","elementName","elementType","Error","join","onKeyDown","key","React","FlexCol","gap","alignItems","FlexRow","XnsEstimateNameTextField","label","variant","size","onChange","onBlur","ButtonEx","disabled","color","endIcon","KeyboardArrowRightRounded","onClick","XnsCaptureSecondaryLink","XnsNameCaptureErrors","resetError","useUserEvents","React","useMemo","XnsNameCaptureWithContext","props","routingProps","useXnsNameCaptureRouting","providersProps","useXnsNameCaptureProviders","userEvents","useUserEvents","updatedProps","useMemo","React","XnsNameCapture"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-xns",
-  "version": "3.0.14",
+  "version": "3.0.15",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -48,6 +48,7 @@
     "@xylabs/react-flexbox": "^4.2.5",
     "@xylabs/react-link": "^4.2.5",
     "@xylabs/react-mixpanel": "^4.2.5",
+    "@xylabs/react-pixel": "^4.2.5",
     "@xyo-network/xns-record-payloadset-plugins": "^3.0.17",
     "mixpanel-browser": "^2.55.1"
   },
@@ -59,7 +60,7 @@
     "@types/mixpanel-browser": "^2.50.0",
     "@xylabs/ts-scripts-yarn3": "^4.0.7",
     "@xylabs/tsconfig-react": "^4.0.7",
-    "@xyo-network/react-storybook": "^3.0.14",
+    "@xyo-network/react-storybook": "^3.0.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",

package/src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx

@@ -1,3 +1,4 @@
+import { useUserEvents } from '@xylabs/react-pixel'
 import React, { useMemo } from 'react'
 
 import { useXnsNameCaptureProviders, useXnsNameCaptureRouting } from './hooks/index.ts'
@@ -7,11 +8,13 @@ import { XnsNameCapture } from './XnsNameCapture.tsx'
 export const XnsNameCaptureWithContext: React.FC<XnsNameCaptureProps> = (props) => {
   const routingProps = useXnsNameCaptureRouting(props)
   const providersProps = useXnsNameCaptureProviders(routingProps)
+  const userEvents = useUserEvents(false)
 
   const updatedProps = useMemo<XnsNameCaptureProps>(() => ({
     ...props,
     ...routingProps,
     ...providersProps,
+    userEvents: props.userEvents ?? userEvents,
   }), [providersProps])
 
   return (