@star-insure/sdk 1.0.1 → 1.1.0

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;
+}

package/src/lib/quoteRequestForm.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { InertiaFormProps, useForm } from "@inertiajs/inertia-react";
+import type { QuoteRequest } from '../types';
+
+interface QuoteRequestFormContextInterface {
+    form?: InertiaFormProps<QuoteRequest>;
+    handleChange?: (e: React.ChangeEvent<HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement>) => void;
+}
+
+export const initialData: QuoteRequest = {
+    id: undefined,
+    status: 'new',
+    source: 'web',
+    reference: '',
+    client_number: '',
+    first_name: '',
+    last_name: '',
+    phone: '',
+    mobile: '',
+    email: '',
+    licence: '',
+    licence_other: '',
+    promo_code: '',
+    club_membership_number: '',
+    length_of_insurance: '',
+    dob: '',
+    club_id: undefined,
+    street_address: {
+        address: '',
+        unit: '',
+        suburb: '',
+        city: '',
+        post_code: '',
+    },
+    declaration: {
+        had_incident: undefined,
+        incidents: [],
+        has_demerit_points: undefined,
+        demerit_points: '',
+        has_lost_licence: undefined,
+        lost_licence_details: '',
+        was_refused_insurance: undefined,
+        refused_insurance_details: '',
+        has_criminal_conviction: undefined,
+        criminal_conviction_details: '',
+        has_vehicle_modifications: undefined,
+        vehicle_modifications_details: '',
+        has_previous_insurer: undefined,
+        previous_insurer_details: '',
+        previous_insurer_expires_at: '',
+        additional_details: '',
+    },
+    vehicles: [],
+    // Portal specific fields:
+    purchase_options: [],
+    theme: '',
+    broker_fee: undefined,
+    broker_id: undefined,
+    broker_firm_id: undefined,
+    agent_id: undefined,
+    agent_firm_id: undefined,
+    staff_member_id: undefined,
+    sent_at: undefined,
+    sold_at: undefined,
+    referrer_id: undefined,
+    referrer_category_id: undefined,
+    pricing_expires_at: undefined,
+    follow_up_at: undefined,
+}
+
+export const QuoteRequestFormContext = React.createContext<QuoteRequestFormContextInterface>({});
+
+export function QuoteRequestFormProvider({ children }: { children: React.ReactNode }) {
+    const form = useForm<QuoteRequest>(initialData);
+
+    /**
+     * Handle the change event for all form inputs
+     */
+    function handleChange(e: React.SyntheticEvent<HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement>) {
+        const { name } = e.currentTarget;
+        let value: string|boolean|undefined = e.currentTarget.value;
+
+        if (e.currentTarget.type === 'checkbox' || e.currentTarget.type === 'radio') {
+            const target = e.currentTarget as HTMLInputElement;
+            value = target.value === '1' ? true : false;
+        }
+
+        if (name.includes('.')) {
+            const parts = name.split('.');
+
+            if (parts.length === 2) {
+                return form.setData(prevData => ({
+                    ...prevData,
+                    [parts[0]]: {
+                        // @ts-ignore TODO: Maybe fix these TS errors
+                        ...prevData[parts[0]],
+                        [parts[1]]: value,
+                    },
+                }));
+            } else {
+                // We don't want to handle anything double-nested. These should be handled by their own local state.
+                return;
+            }
+        }
+
+        return form.setData(prevData => ({
+            ...prevData,
+            [name]: value,
+        }));
+    }
+
+    return (
+        <QuoteRequestFormContext.Provider value={{ form, handleChange }}>
+            {children}
+        </QuoteRequestFormContext.Provider>
+    );
+}
+
+/**
+ * Takes in a quote request and returns data suitable to populate a form
+ * by recursively calling this function, converting null to undefined.
+ */
+ export function sanitiseQuoteRequestFormData(value: any): any {
+    if (Array.isArray(value)) {
+        return value.map(item => sanitiseQuoteRequestFormData(item));
+    }
+
+    if (value === null) {
+        return "";
+    }
+
+    if (typeof value === 'object') {
+        // Map over each property and convert null to undefined
+        return Object.keys(value).reduce((acc, key) => {
+            // @ts-ignore
+            acc[key] = sanitiseQuoteRequestFormData(value[key]);
+            return acc;
+        }, {});
+    }
+
+    return value;
+}
+
+export const useQuoteRequestForm = () => React.useContext(QuoteRequestFormContext);

package/src/lib/quoteRequestOptions.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { QuoteRequestOptions } from '../';
+
+interface QuoteRequestFormContextInterface {
+    options?: QuoteRequestOptions;
+    setOptions: (options: QuoteRequestOptions) => void;
+}
+
+const QuoteRequestOptionsContext = React.createContext<QuoteRequestFormContextInterface>({ setOptions: () => {} });
+
+export function QuoteRequestOptionsProvider({ children }: { children: React.ReactNode }) {
+    const [options, setOptions] = React.useState<QuoteRequestOptions>();
+
+    return (
+        <QuoteRequestOptionsContext.Provider value={{ options, setOptions }}>
+            {children}
+        </QuoteRequestOptionsContext.Provider>
+    )
+}
+
+export const useQuoteRequestOptions = () => React.useContext(QuoteRequestOptionsContext);

package/src/lib/toast.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { Toast } from "../types";
+import { v4 as uuid } from 'uuid';
+
+interface ToastContextInterface {
+    toasts: Toast[];
+    addToast: (toast: Toast) => void;
+    removeToast: (id: Toast['_id']) => void;
+}
+
+const ToastContext = React.createContext<ToastContextInterface>({
+    toasts: [],
+    addToast: (t: Toast) => {t},
+    removeToast: (t: Toast['_id']) => {t},
+});
+
+export function ToastProvider({ children }: any) {
+    const [toasts, setToasts] = React.useState<Toast[]>([]);
+
+    /**
+     * Add a new toast popup message
+     */
+    function addToast({ message, status, timeout = 4000 }: Toast) {
+        const newToast: Toast = { message, status, timeout };
+
+        newToast._id = uuid();
+
+        setToasts(curr => [...curr, newToast]);
+
+        setTimeout(() => {
+            removeToast(newToast._id);
+        }, timeout);
+    }
+
+    /**
+     * Remove a toast message
+     */
+    function removeToast(id: Toast['_id']) {
+        setToasts(curr => curr.filter(toast => toast._id !== id));
+    }
+
+    const context: ToastContextInterface = {
+        toasts,
+        addToast,
+        removeToast,
+    }
+
+    return (
+        <ToastContext.Provider value={context}>
+            {children}
+        </ToastContext.Provider>
+    );
+}
+
+export const useToast = () => React.useContext(ToastContext);