132 lines
3.6 KiB
TypeScript
132 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@components/ui/card';
|
|
import { Checkbox } from '@components/ui/checkbox';
|
|
import { Textarea } from '@components/ui/textarea';
|
|
import { useGlobalState } from '@contexts/state/StateContext';
|
|
|
|
const nonCustomerTiers = [
|
|
{
|
|
id: 'soon',
|
|
label: 'Soon-to-be non-customers who are on the edge of your market',
|
|
},
|
|
{
|
|
id: 'refusing',
|
|
label: 'Refusing non-customers who consciously choose against your market',
|
|
},
|
|
{
|
|
id: 'unexplored',
|
|
label: 'Unexplored non-customers who are in markets distant from yours',
|
|
},
|
|
];
|
|
|
|
const sequenceSteps = [
|
|
{
|
|
id: 'utility',
|
|
label: 'Does your offering deliver exceptional utility to buyers?',
|
|
},
|
|
{ id: 'price', label: 'Is your price accessible to the mass of buyers?' },
|
|
{
|
|
id: 'cost',
|
|
label: 'Can you attain your cost target to profit at your strategic price?',
|
|
},
|
|
{
|
|
id: 'adoption',
|
|
label: 'Are there adoption hurdles in actualizing your idea?',
|
|
},
|
|
];
|
|
|
|
const Validation = () => {
|
|
const { state, dispatch } = useGlobalState();
|
|
|
|
const toggleNonCustomer = (key: string) => {
|
|
dispatch({
|
|
type: 'TOGGLE_NON_CUSTOMER',
|
|
payload: { key },
|
|
});
|
|
};
|
|
|
|
const toggleSequence = (key: string) => {
|
|
dispatch({
|
|
type: 'TOGGLE_SEQUENCE',
|
|
payload: { key },
|
|
});
|
|
};
|
|
|
|
const updateNotes = (notes: string) => {
|
|
dispatch({
|
|
type: 'UPDATE_VALIDATION_NOTES',
|
|
payload: notes,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Non-Customer Analysis</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{nonCustomerTiers.map((tier) => (
|
|
<div key={tier.id} className="flex items-start space-x-2">
|
|
<Checkbox
|
|
id={tier.id}
|
|
checked={state.validation.nonCustomers[tier.id] || false}
|
|
onCheckedChange={() => toggleNonCustomer(tier.id)}
|
|
/>
|
|
<label
|
|
htmlFor={tier.id}
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
{tier.label}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Strategic Sequence</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{sequenceSteps.map((step) => (
|
|
<div key={step.id} className="flex items-start space-x-2">
|
|
<Checkbox
|
|
id={step.id}
|
|
checked={state.validation.sequence[step.id] || false}
|
|
onCheckedChange={() => toggleSequence(step.id)}
|
|
/>
|
|
<label
|
|
htmlFor={step.id}
|
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
{step.label}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Notes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Textarea
|
|
placeholder="Add validation notes..."
|
|
value={state.validation.notes}
|
|
onChange={(e) => updateNotes(e.target.value)}
|
|
className="min-h-[200px]"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Validation;
|