claude-code/components/Passes/Passes.tsx

import * as React from 'react';
import { useCallback, useEffect, useState } from 'react';
import type { CommandResultDisplay } from '../../commands.js';
import { TEARDROP_ASTERISK } from '../../constants/figures.js';
import { useExitOnCtrlCDWithKeybindings } from '../../hooks/useExitOnCtrlCDWithKeybindings.js';
import { setClipboard } from '../../ink/termio/osc.js';
// eslint-disable-next-line custom-rules/prefer-use-keybindings -- enter to copy link
import { Box, Link, Text, useInput } from '../../ink.js';
import { useKeybinding } from '../../keybindings/useKeybinding.js';
import { logEvent } from '../../services/analytics/index.js';
import { fetchReferralRedemptions, formatCreditAmount, getCachedOrFetchPassesEligibility } from '../../services/api/referral.js';
import type { ReferralRedemptionsResponse, ReferrerRewardInfo } from '../../services/oauth/types.js';
import { count } from '../../utils/array.js';
import { logError } from '../../utils/log.js';
import { Pane } from '../design-system/Pane.js';
type PassStatus = {
  passNumber: number;
  isAvailable: boolean;
};
type Props = {
  onDone: (result?: string, options?: {
    display?: CommandResultDisplay;
  }) => void;
};
export function Passes({
  onDone
}: Props): React.ReactNode {
  const [loading, setLoading] = useState(true);
  const [passStatuses, setPassStatuses] = useState<PassStatus[]>([]);
  const [isAvailable, setIsAvailable] = useState(false);
  const [referralLink, setReferralLink] = useState<string | null>(null);
  const [referrerReward, setReferrerReward] = useState<ReferrerRewardInfo | null | undefined>(undefined);
  const exitState = useExitOnCtrlCDWithKeybindings(() => onDone('Guest passes dialog dismissed', {
    display: 'system'
  }));
  const handleCancel = useCallback(() => {
    onDone('Guest passes dialog dismissed', {
      display: 'system'
    });
  }, [onDone]);
  useKeybinding('confirm:no', handleCancel, {
    context: 'Confirmation'
  });
  useInput((_input, key) => {
    if (key.return && referralLink) {
      void setClipboard(referralLink).then(raw => {
        if (raw) process.stdout.write(raw);
        logEvent('tengu_guest_passes_link_copied', {});
        onDone(`Referral link copied to clipboard!`);
      });
    }
  });
  useEffect(() => {
    async function loadPassesData() {
      try {
        // Check eligibility first (uses cache if available)
        const eligibilityData = await getCachedOrFetchPassesEligibility();
        if (!eligibilityData || !eligibilityData.eligible) {
          setIsAvailable(false);
          setLoading(false);
          return;
        }
        setIsAvailable(true);

        // Store the referral link if available
        if (eligibilityData.referral_code_details?.referral_link) {
          setReferralLink(eligibilityData.referral_code_details.referral_link);
        }

        // Store referrer reward info for v1 campaign messaging
        setReferrerReward(eligibilityData.referrer_reward);

        // Use the campaign returned from eligibility for redemptions
        const campaign = eligibilityData.referral_code_details?.campaign ?? 'claude_code_guest_pass';

        // Fetch redemptions data
        let redemptionsData: ReferralRedemptionsResponse;
        try {
          redemptionsData = await fetchReferralRedemptions(campaign);
        } catch (err_0) {
          logError(err_0 as Error);
          setIsAvailable(false);
          setLoading(false);
          return;
        }

        // Build pass statuses array
        const redemptions = redemptionsData.redemptions || [];
        const maxRedemptions = redemptionsData.limit || 3;
        const statuses: PassStatus[] = [];
        for (let i = 0; i < maxRedemptions; i++) {
          const redemption = redemptions[i];
          statuses.push({
            passNumber: i + 1,
            isAvailable: !redemption
          });
        }
        setPassStatuses(statuses);
        setLoading(false);
      } catch (err) {
        // For any error, just show passes as not available
        logError(err as Error);
        setIsAvailable(false);
        setLoading(false);
      }
    }
    void loadPassesData();
  }, []);
  if (loading) {
    return <Pane>
        <Box flexDirection="column" gap={1}>
          <Text dimColor>Loading guest pass information…</Text>
          <Text dimColor italic>
            {exitState.pending ? <>Press {exitState.keyName} again to exit</> : <>Esc to cancel</>}
          </Text>
        </Box>
      </Pane>;
  }
  if (!isAvailable) {
    return <Pane>
        <Box flexDirection="column" gap={1}>
          <Text>Guest passes are not currently available.</Text>
          <Text dimColor italic>
            {exitState.pending ? <>Press {exitState.keyName} again to exit</> : <>Esc to cancel</>}
          </Text>
        </Box>
      </Pane>;
  }
  const availableCount = count(passStatuses, p => p.isAvailable);

  // Sort passes: available first, then redeemed
  const sortedPasses = [...passStatuses].sort((a, b) => +b.isAvailable - +a.isAvailable);

  // ASCII art for tickets
  const renderTicket = (pass: PassStatus) => {
    const isRedeemed = !pass.isAvailable;
    if (isRedeemed) {
      // Grayed out redeemed ticket with slashes
      return <Box key={pass.passNumber} flexDirection="column" marginRight={1}>
          <Text dimColor>{'┌─────────╱'}</Text>
          <Text dimColor>{` ) CC ${TEARDROP_ASTERISK} ┊╱`}</Text>
          <Text dimColor>{'└───────╱'}</Text>
        </Box>;
    }
    return <Box key={pass.passNumber} flexDirection="column" marginRight={1}>
        <Text>{'┌──────────┐'}</Text>
        <Text>
          {' ) CC '}
          <Text color="claude">{TEARDROP_ASTERISK}</Text>
          {' ┊ ( '}
        </Text>
        <Text>{'└──────────┘'}</Text>
      </Box>;
  };
  return <Pane>
      <Box flexDirection="column" gap={1}>
        <Text color="permission">Guest passes · {availableCount} left</Text>

        <Box flexDirection="row" marginLeft={2}>
          {sortedPasses.slice(0, 3).map(pass_0 => renderTicket(pass_0))}
        </Box>

        {referralLink && <Box marginLeft={2}>
            <Text>{referralLink}</Text>
          </Box>}

        <Box flexDirection="column" marginLeft={2}>
          <Text dimColor>
            {referrerReward ? `Share a free week of Claude Code with friends. If they love it and subscribe, you'll get ${formatCreditAmount(referrerReward)} of extra usage to keep building. ` : 'Share a free week of Claude Code with friends. '}
            <Link url={referrerReward ? 'https://support.claude.com/en/articles/13456702-claude-code-guest-passes' : 'https://support.claude.com/en/articles/12875061-claude-code-guest-passes'}>
              Terms apply.
            </Link>
          </Text>
        </Box>

        <Box>
          <Text dimColor italic>
            {exitState.pending ? <>Press {exitState.keyName} again to exit</> : <>Enter to copy link · Esc to cancel</>}
          </Text>
        </Box>
      </Box>
    </Pane>;
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsInVzZUNhbGxiYWNrIiwidXNlRWZmZWN0IiwidXNlU3RhdGUiLCJDb21tYW5kUmVzdWx0RGlzcGxheSIsIlRFQVJEUk9QX0FTVEVSSVNLIiwidXNlRXhpdE9uQ3RybENEV2l0aEtleWJpbmRpbmdzIiwic2V0Q2xpcGJvYXJkIiwiQm94IiwiTGluayIsIlRleHQiLCJ1c2VJbnB1dCIsInVzZUtleWJpbmRpbmciLCJsb2dFdmVudCIsImZldGNoUmVmZXJyYWxSZWRlbXB0aW9ucyIsImZvcm1hdENyZWRpdEFtb3VudCIsImdldENhY2hlZE9yRmV0Y2hQYXNzZXNFbGlnaWJpbGl0eSIsIlJlZmVycmFsUmVkZW1wdGlvbnNSZXNwb25zZSIsIlJlZmVycmVyUmV3YXJkSW5mbyIsImNvdW50IiwibG9nRXJyb3IiLCJQYW5lIiwiUGFzc1N0YXR1cyIsInBhc3NOdW1iZXIiLCJpc0F2YWlsYWJsZSIsIlByb3BzIiwib25Eb25lIiwicmVzdWx0Iiwib3B0aW9ucyIsImRpc3BsYXkiLCJQYXNzZXMiLCJSZWFjdE5vZGUiLCJsb2FkaW5nIiwic2V0TG9hZGluZyIsInBhc3NTdGF0dXNlcyIsInNldFBhc3NTdGF0dXNlcyIsInNldElzQXZhaWxhYmxlIiwicmVmZXJyYWxMaW5rIiwic2V0UmVmZXJyYWxMaW5rIiwicmVmZXJyZXJSZXdhcmQiLCJzZXRSZWZlcnJlclJld2FyZCIsInVuZGVmaW5lZCIsImV4aXRTdGF0ZSIsImhhbmRsZUNhbmNlbCIsImNvbnRleHQiLCJfaW5wdXQiLCJrZXkiLCJyZXR1cm4iLCJ0aGVuIiwicmF3IiwicHJvY2VzcyIsInN0ZG91dCIsIndyaXRlIiwibG9hZFBhc3Nlc0RhdGEiLCJlbGlnaWJpbGl0eURhdGEiLCJlbGlnaWJsZSIsInJlZmVycmFsX2NvZGVfZGV0YWlscyIsInJlZmVycmFsX2xpbmsiLCJyZWZlcnJlcl9yZXdhcmQiLCJjYW1wYWlnbiIsInJlZGVtcHRpb25zRGF0YSIsImVyciIsIkVycm9yIiwicmVkZW1wdGlvbnMiLCJtYXhSZWRlbXB0aW9ucyIsImxpbWl0Iiwic3RhdHVzZXMiLCJpIiwicmVkZW1wdGlvbiIsInB1c2giLCJwZW5kaW5nIiwia2V5TmFtZSIsImF2YWlsYWJsZUNvdW50IiwicCIsInNvcnRlZFBhc3NlcyIsInNvcnQiLCJhIiwiYiIsInJlbmRlclRpY2tldCIsInBhc3MiLCJpc1JlZGVlbWVkIiwic2xpY2UiLCJtYXAiXSwic291cmNlcyI6WyJQYXNzZXMudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB0eXBlIHsgQ29tbWFuZFJlc3VsdERpc3BsYXkgfSBmcm9tICcuLi8uLi9jb21tYW5kcy5qcydcbmltcG9ydCB7IFRFQVJEUk9QX0FTVEVSSVNLIH0gZnJvbSAnLi4vLi4vY29uc3RhbnRzL2ZpZ3VyZXMuanMnXG5pbXBvcnQgeyB1c2VFeGl0T25DdHJsQ0RXaXRoS2V5YmluZGluZ3MgfSBmcm9tICcuLi8uLi9ob29rcy91c2VFeGl0T25DdHJsQ0RXaXRoS2V5YmluZGluZ3MuanMnXG5pbXBvcnQgeyBzZXRDbGlwYm9hcmQgfSBmcm9tICcuLi8uLi9pbmsvdGVybWlvL29zYy5qcydcbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBjdXN0b20tcnVsZXMvcHJlZmVyLXVzZS1rZXliaW5kaW5ncyAtLSBlbnRlciB0byBjb3B5IGxpbmtcbmltcG9ydCB7IEJveCwgTGluaywgVGV4dCwgdXNlSW5wdXQgfSBmcm9tICcuLi8uLi9pbmsuanMnXG5pbXBvcnQgeyB1c2VLZXliaW5kaW5nIH0gZnJvbSAnLi4vLi4va2V5YmluZGluZ3MvdXNlS2V5YmluZGluZy5qcydcbmltcG9ydCB7IGxvZ0V2ZW50IH0gZnJvbSAnLi4vLi4vc2VydmljZXMvYW5hbHl0aWNzL2luZGV4LmpzJ1xuaW1wb3J0IHtcbiAgZmV0Y2hSZWZlcnJhbFJlZGVtcHRpb25zLFxuICBmb3JtYXRDcmVkaXRBbW91bnQsXG4gIGdldENhY2hlZE9yRmV0Y2hQYXNzZXNFbGlnaWJpbGl0eSxcbn0gZnJvbSAnLi4vLi4vc2VydmljZXMvYXBpL3JlZmVycmFsLmpzJ1xuaW1wb3J0IHR5cGUge1xuICBSZWZlcnJhbFJlZGVtcHRpb25zUmVzcG9uc2UsXG4gIFJlZmVycmVyUmV3YXJkSW5mbyxcbn0gZnJvbSAnLi4vLi4vc2VydmljZXMvb2F1dGgvdHlwZXMuanMnXG5pbXBvcnQgeyBjb3VudCB9IGZyb20gJy4uLy4uL3V0aWxzL2FycmF5LmpzJ1xuaW1wb3J0IHsgbG9nRXJyb3IgfSBmcm9tICcuLi8uLi91dGlscy9sb2cuanMnXG5pbXBvcnQgeyBQYW5lIH0gZnJvbSAnLi4vZGVzaWduLXN5c3RlbS9QYW5lLmpzJ1xuXG50eXBlIFBhc3NTdGF0dXMgPSB7XG4gIHBhc3NOdW1iZXI6IG51bWJlclxuICBpc0F2YWlsYWJsZTogYm9vbGVhblxufVxuXG50eXBlIFByb3BzID0ge1xuICBvbkRvbmU6IChcbiAgICByZXN1bHQ/OiBzdHJpbmcsXG4gICAgb3B0aW9ucz86IHsgZGlzcGxheT86IENvbW1hbmRSZXN1bHREaXNwbGF5IH0sXG4gICkgPT4gdm9pZFxufVxuXG5leHBvcnQgZnVuY3Rpb24gUGFzc2VzKHsgb25Eb25lIH06IFByb3BzKTogUmVhY3QuUmVhY3ROb2RlIHtcbiAgY29uc3QgW2xvYWRpbmcsIHNldExvYWRpbmddID0gdXNlU3RhdGUodHJ1ZSlcbiAgY29uc3QgW3Bhc3NTdGF0dXNlcywgc2V0UGFzc1N0YXR1c2VzXSA9IHVzZVN0YXRlPFBhc3NTdGF0dXNbXT4oW10pXG4gIGNvbnN0IFtpc0F2YWlsYWJsZSwgc2V0SXNBdmFpbGFibGVdID0gdXNlU3RhdGUoZmFsc2UpXG4gIGNvbnN0IFtyZWZlcnJhbExpbmssIHNldFJlZmVycmFsTGlua10gPSB1c2VTdGF0ZTxzdHJpbmcgfCBudWxsPihudWxsKVxuICBjb25zdCBbcmVmZXJyZXJSZXdhcmQsIHNldFJlZmVycmVyUmV3YXJkXSA9IHVzZVN0YXRlPFxuICAgIFJlZmVycmVyUmV3YXJkSW5mbyB8IG51bGwgfCB1bmRlZmluZWRcbiAgPih1bmRlZmluZWQpXG5cbiAgY29uc3QgZXhpdFN0YXRlID0gdXNlRXhpdE9uQ3RybENEV2l0aEtleWJpbmRpbmdzKCgpID0+XG4gICAgb25Eb25lKCdHdWVzdCBwYXNzZXMgZGlhbG9nIGRpc21pc3NlZCcsIHsgZGlzcGxheTogJ3N5c3RlbScgfSksXG4gIClcblxuICBjb25zdCBoYW5kbGVDYW5jZWwgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgb25Eb25lKCdHdWVzdCBwYXNzZXMgZGlhbG9nIGRpc21pc3NlZCcsIHsgZGlzcGxheTogJ3N5c3R