!(function ($) { var e = [ '$eq', '$gt', '$gte', '$in', '$lt', '$lte', '$ne', '$nin', '$and', '$not', '$nor', '$or', '$exists', '$type', '$expr', '$jsonSchema', '$mod', '$regex', '$text', '$where', '$geoIntersects', '$geoWithin', '$near', '$nearSphere', '$all', '$elemMatch', '$size', '$bitsAllClear', '$bitsAllSet', '$bitsAnyClear', '$bitsAnySet', '$comment', '$elemMatch', '$meta', '$slice', '$currentDate', '$inc', '$min', '$max', '$mul', '$rename', '$set', '$setOnInsert', '$unset', '$addToSet', '$pop', '$pull', '$push', '$pullAll', '$each', '$position', '$slice', '$sort', '$bit', '$addFields', '$bucket', '$bucketAuto', '$collStats', '$count', '$currentOp', '$facet', '$geoNear', '$graphLookup', '$group', '$indexStats', '$limit', '$listLocalSessions', '$listSessions', '$lookup', '$match', '$merge', '$out', '$planCacheStats', '$project', '$redact', '$replaceRoot', '$replaceWith', '$sample', '$set', '$skip', '$sort', '$sortByCount', '$unionWith', '$unset', '$unwind', '$abs', '$accumulator', '$acos', '$acosh', '$add', '$addToSet', '$allElementsTrue', '$and', '$anyElementTrue', '$arrayElemAt', '$arrayToObject', '$asin', '$asinh', '$atan', '$atan2', '$atanh', '$avg', '$binarySize', '$bsonSize', '$ceil', '$cmp', '$concat', '$concatArrays', '$cond', '$convert', '$cos', '$dateFromParts', '$dateToParts', '$dateFromString', '$dateToString', '$dayOfMonth', '$dayOfWeek', '$dayOfYear', '$degreesToRadians', '$divide', '$eq', '$exp', '$filter', '$first', '$floor', '$function', '$gt', '$gte', '$hour', '$ifNull', '$in', '$indexOfArray', '$indexOfBytes', '$indexOfCP', '$isArray', '$isNumber', '$isoDayOfWeek', '$isoWeek', '$isoWeekYear', '$last', '$last', '$let', '$literal', '$ln', '$log', '$log10', '$lt', '$lte', '$ltrim', '$map', '$max', '$mergeObjects', '$meta', '$min', '$millisecond', '$minute', '$mod', '$month', '$multiply', '$ne', '$not', '$objectToArray', '$or', '$pow', '$push', '$radiansToDegrees', '$range', '$reduce', '$regexFind', '$regexFindAll', '$regexMatch', '$replaceOne', '$replaceAll', '$reverseArray', '$round', '$rtrim', '$second', '$setDifference', '$setEquals', '$setIntersection', '$setIsSubset', '$setUnion', '$size', '$sin', '$slice', '$split', '$sqrt', '$stdDevPop', '$stdDevSamp', '$strcasecmp', '$strLenBytes', '$strLenCP', '$substr', '$substrBytes', '$substrCP', '$subtract', '$sum', '$switch', '$tan', '$toBool', '$toDate', '$toDecimal', '$toDouble', '$toInt', '$toLong', '$toObjectId', '$toString', '$toLower', '$toUpper', '$trim', '$trunc', '$type', '$week', '$year', '$zip', '$comment', '$explain', '$hint', '$max', '$maxTimeMS', '$min', '$orderby', '$query', '$returnKey', '$showDiskLoc', '$natural', ], t = '(?:' + (e = e.map(function ($) { return $.replace('$', '\\$'); })).join('|') + ')\\b'; ($.languages.mongodb = $.languages.extend('javascript', {})), $.languages.insertBefore('mongodb', 'string', { property: { pattern: /(?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)(?=\s*:)/, greedy: !0, inside: { keyword: RegExp('^([\'"])?' + t + '(?:\\1)?$') }, }, }), ($.languages.mongodb.string.inside = { url: { pattern: /https?:\/\/[-\w@:%.+~#=]{1,256}\.[a-z0-9()]{1,6}\b[-\w()@:%+.~#?&/=]*/i, greedy: !0, }, entity: { pattern: /\b(?:(?:[01]?\d\d?|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d\d?|2[0-4]\d|25[0-5])\b/, greedy: !0, }, }), $.languages.insertBefore('mongodb', 'constant', { builtin: { pattern: RegExp( '\\b(?:' + [ 'ObjectId', 'Code', 'BinData', 'DBRef', 'Timestamp', 'NumberLong', 'NumberDecimal', 'MaxKey', 'MinKey', 'RegExp', 'ISODate', 'UUID', ].join('|') + ')\\b' ), alias: 'keyword', }, }); })(Prism); n55'>55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
import useLocalStorage from '@utils/hooks/use-local-storage';
import useUpdateAckeeOptions, {
  type AckeeOptions,
} from '@utils/hooks/use-update-ackee-options';
import { FC } from 'react';
import { useIntl } from 'react-intl';
import RadioGroup, {
  type RadioGroupCallback,
  type RadioGroupCallbackProps,
  type RadioGroupOption,
  type RadioGroupProps,
} from './radio-group';
import Tooltip, { type TooltipProps } from '../modals/tooltip';

export type AckeeToggleProps = Pick<
  RadioGroupProps,
  | 'bodyClassName'
  | 'buttonClassName'
  | 'groupClassName'
  | 'legendClassName'
  | 'legendPosition'
> & {
  /**
   * Set additional classnames to the toggle wrapper.
   */
  className?: string;
  /**
   * True if motion should be reduced by default.
   */
  defaultValue: AckeeOptions;
  /**
   * The local storage key to save preference.
   */
  storageKey: string;
  /**
   * Set additional classnames to the tooltip wrapper.
   */
  tooltipClassName?: TooltipProps['className'];
};

/**
 * AckeeToggle component
 *
 * Render a Toggle component to set reduce motion.
 */
const AckeeToggle: FC<AckeeToggleProps> = ({
  defaultValue,
  storageKey,
  tooltipClassName,
  ...props
}) => {
  const intl = useIntl();
  const { value, setValue } = useLocalStorage<AckeeOptions>(
    storageKey,
    defaultValue
  );
  useUpdateAckeeOptions(value);

  const ackeeLabel = intl.formatMessage({
    defaultMessage: 'Tracking:',
    description: 'AckeeToggle: select label',
    id: '0gVlI3',
  });
  const tooltipTitle = intl.formatMessage({
    defaultMessage: 'Ackee tracking (analytics)',
    description: 'AckeeToggle: tooltip title',
    id: 'nGss/j',
  });
  const tooltipContent = [
    intl.formatMessage({
      defaultMessage: 'Partial includes only page url, views and duration.',
      description: 'AckeeToggle: tooltip message',
      id: 'ZB/Aw2',
    }),
    intl.formatMessage({
      defaultMessage:
        'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.',
      description: 'AckeeToggle: tooltip message',
      id: '7zDlQo',
    }),
  ];
  const partialLabel = intl.formatMessage({
    defaultMessage: 'Partial',
    description: 'AckeeToggle: partial option name',
    id: 'tIZYpD',
  });
  const fullLabel = intl.formatMessage({
    defaultMessage: 'Full',
    description: 'AckeeToggle: full option name',
    id: '5eD6y2',
  });

  const options: RadioGroupOption[] = [
    {
      id: 'ackee-full',
      label: fullLabel,
      name: 'ackee',
      value: 'full',
    },
    {
      id: 'ackee-partial',
      label: partialLabel,
      name: 'ackee',
      value: 'partial',
    },
  ];

  /**
   * Handle change events.
   *
   * @param {RadioGroupCallbackProps} props - An object with choices.
   */
  const handleChange: RadioGroupCallback = ({
    choices,
    updateChoice,
  }: RadioGroupCallbackProps) => {
    let newChoice: AckeeOptions = choices.new as AckeeOptions;

    if (choices.new === choices.prev) {
      newChoice = choices.new === 'full' ? 'partial' : 'full';
      updateChoice(newChoice);
    }

    setValue(newChoice);
  };

  return (
    <RadioGroup
      initialChoice={value}
      kind="toggle"
      legend={ackeeLabel}
      onChange={handleChange}
      options={options}
      Tooltip={
        <Tooltip
          title={tooltipTitle}
          content={tooltipContent}
          icon="?"
          className={tooltipClassName}
        />
      }
      {...props}
    />
  );
};

export default AckeeToggle;