Mercor

https://talent.docs.mercor.com
Admin
Mercor is an AI-powered hiring platform that connects talent with companies for technical and...
Tokens:53,402
Snippets:826
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Render bonus payment calculator

Source: https://talent.docs.mercor.com/how-to/payments

Provides input fields for bonus amounts and approval dates, displaying the calculated release window.

```jsx
<section className="pc-card">
          <div className="pc-card-head">
            <span className="pc-eyebrow">Bonuses, work trials, referrals</span>
            <h3 className="pc-heading">Which release window does your bonus hit?</h3>
            <p className="pc-sub">Bonuses, work-trial pay, and referral payouts use a different schedule than weekly wages — there are two cutoffs per week (Wednesday and Friday in PST). Enter the bonus details below to find out when it lands.</p>
          </div>
          <div className="pc-card-body">
            <div className="pc-fields">
              <div className="pc-field">
                <label className="pc-field-label" htmlFor="pc-bonus-amt">Bonus amount (USD)</label>
                <input className="pc-field-input" id="pc-bonus-amt" type="number" min="0" step="0.01" placeholder="e.g. 150" inputMode="decimal" value={bonusAmount} onChange={e => setBonusAmount(e.target.value)} />
                <div className="pc-field-help">Total bonus or work-trial pay</div>
              </div>
              <div className="pc-field">
                <label className="pc-field-label" htmlFor="pc-bonus-dt">When was it approved? (local time)</label>
                <input className="pc-field-input" id="pc-bonus-dt" type="datetime-local" value={bonusDateTime} onChange={e => setBonusDateTime(e.target.value)} />
                <div className="pc-field-help">SPL or PM approval timestamp; defaults to right now</div>
              </div>
            </div>
            {bonusResult && <div className="pc-bonus-result">
                <div className="pc-bonus-amount">${bonusResult.amount.toLocaleString('en-US', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })}</div>
                <div className="pc-bonus-detail">
                  Released on <strong>{fmtFullDate(bonusResult.release, tz)}</strong> · <strong>{bonusResult.windowLabel}</strong> (~12:00 PM PST). Bank arrival follows your payout speed selection above.
                </div>
              </div>}
          </div>
        </section>
```

--------------------------------

### Payment Timeline CSS

Source: https://talent.docs.mercor.com/how-to/payments

Styles for a multi-step payment progress timeline.

```css
.pc-timeline { padding: 20px 30px 24px; position: relative; border-top: 1px solid rgba(255,255,255,0.18); }
.pc-timeline-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; }
.pc-timeline-line { position: absolute; left: 12.5%; right: 12.5%; top: 12px; height: 2px; background: rgba(255,255,255,0.25); }
.pc-step { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: relative; }
.pc-step-dot { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.4); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: white; position: relative; z-index: 1; font-weight: 700; }
.pc-step.pc-active .pc-step-dot { background: white; color: var(--pc-indigo-dark); border-color: white; box-shadow: 0 0 0 4px rgba(255,255,255,0.25); }
.pc-step.pc-done .pc-step-dot { background: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.7); color: var(--pc-indigo-dark); }
.pc-step-label { font-size: 10.5px; font-weight: 600; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.pc-step-val { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.pc-step-meta { font-size: 11.5px; opacity: 0.75; line-height: 1.35; }
```

--------------------------------

### Payment and Bonus Calculation Logic

Source: https://talent.docs.mercor.com/how-to/payments

React state hooks and calculation logic for determining payment release dates based on country, provider, and bonus timing.

```javascript
  const [country, setCountry] = React.useState(defaultCountry.tz);
  const [rate, setRate] = React.useState('');
  const [hours, setHours] = React.useState('');
  const [provider, setProvider] = React.useState('stripe-bank');
  const [checkDateTime, setCheckDateTime] = React.useState(nowInTzAsLocalString(defaultCountry.tz));
  const [adjustOpen, setAdjustOpen] = React.useState(false);
  const [bonusAmount, setBonusAmount] = React.useState('');
  const [bonusDateTime, setBonusDateTime] = React.useState(nowInTzAsLocalString(defaultCountry.tz));
  const [faqOpenIdx, setFaqOpenIdx] = React.useState(null);
  React.useEffect(() => {
    setCheckDateTime(nowInTzAsLocalString(country));
    setBonusDateTime(nowInTzAsLocalString(country));
  }, [country]);
  const now = new Date();
  const tz = country;
  const tzName = COUNTRIES.find(c => c.tz === tz)?.name || tz;
  const provInfo = providerInfo(provider);
  const liveWeekStart = workWeekStartFor(now);
  const liveWeekEnd = workWeekEnd(liveWeekStart);
  const adjustedMoment = adjustOpen && checkDateTime ? parseLocalDateTime(checkDateTime, tz) : null;
  const referenceMoment = adjustedMoment || now;
  const refWeekStart = workWeekStartFor(referenceMoment);
  const refWeekEnd = workWeekEnd(refWeekStart);
  const release = nextWedReleaseAfter(refWeekEnd);
  const arrival = provInfo.instant ? new Date(release.getTime() + (provInfo.minutes || 30) * 60000) : provInfo.minutes ? new Date(release.getTime() + provInfo.minutes * 60000) : addBusinessDays(release, provInfo.businessDays);
  const rateNum = parseFloat(rate);
  const hoursNum = parseFloat(hours);
  const hasInput = rateNum > 0 && hoursNum > 0;
  const gross = hasInput ? rateNum * hoursNum : 0;
  let adjustStatus = null;
  if (adjustedMoment) {
    if (refWeekStart.getTime() === liveWeekStart.getTime()) adjustStatus = 'current'; else if (refWeekStart < liveWeekStart) adjustStatus = 'past'; else adjustStatus = 'future';
  }
  const stepStates = [{
    id: 'now',
    moment: referenceMoment
  }, {
    id: 'cutoff',
    moment: refWeekEnd
  }, {
    id: 'release',
    moment: release
  }, {
    id: 'bank',
    moment: arrival
  }];
  let activeMarked = false;
  const stepClass = stepStates.map(step => {
    if (step.moment < now) return 'done';
    if (!activeMarked) {
      activeMarked = true;
      return 'active';
    }
    return '';
  });
  let bonusResult = null;
  const bonusAmt = parseFloat(bonusAmount);
  if (bonusAmt > 0 && bonusDateTime) {
    const bonusMoment = parseLocalDateTime(bonusDateTime, tz);
    if (bonusMoment) {
      const pstParts = zonedParts(bonusMoment, 'America/Los_Angeles');
      const dayIdx = ({
        Sun: 0,
        Mon: 1,
        Tue: 2,
        Wed: 3,
        Thu: 4,
        Fri: 5,
        Sat: 6
      })[pstParts.weekday];
      const inWindowA = dayIdx === 3 && pstParts.hour >= 12 || dayIdx === 4 || dayIdx === 5 || dayIdx === 6 || dayIdx === 0;
      let bonusRelease;
      let windowLabel;
      const base = new Date(Date.UTC(pstParts.year, pstParts.month - 1, pstParts.day));
      if (inWindowA) {
        const daysToWed = (3 - dayIdx + 7) % 7 || 7;
        base.setUTCDate(base.getUTCDate() + daysToWed);
        bonusRelease = dateFromZonedWallClock('America/Los_Angeles', base.getUTCFullYear(), base.getUTCMonth() + 1, base.getUTCDate(), 12, 0);
        windowLabel = 'Wednesday window';
      } else {
        const daysToFri = (5 - dayIdx + 7) % 7;
        base.setUTCDate(base.getUTCDate() + daysToFri);
        bonusRelease = dateFromZonedWallClock('America/Los_Angeles', base.getUTCFullYear(), base.getUTCMonth() + 1, base.getUTCDate(), 12, 0);
        windowLabel = 'Friday window';
      }
      bonusResult = {
        amount: bonusAmt,
        release: bonusRelease,
        windowLabel
      };
    }
  }
```

--------------------------------

### Render Payment Timeline and Adjustment Panel

Source: https://talent.docs.mercor.com/how-to/payments

Displays a multi-step timeline for payment processing and an optional panel for testing specific log times.

```jsx
<div className="pc-timeline">
                <div className="pc-timeline-rail">
                  <div className="pc-timeline-line"></div>
                  <div className={`pc-step ${stepClass[0] ? 'pc-' + stepClass[0] : ''}`}>
                    <div className="pc-step-dot">●</div>
                    <div>
                      <div className="pc-step-label">{adjustedMoment ? 'Log time' : 'Now'}</div>
                      <div className="pc-step-val">{fmtShortDate(referenceMoment, tz)}</div>
                      <div className="pc-step-meta">{fmtTime(referenceMoment, tz)}</div>
                    </div>
                  </div>
                  <div className={`pc-step ${stepClass[1] ? 'pc-' + stepClass[1] : ''}`}>
                    <div className="pc-step-dot">◆</div>
                    <div>
                      <div className="pc-step-label">IST cutoff</div>
                      <div className="pc-step-val">{fmtShortDate(refWeekEnd, tz)}</div>
                      <div className="pc-step-meta">{fmtTime(refWeekEnd, tz)} your time · Fri 11:59 PM IST</div>
                    </div>
                  </div>
                  <div className={`pc-step ${stepClass[2] ? 'pc-' + stepClass[2] : ''}`}>
                    <div className="pc-step-dot">$</div>
                    <div>
                      <div className="pc-step-label">Mercor releases</div>
                      <div className="pc-step-val">{fmtShortDate(release, tz)}</div>
                      <div className="pc-step-meta">~12:00 PM PST</div>
                    </div>
                  </div>
                  <div className={`pc-step ${stepClass[3] ? 'pc-' + stepClass[3] : ''}`}>
                    <div className="pc-step-dot">✓</div>
                    <div>
                      <div className="pc-step-label">In your bank</div>
                      <div className="pc-step-val">{fmtShortDate(arrival, tz)}
                      <div className="pc-step-meta">{provInfo.instant ? '~30 min after release' : provInfo.isWise ? '~1 hr after you accept email' : '2–3 business days'}</div>
                    </div>
                  </div>
                </div>

                <div className="pc-adjust-row">
                  <button className={`pc-toggle ${adjustOpen ? 'pc-open' : ''}`} type="button" onClick={() => setAdjustOpen(v => !v)}>
                    <span>Test a specific log time</span>
                    <svg className="pc-chev" width="11" height="7" viewBox="0 0 11 7" fill="none"><path d="M1 1l4.5 4.5L10 1" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </button>
                  {adjustStatus && <span className={`pc-status pc-${adjustStatus}`}>
                      {adjustStatus === 'current' ? 'Current week' : adjustStatus === 'past' ? 'Past week' : 'Future week'}
                    </span>}
                </div>
                {adjustOpen && <div className="pc-adjust-panel">
                    <div className="pc-fields">
                      <div className="pc-field">
                        <label className="pc-field-label" htmlFor="pc-check-dt">Date and time (your local time)</label>
                        <input className="pc-field-input" id="pc-check-dt" type="datetime-local" value={checkDateTime} onChange={e => setCheckDateTime(e.target.value)} />
                        <div className="pc-field-help">If you worked late at night or early morning, check which work week your hours land in</div>
                      </div>
                      <div className="pc-field">
                        <label className="pc-field-label"> </label>
                        <button className="pc-reset-link" type="button" onClick={() => setCheckDateTime(nowInTzAsLocalString(tz))}>Reset to now</button>
                      </div>
                    </div>
                  </div>}
              </div>
```

--------------------------------

### Troubleshooting Item CSS

Source: https://talent.docs.mercor.com/how-to/payments

Styles for FAQ or troubleshooting list items.

```css
.pc-trouble { display: grid; gap: 10px; margin-top: 4px; }
.pc-trouble-item { padding: 14px 16px; background: var(--pc-gray-50); border: 1px solid var(--pc-gray-200); border-radius: 12px; }
.pc-trouble-q { font-size: 14px; font-weight: 600; color: var(--pc-black); margin-bottom: 4px; }
.pc-trouble-a { font-size: 13.5px; color: var(--pc-gray-600); line-height: 1.6; }
.pc-trouble-a a { color: var(--pc-indigo); text-decoration: none; }
.pc-trouble-a a:hover { text-decoration: underline; }
```

--------------------------------

### CSS Styles for FAQ and Layout

Source: https://talent.docs.mercor.com/how-to/payments

Contains styling for FAQ lists, footer elements, and responsive media queries for mobile devices.

```css
.pc-faq-list { margin-top: 4px; }
.pc-faq-item { border-top: 1px solid var(--pc-gray-200); }
.pc-faq-item:first-child { border-top: none; }
.pc-faq-trigger { width: 100%; text-align: left; background: none; border: none; padding: 16px 0; font-size: 14.5px; font-weight: 600; color: var(--pc-black); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.pc-faq-trigger:hover { color: var(--pc-indigo-dark); }
.pc-faq-trigger .pc-chev-sm { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.15s; color: var(--pc-gray-400); }
.pc-faq-item.pc-open .pc-faq-trigger .pc-chev-sm { transform: rotate(180deg); color: var(--pc-indigo); }
.pc-faq-content { padding: 0 0 16px; font-size: 14px; color: var(--pc-gray-600); line-height: 1.65; }
.pc-faq-content a { color: var(--pc-indigo); text-decoration: none; }
.pc-faq-content a:hover { text-decoration: underline; }

.pc-foot { text-align: center; color: var(--pc-gray-400); font-size: 12px; margin: 24px 0 0; line-height: 1.6; }
.pc-foot a { color: var(--pc-indigo); text-decoration: none; font-weight: 500; }

@media (max-width: 720px) {
  .pc-fields { grid-template-columns: 1fr; }
  .pc-h1 { font-size: 28px; }
  .pc-card-head { padding: 18px 18px 0; }
  .pc-card-body { padding: 14px 18px 20px; }
  .pc-result-top { padding: 20px 18px 14px; }
  .pc-timeline { padding: 16px 18px 18px; }
  .pc-result-amount { font-size: 40px; }
  .pc-timeline-rail { grid-template-columns: 1fr; gap: 12px; }
  .pc-timeline-line { display: none; }
  .pc-step { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
  .pc-step-label { margin-top: 0; }
  .pc-step > div:last-child { flex: 1; min-width: 140px; }
  .pc-ww-line { flex-direction: column; gap: 2px; padding: 4px 0; }
  .pc-ww-key { min-width: 0; }
  .pc-ww-val { font-size: 14px; }
}
```
Tokens:
Raw