@star-insure/sdk 1.0.0 → 1.1.1

package/src/components/forms/DateOfBirthField.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { padStart } from "lodash-es";
+
+interface Props {
+    value?: string;
+    onChange: (newValue: string) => void;
+}
+
+export default function DateOfBirthField({ value, onChange }: Props) {
+    const [dateOfBirth, setDateOfBirth] = React.useState({
+        day: value?.split("-")[2] || '',
+        month: value?.split("-")[1] || '',
+        year: value?.split("-")[0] || '',
+    });
+
+    const dayOptions = [...Array.from(Array(31).keys())].map(value => {
+        return padStart(`${value + 1}`, 2, '0');
+    });
+
+    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    const monthOptions = [...Array.from(Array(12).keys())].map(value => {
+        return {
+            title: months[value],
+            value: padStart(`${value + 1}`, 2, '0')
+        }
+    })
+
+    const thisYear = new Date().getFullYear();
+    const yearOptions = [...Array.from(Array(100).keys())].map(value => {
+        return (thisYear - value - 16).toString();
+    });
+
+    function handleSelectChange(e: React.FormEvent<HTMLSelectElement>) {
+        const { name, value } = e.currentTarget;
+
+        const newDob = {
+            ...dateOfBirth,
+            [name]: value,
+        }
+
+        // Set local state
+        setDateOfBirth(newDob);
+
+        // Format the date for the API
+        const formattedDate = `${newDob.year}-${newDob.month}-${newDob.day}`;
+
+        // Call the upstream prop if we have all of the date parts
+        if (Object.values(newDob).every(value => value !== '')) {
+            onChange(formattedDate);
+        } else {
+            // Otherwise, clear the value
+            onChange('');
+        }
+    }
+
+    return (
+        <label className="w-full">
+            <span className="relative mr-auto">
+                <span>Date of birth</span>
+            </span>
+
+            <span className="flex space-x-4 border border-gray-300 rounded-lg mt-1 bg-white">
+                <select name="day" value={dateOfBirth.day} className="flex-grow focus:outline-none border-0" onChange={handleSelectChange} required>
+                    <option value="">Day</option>
+                    {dayOptions.map(option => (
+                        <option key={option} value={option}>{option}</option>
+                    ))}
+                </select>
+                <select name="month" value={dateOfBirth.month} className="flex-grow focus:outline-none border-0" onChange={handleSelectChange} required>
+                    <option value="">Month</option>
+                    {monthOptions.map(option => (
+                        <option key={option.value} value={option.value}>{option.title}</option>
+                    ))}
+                </select>
+                <select name="year" value={dateOfBirth.year} className="flex-grow focus:outline-none border-0" onChange={handleSelectChange} required>
+                    <option value="">Year</option>
+                    {yearOptions.map(option => (
+                        <option key={option} value={option}>{option}</option>
+                    ))}
+                </select>
+            </span>
+        </label>
+    )
+}

package/src/components/forms/Errors.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ErrorBag, Errors } from "@inertiajs/inertia"
+import { Card } from "../common";
+
+interface Props {
+    heading?: string;
+    errors?: Errors & ErrorBag;
+    renderKeys?: boolean;
+    className?: string;
+}
+
+export default function Errors({ heading = 'There was an error with your submission.', errors = {}, renderKeys = false, className = '' }: Props) {
+    if (Object.values(errors).length === 0) {
+        return <></>
+    }
+
+    return (
+        <aside className={`${className} col-span-full`}>
+            <Card className="border border-red-500 !bg-red-50">
+                <h2 className="font-black text-red-500 mb-2">{heading}</h2>
+                <ul className="space-y-2 list-disc ml-4">
+                    {Object.entries(errors).map(([field, message]) => (
+                        <li className="font-bold text-red-500" key={field}>
+                            {renderKeys && <strong>{field}: </strong>}
+                            { message }
+                        </li>
+                    ))}
+                </ul>
+            </Card>
+        </aside>
+    )
+}

package/src/components/forms/FormTester.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { Button } from '../common';
+import { useQuoteRequestForm } from '../../lib';
+
+interface Props {
+    populatePurchaseOptions: boolean;
+}
+
+export default function FormTester({ populatePurchaseOptions = false }: Props) {
+    const { form } = useQuoteRequestForm();
+    const [keys, setKeys] = React.useState<string[]>([]);
+    const [isDev, setDev] = React.useState<boolean>(false);
+
+    function handlePopulate() {
+        form?.setData(prevData => ({
+            ...prevData,
+            first_name: 'TEST',
+            last_name: 'TEST',
+            email: 'dev@sual.co.nz',
+            phone: '021 234 5678',
+            mobile: '021 234 5678',
+            dob: '1990-01-01',
+            licence: 'Other',
+            licence_other: 'Test',
+            club_id: 50,
+            club_membership_number: '12345',
+            street_address: {
+                address: '123 Street Name',
+                unit: 'Level 1',
+                suburb: 'Suburb',
+                city: 'Auckland',
+                post_code: '1234',
+            },
+            promo_code: 'TEST',
+            declaration: {
+                had_incident: true,
+                incidents: [{
+                    description: 'Lorem ipsum dolor sit amet.',
+                    month: 'January',
+                    year: '2020',
+                }],
+                has_demerit_points: true,
+                demerit_points: '1-24',
+                has_lost_licence: true,
+                lost_licence_details: 'Lorem ipsum dolor sit amet.',
+                was_refused_insurance: true,
+                refused_insurance_details: 'Lorem ipsum dolor sit amet.',
+                has_criminal_conviction: true,
+                criminal_conviction_details: 'Lorem ipsum dolor sit amet.',
+                has_vehicle_modifications: true,
+                vehicle_modifications_details: 'Lorem ipsum dolor sit amet.',
+                has_previous_insurer: true,
+                previous_insurer_details: 'AA',
+                previous_insurer_expires_at: '2020-01-01',
+                additional_details: 'I am a robot, beep boop. Please ignore this submission.',
+            },
+            vehicles: [
+                {
+                    make: 'Tesla',
+                    model: 'Cybertruck',
+                    year: '2023',
+                    registration: 'ELMUSK',
+                    vehicle_type: 'car',
+                    product: 'star-enthusiast-prestige-everyday-plus',
+                    value: 100000,
+                    is_heavy: false,
+                    usage: 'Childrens car',
+                    storage_location: 'Carport',
+                    has_financially_interested_party: true,
+                    financially_interested_party_detail: 'MTA',
+                    owned_duration: 'Less than 12 months',
+                    drivers: [
+                        {
+                            first_name: 'X Æ',
+                            last_name: 'A-12',
+                            dob: '2020-05-04',
+                            licence: 'Other',
+                            licence_other: 'None',
+                            relationship: 'Child',
+                        }
+                    ],
+                },
+            ],
+            purchase_options: populatePurchaseOptions ? [
+                {
+                    premium_type: 'annual',
+                    level_of_insurance_id: 12,
+                    authorised_drivers: 'TEST',
+                    excess_details: 'TEST',
+                    terms: 'TEST',
+                    description: 'This is a test purchase option',
+                    premium: 100000,
+                    monthly_premium: 8500,
+                    show_monthly: true,
+                    fsl: 100,
+                    benefits: [{id: 2}, {id: 8}],
+                    benefit_template_id: 3,
+                    sort_order: 1,
+                    enhancements: [
+                        { name: 'Test enhancement', premium: 2500, disable_rounding: false, description: 'Test enhancement', auto_select: true },
+                        { name: 'Test enhancement', premium: 5000, disable_rounding: false, description: 'Test enhancement', auto_select: false }
+                    ],
+                },
+                {
+                    premium_type: 'total-due',
+                    level_of_insurance_id: 13,
+                    authorised_drivers: 'TEST',
+                    excess_details: 'TEST',
+                    terms: 'TEST',
+                    description: 'This is a test purchase option',
+                    premium: 100000,
+                    show_monthly: false,
+                    fsl: 100,
+                    benefits: [{id: 2}, {id: 8}],
+                    benefit_template_id: 3,
+                    sort_order: 2,
+                    enhancements: [
+                        { name: 'Test enhancement', premium: 2500, disable_rounding: false, description: 'Test enhancement', auto_select: true },
+                        { name: 'Test enhancement', premium: 5000, disable_rounding: false, description: 'Test enhancement', auto_select: false }
+                    ],
+                }
+            ] : [],
+        }))
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === 'Escape') {
+            return setKeys([]);
+        }
+
+        setKeys(prevKeys => [...prevKeys, e.key]);
+    }
+
+    React.useEffect(() => {
+        // Detect when the user has typed the word "debug"
+        if (keys.join('') === 'debug') {
+            handlePopulate();
+        }
+    }, [keys]);
+
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            if (window.location.href.includes('dev')
+                || window.location.href.includes('localhost')
+                || window.location.href.includes('test')
+                || window.location.href.includes('local')
+            ) {
+                setDev(true);
+            }
+
+            window.addEventListener('keydown', (e: KeyboardEvent) => handleKeydown(e));
+
+            return () => {
+                window.removeEventListener('keydown', (e: KeyboardEvent) => handleKeydown(e));
+            }
+        }
+
+        return;
+    }, []);
+
+    if (isDev) {
+        return (
+            <Button onClick={handlePopulate} type="button" status="primary" className="fixed bottom-4 right-4">
+                Populate data
+            </Button>
+        )
+    }
+
+    return <></>;
+}

package/src/components/forms/MoneyField.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { formatMoney, formatNumber } from "../../lib";
+
+interface Props {
+    value?: number;
+    onChange: (value: number) => void;
+    id?: string;
+    name?: string;
+    className?: string;
+    required?: boolean;
+}
+
+export default function MoneyField({ value = 0, onChange, name = 'value', id = 'value', className = '', required = false }: Props) {
+    function handleChange(e: React.SyntheticEvent<HTMLInputElement>) {
+        let newValue: number = 0;
+
+        if (e.currentTarget.value) {
+            newValue = formatNumber(e.currentTarget.value);
+
+            if (isNaN(newValue)) {
+                newValue = 0;
+            }
+        }
+
+        onChange(newValue);
+    }
+
+    const displayValue = formatMoney(value, 0);
+
+    return (
+        <div className={`${className} flex items-center gap-2 pl-4 rounded-md border border-gray-300 transition-all focus-within:border-teal focus-within:outline-none focus-within:ring focus-within:ring-teal focus-within:ring-opacity-50`}>
+            <span className="font-bold">$</span>
+            <input
+                type="text"
+                name={name}
+                id={id}
+                value={displayValue}
+                onChange={handleChange}
+                className="w-full !focus:outline-none !focus:ring-0 !focus:ring-transparent !focus:ring-opacity-0 !ring-0 !border-0 !transition-none"
+                required={required}
+            />
+        </div>
+    );
+
+}

package/src/components/forms/RegistrationSearchField.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import { ApiResponse, FormStatus, MotorwebVehicleResponse, sanitiseVehicleType, VehicleType } from '../../';
+import { useToast } from '../../lib/toast';
+
+export interface VehicleData extends MotorwebVehicleResponse {
+    make: string;
+    model: string;
+    year: string;
+    vehicle_type: VehicleType;
+    is_heavy: boolean;
+}
+
+export interface RegistrationSearchOnChange {
+    registration: string;
+}
+
+interface Props {
+    onChange?: (values: RegistrationSearchOnChange) => void;
+    onVehicleDataFound: (vehicleData: VehicleData) => void;
+    apiUrl?: string;
+    showOdometerReadingField?: boolean;
+    showConditionField?: boolean;
+    initialRegistrationValue?: string;
+}
+
+export const conditionOptions = ['POOR', 'FAIR', 'AVERAGE', 'GOOD', 'VERY_GOOD', 'AS_NEW', 'NEW'];
+
+export default function RegistrationSearchField({
+        initialRegistrationValue = '',
+        onVehicleDataFound,
+        apiUrl = "/api/rego-search",
+        showOdometerReadingField = false,
+        showConditionField = false,
+        onChange,
+    }: Props) {
+
+    const [rego, setRego] = React.useState<string>(initialRegistrationValue);
+    const [odo, setOdo] = React.useState<string>('');
+    const [condition, setCondition] = React.useState<string>('GOOD');
+
+    const [status, setStatus] = React.useState<FormStatus>('idle');
+    const { addToast } = useToast();
+
+    function handleChange(e: React.SyntheticEvent<HTMLInputElement|HTMLSelectElement>) {
+        if (e.currentTarget.name === 'registration_search') {
+            setRego(e.currentTarget.value?.toUpperCase() || '');
+        }
+
+        if (e.currentTarget.name === 'odo_search') {
+            setOdo(e.currentTarget.value);
+        }
+
+        if (e.currentTarget.name === 'condition_search') {
+            setCondition(e.currentTarget.value);
+        }
+
+        if (onChange) {
+            onChange({ registration: e.currentTarget.value.toUpperCase() });
+        }
+    }
+
+    function handleKeydown(e: React.KeyboardEvent) {
+        if (e.key === 'Enter') {
+            handleSearch();
+        }
+    }
+
+    async function handleSearch() {
+        setStatus('processing');
+
+        const payload = {
+            registration: rego,
+            odometerReading: odo,
+            condition,
+        };
+
+        // Turn the payload in to a query string
+        // @ts-ignore
+        const query = new URLSearchParams(payload).toString();
+
+        const res = await fetch(`${apiUrl}?${query}`, {
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+        if (!res.ok) {
+            addToast({ message: `There was an error with the provided registration.`, status: 'error', timeout: 3000 });
+            setStatus('error');
+            return;
+        }
+
+        const { data, ok }: ApiResponse<MotorwebVehicleResponse> = await res.json();
+
+        if (!ok || !data) {
+            addToast({ message: `Failed to find vehicle, please complete manually.`, status: 'error', timeout: 3000 });
+            setStatus('error');
+            return;
+        }
+
+        const vehicleData = data.data.vehicle;
+
+        const make = vehicleData.make;
+        const model = vehicleData.model;
+        const year = vehicleData['year-of-manufacture'];
+        const weight = vehicleData['gross-vehicle-mass'] ? parseInt(vehicleData['gross-vehicle-mass'].replaceAll(',', '')) : 0;
+        const vehicleType = vehicleData['vehicle-type'];
+
+        if (!make || !model || !year || !vehicleType) {
+            addToast({ message: `We couldn't find all of your data, please complete manually.`, status: 'error', timeout: 3000 });
+            setStatus('error');
+        }
+
+        onVehicleDataFound({
+            ...data,
+            make: make || '',
+            model: model || '',
+            year: year || '',
+            vehicle_type: vehicleType ? sanitiseVehicleType(vehicleType) : 'car',
+            is_heavy: weight && weight > 3500 || false,
+        });
+
+        setStatus('success');
+    }
+
+    return (
+        <div className="w-full flex flex-col">
+            <div className="w-full flex flex-wrap gap-3 bg-gray-100 rounded-md p-3">
+                {showOdometerReadingField || showConditionField && (
+                    <div className="w-full grid grid-cols-2 gap-3">
+                        {showOdometerReadingField && (
+                            <label>
+                                Approx. km travelled
+                                <input
+                                    onKeyDown={handleKeydown}
+                                    type="number"
+                                    name="odo_search"
+                                    id="odo_search"
+                                    value={odo}
+                                    onChange={handleChange}
+                                    className={`transition-all ${status === 'processing' ? 'pointer-events-none opacity-50' : ''}`}
+                                    disabled={status === 'processing'}
+                                />
+                            </label>
+                        )}
+
+                        {showConditionField && (
+                            <label>
+                                Vehicle condition
+                                <select
+                                    name="condition_search"
+                                    id="condition_search"
+                                    value={condition}
+                                    onChange={handleChange}
+                                    className={`transition-all ${status === 'processing' ? 'pointer-events-none opacity-50' : ''}`}
+                                    disabled={status === 'processing'}
+                                >
+                                    {conditionOptions.map(conditionOption => (
+                                        <option key={conditionOption}>{conditionOption}</option>
+                                    ))}
+                                </select>
+                            </label>
+                        )}
+                    </div>
+                )}
+
+                <input
+                    onKeyDown={handleKeydown}
+                    placeholder="Search for your rego"
+                    type="text"
+                    name="registration_search"
+                    id="registration_search"
+                    value={rego}
+                    onChange={handleChange}
+                    className={`flex-grow transition-all ${status === 'processing' ? 'pointer-events-none opacity-50' : ''}`}
+                    disabled={status === 'processing'}
+                />
+
+                <button title="Search" type="button" onClick={handleSearch} disabled={status === 'processing'} className={`bg-teal px-4 py-3 rounded-md transition-all`}>
+                    <span className="sr-only">Search</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    )
+}

package/src/components/forms/index.ts

@@ -0,0 +1,13 @@
+import DateOfBirthField from './DateOfBirthField';
+import MoneyField from './MoneyField';
+import RegistrationSearchField from './RegistrationSearchField';
+import FormTester from './FormTester';
+import Errors from './Errors';
+
+export {
+    DateOfBirthField,
+    MoneyField,
+    RegistrationSearchField,
+    FormTester,
+    Errors,
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './common';
+export * from './tables';
+export * from './forms';

package/src/components/tables/Table.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface Props {
+    children: React.ReactNode;
+}
+
+export default function Table({ children }: Props) {
+    return (
+        <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8 text-sm">
+            <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+                <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                    <table className="min-w-full divide-y divide-gray-300">
+                        {children}
+                    </table>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/tables/TableActions.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export default function TableActions({ children, className = '' }: Props) {
+    return (
+        <div className={`${className} flex gap-4 justify-end items-center`}>
+            {children}
+        </div>
+    )
+}

package/src/components/tables/TableBody.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export default function TableBody({ children, className = '' }: Props) {
+    return (
+        <tbody className={`${className ?? ''} divide-y divide-gray-200 bg-white`}>
+            {children}
+        </tbody>
+    )
+}

package/src/components/tables/TableCell.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export default function TableCell({ children, className = '' }: Props) {
+    return (
+        <td className={`${className} px-3 py-3 text-sm text-gray-500`}>
+            {children}
+        </td>
+    )
+}

package/src/components/tables/TableHead.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export default function TableHead({ children, className = '' }: Props) {
+    return (
+        <thead className={`${className} px-3 py-4 text-sm text-white bg-gray-600`}>
+            {children}
+        </thead>
+    )
+}

package/src/components/tables/TableHeader.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Link } from "@inertiajs/inertia-react";
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    textAlign?: 'left' | 'right' | 'center';
+    sort?: string;
+}
+
+export default function TableHeader({ children, className = '', sort, textAlign = 'left' }: Props) {
+    const [sortLink, setSortLink] = React.useState<string>('');
+
+    React.useEffect(() => {
+        if (typeof window !== 'undefined' && sort) {
+            const query = new URLSearchParams(window.location.search);
+
+            let direction: 'asc' | 'desc' = 'asc';
+
+            if (query.get('sort')) {
+                // Choose the opposite direction for sorting
+                direction = query.get('sort')?.includes('asc') ? 'desc' : 'asc';
+            }
+
+            query.set('sort', `${sort} ${direction}`);
+
+            setSortLink(`?${query.toString()}`);
+        }
+    }, []);
+
+    const textAlignClass = textAlign === 'center' && 'text-center justify-center'
+        || textAlign === 'right' && 'text-right justify-end'
+        || 'text-left justify-between';
+
+    return (
+        <th className={`${className} py-3.5 px-3 text-sm font-semibold text-left`}>
+            <div className={`flex items-center gap-3 ${textAlignClass}`}>
+                {children}
+                {sort && (
+                    <Link href={sortLink}>
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
+                        </svg>
+                    </Link>
+                )}
+            </div>
+        </th>
+    )
+}