@star-insure/sdk 1.0.1 → 1.1.2

package/package.json

@@ -2,14 +2,14 @@
     "name": "@star-insure/sdk",
     "description": "The SDK for Star Insure client apps with shared helper functions and TypeScript definitions.",
     "author": "alexclark_nz",
-    "version": "1.0.1",
+    "version": "1.1.2",
     "license": "MIT",
     "repository": {
         "type": "git",
         "url": "https://github.com/star-insure/sdk"
     },
-    "main": "dist/index.js",
-    "typings": "dist/index.d.ts",
+    "main": "./index.js",
+    "typings": "./index.d.ts",
     "files": [
         "dist",
         "src"
@@ -18,14 +18,8 @@
         "node": ">=10"
     },
     "scripts": {
-        "dev": "tsdx watch",
-        "start": "tsdx watch",
-        "build": "tsdx build",
-        "test": "tsdx test",
-        "lint": "tsdx lint",
-        "prepare": "tsdx build",
-        "size": "size-limit",
-        "analyze": "size-limit --why"
+        "dev": "tsc",
+        "build": "tsc"
     },
     "husky": {
         "hooks": {
@@ -51,6 +45,10 @@
     ],
     "devDependencies": {
         "@size-limit/preset-small-lib": "^7.0.8",
+        "@types/lodash-es": "^4.17.6",
+        "@types/react": "^18.0.19",
+        "@types/react-dom": "^18.0.6",
+        "@types/uuid": "^8.3.4",
         "husky": "^8.0.1",
         "np": "^7.6.1",
         "size-limit": "^7.0.8",
@@ -59,7 +57,13 @@
         "typescript": "^3.9.10"
     },
     "dependencies": {
+        "@headlessui/react": "^1.6.3",
         "@inertiajs/inertia": "^0.11.0",
-        "date-fns": "^2.28.0"
+        "@inertiajs/inertia-react": "^0.8.0",
+        "date-fns": "^2.28.0",
+        "lodash-es": "^4.17.21",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "uuid": "^9.0.0"
     }
 }

package/src/components/common/Button.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Link } from "@inertiajs/inertia-react";
+
+interface Props {
+    className?: string;
+    href?: string;
+    target?: '_blank' | '_self';
+    onClick?: Function;
+    type?: 'button' | 'submit';
+    status?: 'primary' | 'danger' | 'warning' | 'info' | 'default';
+    children: React.ReactNode;
+    disabled?: boolean;
+    as?: 'link' | 'button' | 'a';
+}
+
+export default function Button({ className, href, target, onClick, type, children, status = 'default', disabled = false, as }: Props) {
+    const baseClasses = 'font-black inline-flex items-center gap-3 justify-center text-white text-center px-5 py-2 rounded-md min-w-[120px] transition-all hover:opacity-75';
+
+    const statusClass = status === 'primary' && 'bg-teal'
+        || status === 'danger' && 'bg-red-500'
+        || status === 'warning' && 'bg-yellow-400'
+        || status === 'info' && 'bg-blue-400'
+        || 'bg-gray-600';
+
+    const classes = `${className ?? ''} ${baseClasses} ${statusClass}`;
+
+    if (onClick) {
+        return (
+            <button className={classes} type={type ?? 'button'} onClick={(e: React.MouseEvent) => onClick(e)} disabled={disabled}>
+                {children}
+            </button>
+        )
+    }
+
+    if (type) {
+        return (
+            <button className={classes} type={type ?? 'button'} disabled={disabled}>
+                {children}
+            </button>
+        )
+    }
+
+    if (href) {
+        if (href.includes('http') || target === '_blank' || as === 'a') {
+            return (
+                <a href={href} target={target ?? '_self'} className={classes}>
+                    {children}
+                </a>
+            )
+        }
+
+        return (
+            <Link href={href} className={classes}>
+                {children}
+            </Link>
+        );
+    }
+
+    return <p className="text-red-500 text-sm">[Invalid button]</p>;
+}

package/src/components/common/Card.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface Props {
+    className?: string;
+    children: React.ReactNode;
+}
+
+export default function Card({ className, children }: Props) {
+    return (
+        <div className={`${className ?? ''} flex flex-col items-start bg-white rounded-md shadow border border-gray-200 p-4 md:p-6`}>
+            {children}
+        </div>
+    );
+}

package/src/components/common/Modal.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Fragment } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+
+interface Props {
+    children: React.ReactNode;
+    isActive?: boolean;
+    onClose: () => void;
+    title?: string;
+}
+
+export default function Modal({ children, isActive = false, onClose, title }: Props) {
+    return (
+        <Transition.Root show={isActive} as={Fragment}>
+            <Dialog as="div" className="fixed z-[110] inset-0 overflow-y-auto" onClose={onClose}>
+                <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                    >
+                        <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+                    </Transition.Child>
+
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enterTo="opacity-100 translate-y-0 sm:scale-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                        leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    >
+                        <div className="w-full align-start inline-block bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:p-6">
+                            <div className={`flex gap-4 mb-4 text-asphalt ${title ? 'border-b-2 border-asphalt pb-4' : ''}`}>
+                                {title && <h3 className="font-black text-lg">{title}</h3>}
+                                <button type="button" onClick={onClose} className="ml-auto transition-all hover:opacity-50">
+                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                                    </svg>
+                                </button>
+                            </div>
+                            <div>{children}</div>
+                        </div>
+                    </Transition.Child>
+                </div>
+            </Dialog>
+        </Transition.Root>
+    );
+}

package/src/components/common/Pagination.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Link } from "@inertiajs/inertia-react";
+import type { Meta } from "../../types";
+
+interface Props {
+    className?: string;
+    meta: Meta;
+    showPerPageSelector?: boolean;
+}
+
+export default function Pagination({ meta, className, showPerPageSelector = false }: Props) {
+    const { current_page, total, per_page } = meta;
+    const page_count = Math.ceil(total / per_page);
+
+    function getNextPageLink() {
+        if (typeof window !== 'undefined') {
+            const search = new URLSearchParams(window.location.search);
+            search.set('page', String(current_page + 1));
+
+            return `?${search.toString()}`;
+        }
+
+        return '';
+    }
+
+    function getPrevPageLink() {
+        if (typeof window !== 'undefined') {
+            const search = new URLSearchParams(window.location.search);
+            search.set('page', String(current_page - 1));
+
+            return `?${search.toString()}`;
+        }
+
+        return '';
+    }
+
+    const nextPageLink = getNextPageLink();
+    const prevPageLink = getPrevPageLink();
+
+    function handlePerPageChange(e: React.SyntheticEvent<HTMLSelectElement>) {
+        const search = new URLSearchParams(window?.location.search);
+        search.set('limit', e.currentTarget.value);
+        search.set('page', '1');
+
+        window.location.href = `?${search.toString()}`;
+    }
+
+    return (
+        <div className={`${className ?? ''}`}>
+            <nav className="font-bold flex justify-between items-center gap-6">
+                <Link href={prevPageLink} className="flex items-center gap-2" disabled={current_page === 1}>
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                    </svg>
+                    Prev
+                </Link>
+                <div className="flex gap-6 items-center">
+                    <p>Page {current_page} of {page_count}</p>
+                    {showPerPageSelector ? (
+                        <select value={per_page} onChange={handlePerPageChange}>
+                            <option value="10">10 per page</option>
+                            <option value="25">25 per page</option>
+                            <option value="50">50 per page</option>
+                            <option value="100">100 per page</option>
+                        </select>
+                    ) : ''}
+                </div>
+                <Link href={nextPageLink} className="flex items-center gap-2" disabled={current_page === page_count}>
+                    Next
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                    </svg>
+                </Link>
+            </nav>
+        </div>
+    )
+}

package/src/components/common/ToastItem.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Transition } from '@headlessui/react';
+import type { Toast } from '../../types';
+import { useToast } from '../../lib/toast';
+
+export default function ToastItem({ _id = '', message, status = 'default' }: Toast) {
+    const { removeToast } = useToast();
+
+    const defaultClasses = 'w-full min-w-[250px] p-4 shadow flex justify-between items-center font-black rounded-md not:';
+
+    const statusClasses = status === 'success' && 'bg-teal text-white'
+        || status === 'error' && 'bg-red-500 text-white'
+        || status === 'warning' && 'bg-yellow-400 text-white'
+        || 'bg-white text-asphalt';
+
+    const classes = `${defaultClasses} ${statusClasses}`;
+
+    function handleClick() {
+        removeToast(_id);
+    }
+
+    return (
+        <Transition
+            show={true}
+            appear={true}
+            enter="transition-all duration-300"
+            enterFrom="opacity-0 translate-y-4"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition-all duration-300"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-2"
+        >
+            <div className={classes}>
+                <p>{message}</p>
+                <button className="" onClick={handleClick} title="Close message">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        className="h-6 w-6"
+                    >
+                        <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            d="M6 18L18 6M6 6l12 12"
+                        />
+                    </svg>
+                </button>
+            </div>
+        </Transition>
+    )
+}

package/src/components/common/Toasts.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { Toast } from "../../types";
+import { useToast } from "../../lib/toast";
+import ToastItem from "./ToastItem";
+
+export default function Toasts() {
+    const { toasts } = useToast();
+
+    return (
+        <div className="fixed bottom-4 right-4 z-[110] flex flex-col gap-6">
+            {toasts.map((toast: Toast) => (
+                <ToastItem {...toast} key={toast._id} />
+            ))}
+        </div>
+    );
+}

package/src/components/common/index.ts

@@ -0,0 +1,15 @@
+import Button from './Button';
+import Card from './Card';
+import Pagination from './Pagination';
+import ToastItem from './ToastItem';
+import Toasts from './Toasts';
+import Modal from './Modal';
+
+export {
+    Button,
+    Card,
+    Pagination,
+    ToastItem,
+    Toasts,
+    Modal,
+}

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