@star-insure/sdk 1.0.1 → 1.1.2

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,187 @@
+import React from 'react';
+import { sanitiseVehicleType } from '../../lib';
+import { ApiResponse, FormStatus, MotorwebVehicleResponse, VehicleType } from '../../types';
+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>
+    )
+}

package/src/components/tables/TableRow.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface Props {
+    children: React.ReactNode;
+    className?: string;
+    onClick?: () => void;
+}
+
+export default function TableRow({ children, className = '', onClick = () => {} }: Props) {
+    const bgClass = className.includes('bg') ? '' : 'bg-white even:bg-gray-50'
+
+    return (
+        <tr className={`${className} ${bgClass} hover:bg-gray-100`} onClick={onClick}>
+            {children}
+        </tr>
+    )
+}

package/src/components/tables/index.ts

@@ -0,0 +1,17 @@
+import Table from './Table';
+import TableActions from './TableActions';
+import TableBody from './TableBody';
+import TableCell from './TableCell';
+import TableHead from './TableHead';
+import TableHeader from './TableHeader';
+import TableRow from './TableRow';
+
+export {
+    Table,
+    TableActions,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+}

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './types';
 export * from './lib';
+export * from './components';

package/src/lib/addressFinder.tsx

@@ -0,0 +1,100 @@
+const prodConfig = {
+    key: 'XVAKN4Q9PREJD8CUTFBW',
+    baseUrl: 'https://api.addressfinder.io/api/nz/address',
+}
+
+const config = prodConfig;
+
+interface AutocompleteResponse {
+    completions: AddressCompletion[];
+    paid: boolean;
+    demo: boolean;
+    success: boolean;
+}
+
+export interface AddressCompletion {
+    a: string;
+    pxid: string;
+    v: number;
+}
+
+export interface AddressData {
+    pxid: string;
+    a: string;
+    aims_address_id: string;
+    sufi: number;
+    ta_id: string;
+    ta: string;
+    tasub_id: string;
+    tasub: string;
+    number: string;
+    x: string;
+    y: string;
+    postcode: string;
+    street: string;
+    street_name: string;
+    street_type: string;
+    city: string;
+    suburb: string;
+    region_id: string;
+    region: string;
+    postal_line_1: string;
+    postal_line_2: string;
+    aims_road_section_id: string;
+    rural: string;
+    address_line_1: string;
+    address_line_2?: string;
+    primary_parcel_id: string;
+    meshblock: string;
+    sa1_id: string;
+    sa2_id: string;
+    sa2: string;
+    cb_id: string;
+    cb: string;
+    ward_id: string;
+    ward: string;
+    con_id: string;
+    con: string;
+    maoricon_id: string;
+    maoricon: string;
+    iur_id: string;
+    iur: string;
+    ur_id: string;
+    ur: string;
+    landwater_id: string;
+    landwater: string;
+    success: boolean;
+}
+
+export async function autocomplete(search: string): Promise<AddressCompletion[]> {
+    const { key, baseUrl } = config;
+    const q = encodeURIComponent(search);
+
+    const res = await fetch(`${baseUrl}/autocomplete/?key=${key}&q=${q}&format=json&strict=2`);
+
+    if (!res.ok) {
+        return [];
+    }
+
+    const data: AutocompleteResponse = await res.json();
+
+    if (data.completions) {
+        return data.completions;
+    }
+
+    return [];
+}
+
+export async function getAddressData(completion: AddressCompletion): Promise<AddressData|null> {
+    const { key, baseUrl } = config;
+
+    const res = await fetch(`${baseUrl}/metadata/?key=${key}&pxid=${completion.pxid}&format=json`);
+
+    if (!res.ok) {
+        return null;
+    }
+
+    const data: AddressData = await res.json();
+
+    return data;
+}

package/src/lib/auth.tsx

@@ -0,0 +1,8 @@
+import { usePage } from '@inertiajs/inertia-react';
+import type { AuthContext, PageProps } from '../types';
+
+export function useAuth(): AuthContext {
+    const { props } = usePage<PageProps>() as PageProps;
+
+    return props.auth;
+}

package/src/lib/calculateAge.ts

@@ -0,0 +1,19 @@
+/**
+ * Calculate someone's age from a date of birth.
+ * @param date YYYY-MM-DD
+ */
+ export function calculateAge(date: string): number {
+    const today = new Date();
+
+    const birthDate = new Date(date);
+
+    const age = today.getFullYear() - birthDate.getFullYear();
+
+    const m = today.getMonth() - birthDate.getMonth();
+
+    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+        return age - 1;
+    }
+
+    return age;
+}

package/src/lib/clickOutside.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+export function useClickOutside(ref: any, handler: (e: Event) => void) {
+    useEffect(
+        () => {
+            const listener = (event: Event) => {
+                // Do nothing if clicking ref's element or descendent elements
+                if (!ref.current || ref.current.contains(event.target)) {
+                    return;
+                }
+                handler(event);
+            };
+
+            document.addEventListener('mousedown', listener);
+            document.addEventListener('touchstart', listener);
+
+            return () => {
+                document.removeEventListener('mousedown', listener);
+                document.removeEventListener('touchstart', listener);
+            };
+        },
+        [ref, handler]
+    );
+}

package/src/lib/index.ts

@@ -1,3 +1,12 @@
 export * from './dates';
 export * from './money';
 export * from './vehicles';
+export * from './auth';
+export * from './clickOutside';
+export * from './inertiaOptions';
+export * from './localStorage';
+export * from './toast';
+export * from './quoteRequestForm';
+export * from './quoteRequestOptions';
+export * from './addressFinder';
+export * from './calculateAge';

package/src/lib/inertiaOptions.tsx

@@ -0,0 +1,27 @@
+import type { VisitOptions } from '@inertiajs/inertia/types';
+import { useToast } from './toast';
+
+interface Options {
+    successMessage?: string;
+}
+
+export function useInertiaOptions({ successMessage = '' }: Options): VisitOptions {
+    const { addToast } = useToast();
+
+    return {
+        onSuccess: () => {
+            addToast({
+                message: successMessage ?? 'Your request was successful.',
+                status: 'success',
+            });
+        },
+        onError: (errors) => {
+            Object.values(errors).forEach((err) => {
+                addToast({
+                    message: err,
+                    status: 'error',
+                });
+            });
+        }
+    }
+}

package/src/lib/localStorage.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+    // State to store our value
+    // Pass initial state function to useState so logic is only executed once
+    const [storedValue, setStoredValue] = useState<T>(() => {
+        if (typeof window === "undefined") {
+            return initialValue;
+        }
+        try {
+            // Get from local storage by key
+            const item = window.localStorage.getItem(key);
+            // Parse stored json or if none return initialValue
+            return item ? JSON.parse(item) : initialValue;
+        } catch (error) {
+            // If error also return initialValue
+            console.log(error);
+            return initialValue;
+        }
+    });
+    // Return a wrapped version of useState's setter function that ...
+    // ... persists the new value to localStorage.
+    const setValue = (value: T | ((val: T) => T)) => {
+        try {
+            // Allow value to be a function so we have same API as useState
+            const valueToStore =
+                value instanceof Function ? value(storedValue) : value;
+            // Save state
+            setStoredValue(valueToStore);
+            // Save to local storage
+            if (typeof window !== "undefined") {
+                window.localStorage.setItem(key, JSON.stringify(valueToStore));
+            }
+        } catch (error) {
+            // A more advanced implementation would handle the error case
+            console.log(error);
+        }
+    };
+
+    return [storedValue, setValue] as const;
+}