${childContributions.map((contrib) => html`
${contrib.name}:
${contrib.points}
${inner}
`;
}
/**
* Compute all per-reward display data once, mirroring the classic
* _renderRewardRow calculations. FIXED COST is reward.cost (via
* _getDisplayCost — static only). Returns everything the designed rows need.
*/
_rewardData(reward, children) {
const assignedTo = reward.assigned_to || [];
const isJackpot = reward.is_jackpot || false;
const cardForcesPool = this.config.enable_pool_mode === true;
// Jackpot rewards are always pool-mode (#552): everyone deposits into the
// shared jar and it's redeemed when full. Combined points only work via the
// pool, so jackpots never show the single-child claim button.
const enablePoolMode = cardForcesPool || reward.pool_enabled === true || isJackpot;
const displayCost = this._getDisplayCost(reward, children);
const relevantChildren = assignedTo.length === 0
? children
: children.filter(c => assignedTo.includes(c.id));
const childId = this.config?.child_id || this._selectedChildId;
const relevantChild = childId
? children.find(c => c.id === childId)
: relevantChildren[0];
const poolAllocations = reward.pool_allocations || {};
const jackpotPoolTotal = typeof reward.jackpot_pool_total === 'number' ? reward.jackpot_pool_total : 0;
let currentStars = 0;
const childContributions = [];
if (isJackpot) {
const sharePerChild = relevantChildren.length > 0
? Math.round(displayCost / relevantChildren.length)
: displayCost;
relevantChildren.forEach((child, index) => {
const points = enablePoolMode
? (poolAllocations[child.id] || 0)
: (child.points || 0);
currentStars += points;
childContributions.push({
name: child.name,
child,
points,
tone: this._designTone(index),
});
});
} else if (enablePoolMode) {
currentStars = childId ? (poolAllocations[childId] || 0) : 0;
} else if (this.config.child_id) {
const fc = children.find(c => c.id === this.config.child_id);
currentStars = fc ? (fc.points || 0) : 0;
} else if (relevantChildren.length > 0) {
currentStars = relevantChildren[0].points || 0;
}
const percentage = displayCost > 0 ? Math.min((currentStars / displayCost) * 100, 100) : 0;
const pcAttrs = (window.__taskmate_attrs && window.__taskmate_attrs(this.hass, this.config?.entity))
|| this.hass?.states?.[this.config?.entity]?.attributes || {};
const pendingClaims = pcAttrs.pending_reward_claims || [];
const hasPendingClaim = pendingClaims.some(c =>
c.reward_id === reward.id && (!childId || c.child_id === childId)
);
const spendable = relevantChild
? (typeof relevantChild.spendable_balance === 'number'
? relevantChild.spendable_balance
: (relevantChild.points || 0) - (relevantChild.committed_points || 0))
: 0;
const poolFull = enablePoolMode && (
isJackpot ? jackpotPoolTotal >= displayCost : currentStars >= displayCost
);
const committedPoints = relevantChild?.committed_points || 0;
const availablePoints = (relevantChild?.points || 0) - committedPoints;
const canAfford = !!relevantChild && availablePoints >= displayCost;
const isSoldOut = reward.is_sold_out === true;
const isExpired = reward.is_expired === true;
const isUnavailable = isSoldOut || isExpired;
const daysUntilExpiry = (typeof reward.days_until_expiry === 'number')
? reward.days_until_expiry : null;
return {
reward, isJackpot, enablePoolMode, displayCost, relevantChildren, relevantChild,
childId, currentStars, childContributions, percentage, hasPendingClaim,
spendable, poolFull, canAfford, isSoldOut, isExpired, isUnavailable, daysUntilExpiry,
showClaim: !enablePoolMode && !hasPendingClaim && childId && !isUnavailable,
showPoolControls: enablePoolMode && childId && !hasPendingClaim && !isUnavailable,
};
}
/** Designed availability chip label/tone for a reward, or null. */
_designAvail(d) {
if (d.isExpired) return { label: this._t('rewards.expired'), tone: 'muted' };
if (d.isSoldOut) return { label: this._t('rewards.sold_out'), tone: 'muted' };
if (typeof d.reward.quantity === 'number' && d.reward.quantity > 0 && d.reward.quantity <= 3) {
return { label: this._t('rewards.only_n_left', { count: d.reward.quantity }), tone: 'bad' };
}
if (typeof d.daysUntilExpiry === 'number' && d.daysUntilExpiry >= 0 && d.daysUntilExpiry <= 7) {
const label = d.daysUntilExpiry === 0
? this._t('rewards.expires_today')
: (d.daysUntilExpiry === 1
? this._t('rewards.expires_in_days', { count: d.daysUntilExpiry })
: this._t('rewards.expires_in_days_plural', { count: d.daysUntilExpiry }));
return { label, tone: 'warn' };
}
return null;
}
_renderDesigned(design) {
const entity = this.hass.states[this.config.entity];
const hd = _safeColor(this.config.header_color, '#e67e22');
if (!entity) {
return html`${this._t('common.entity_not_found', { entity: this.config.entity })}
${this._t('rewards.empty_title')}
${this._t('rewards.empty_subtitle')}
`
: html`
${this._designChildTabs(children)}
${(anyPoolReward && activeChild) || activeChild
? this._designChildSelector(activeChild, pointsIcon, pointsName, design)
: ''}
`;
return html`
${this._t('rewards.empty_subtitle')}
${body}
🎁
${this.config.title || this._t('rewards.default_title')}${count
? html`${count === 1
? this._t('rewards.reward_count_singular', { count })
: this._t('rewards.reward_count_plural', { count })}` : ''}
`;
}
_designChildSelector(child, pointsIcon, pointsName, design) {
const spendable = typeof child.spendable_balance === 'number'
? child.spendable_balance : (child.points || 0);
return html`
${this._av(child, this._designTone(0), 38)}
`;
}
_designRewardRow(reward, children, pointsIcon, pointsName, design) {
const d = this._rewardData(reward, children);
const tone = this._designTone((reward.id || reward.name || '').length);
const isLoading = this._loading[reward.id];
const avail = this._designAvail(d);
const emoji = "🎁";
// Child-assignment badges — honour show_child_badges (default on), classic-parity:
// only for non-jackpot rewards; "all children" chip when unassigned.
const showChildBadges = this.config.show_child_badges !== false;
const assignedTo = reward.assigned_to || [];
const childMap = {};
children.forEach((c) => { childMap[c.id] = c.name; });
const badges = showChildBadges && !d.isJackpot
? (assignedTo.length === 0
? html`${this._t('rewards.all_children')}`
: assignedTo.map((cid) => html`${childMap[cid] || cid}`))
: '';
const costBadge = html`⭐ ${d.displayCost} ${pointsName}`;
const bar = d.isJackpot
? html``
: html``;
const claimBtn = d.showClaim
? html``
: '';
const poolControls = d.showPoolControls
? (d.poolFull
? html``
: html`
${this._quickDepositAmounts().map((amt, i, arr) => {
const disabled = !d.relevantChild || d.spendable < amt || this._loading[`${reward.id}_alloc`];
return html``;
})}
${this._renderCustomDeposit(reward, d.relevantChild, d.spendable, this._loading[`${reward.id}_alloc`], { button: 'btn sm', input: 'rw-deposit-input' })}
`)
: '';
const statusLine = d.hasPendingClaim
? html`⏳ ${this._t('rewards.awaiting_approval')}`
: d.canAfford && d.showClaim
? html`${this._t('reward_progress.ready_to_claim')}`
: html`${d.currentStars} / ${d.displayCost}`;
return html`
${child.name}
⭐
${this._t('rewards.spendable_balance')}: ${spendable}
${emoji}
${bar}
${d.isJackpot ? html`
${d.isJackpot ? html`🎰 ${this._t('rewards.jackpot')}` : ''}
${costBadge}
${reward.name}
${reward.description ? html`${reward.description}
` : ''}
${avail ? html`${avail.label}` : ''}
${badges ? html`${badges}
` : ''}
${d.childContributions.map((c) => html`
${this._av(c.child, c.tone, 16)} ${c.points}`)}
` : ''}
${statusLine}
${claimBtn}${poolControls}