@star-insure/sdk 1.1.43 → 2.0.0

package/src/components/common/Button.tsx

@@ -1,60 +1,77 @@
-import React from "react";
-import { Link } from "@inertiajs/inertia-react";
+import React from 'react';
+import { Link } from '@inertiajs/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';
+  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';
+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 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}`;
+  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 (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 (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>
-        );
+  if (href) {
+    if (href.includes('http') || target === '_blank' || as === 'a') {
+      return (
+        <a href={href} target={target ?? '_self'} className={classes}>
+          {children}
+        </a>
+      );
     }
 
-    return <p className="text-red-500 text-sm">[Invalid button]</p>;
+    return (
+      <Link href={href} className={classes}>
+        {children}
+      </Link>
+    );
+  }
+
+  return <p className="text-red-500 text-sm">[Invalid button]</p>;
 }

package/src/components/common/Pagination.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "@inertiajs/inertia-react";
+import { Link } from "@inertiajs/react";
 import type { Meta } from "../../types";
 
 interface Props {

package/src/components/forms/DateOfBirthField.tsx

@@ -1,84 +1,124 @@
-import React from "react";
-import { padStart } from "lodash-es";
+import React from 'react';
+import { calculateAge } from '../../lib';
+import { padStart } from 'lodash';
 
 interface Props {
-    value?: string;
-    onChange: (newValue: string) => void;
+  name?: string;
+  id?: string;
+  onChange: (dateString: string) => void;
+  value?: string;
+  maxYear?: number;
+  showAge?: boolean;
 }
 
-export default function DateOfBirthField({ value, onChange }: Props) {
-    const [dateOfBirth, setDateOfBirth] = React.useState({
-        day: value?.split("-")[2] || '',
-        month: value?.split("-")[1] || '',
-        year: value?.split("-")[0] || '',
-    });
+export default function DateOfBirthField({
+  name = 'dob',
+  id = 'dob',
+  onChange,
+  value,
+  maxYear = 0,
+  showAge = false,
+}: Props) {
+  const dayOptions = [...Array.from(Array(31).keys())].map(value => {
+    return padStart(`${value + 1}`, 2, '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 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')
-        }
-    })
+  // Create 100 years of options, subtracting the maximum year if provided
+  const yearOptions = [...Array.from(Array(100).keys())].map(value => {
+    return maxYear ? maxYear - value : new Date().getFullYear() - value;
+  });
 
-    const thisYear = new Date().getFullYear();
-    const yearOptions = [...Array.from(Array(100).keys())].map(value => {
-        return (thisYear - value - 16).toString();
-    });
+  function handleChange(
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+    >
+  ) {
+    const { name, value } = e.currentTarget;
 
-    function handleSelectChange(e: React.FormEvent<HTMLSelectElement>) {
-        const { name, value } = e.currentTarget;
+    let y = name.includes('year') ? value : year;
+    let m = name.includes('month') ? value : month;
+    let d = name.includes('day') ? value : day;
 
-        const newDob = {
-            ...dateOfBirth,
-            [name]: value,
-        }
+    onChange(`${y}-${m}-${d}`);
+  }
 
-        // Set local state
-        setDateOfBirth(newDob);
+  const [year, month, day] = value ? value.split('-') : ['', '', ''];
+  const isValidDate =
+    year && month && day && !isNaN(Date.parse(`${year}-${month}-${day}`));
 
-        // 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>
-    )
+  return (
+    <span className="flex flex-col gap-2">
+      <span className="flex space-x-4 border border-gray-300 rounded-lg bg-white">
+        <select
+          name={`${name}_day`}
+          id={`${id}_day`}
+          value={day}
+          className="flex-grow focus:outline-none border-0"
+          onChange={handleChange}
+          required
+        >
+          <option value="">Day</option>
+          {dayOptions.map(option => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+        <select
+          name={`${name}_month`}
+          id={`${id}_month`}
+          value={month}
+          className="flex-grow focus:outline-none border-0"
+          onChange={handleChange}
+          required
+        >
+          <option value="">Month</option>
+          {monthOptions.map(option => (
+            <option key={option.value} value={option.value}>
+              {option.title}
+            </option>
+          ))}
+        </select>
+        <select
+          name={`${name}_year`}
+          id={`${id}_year`}
+          value={year}
+          className="flex-grow focus:outline-none border-0"
+          onChange={handleChange}
+          required
+        >
+          <option value="">Year</option>
+          {yearOptions.map(option => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+      </span>
+      {showAge && value && isValidDate && (
+        <span className="font-bold">Age: {calculateAge(value)} years</span>
+      )}
+    </span>
+  );
 }

package/src/components/forms/ErrorList.tsx

@@ -1,32 +1,37 @@
 import React from 'react';
-import { ErrorBag, Errors } from "@inertiajs/inertia"
-import { Card } from "../common";
+import { ErrorBag, Errors } from '@inertiajs/core';
+import { Card } from '../common';
 
 interface Props {
-    heading?: string;
-    errors?: Errors & ErrorBag;
-    renderKeys?: boolean;
-    className?: string;
+  heading?: string;
+  errors?: Errors & ErrorBag;
+  renderKeys?: boolean;
+  className?: string;
 }
 
-export default function ErrorList({ heading = 'There was an error with your submission.', errors = {}, renderKeys = false, className = '' }: Props) {
-    if (Object.values(errors).length === 0) {
-        return <></>
-    }
+export default function ErrorList({
+  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>
-    )
+  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/tables/TableHeader.tsx

@@ -1,49 +1,66 @@
-import React from "react";
-import { Link } from "@inertiajs/inertia-react";
+import React from 'react';
+import { Link } from '@inertiajs/react';
 
 interface Props {
-    children: React.ReactNode;
-    className?: string;
-    textAlign?: 'left' | 'right' | 'center';
-    sort?: string;
+  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>
-    )
+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/lib/auth.tsx

@@ -1,8 +1,18 @@
-import { usePage } from '@inertiajs/inertia-react';
-import type { AuthContext, PageProps } from '../types';
+import { usePage } from '@inertiajs/react';
+import type { AuthContext } from '../types';
+import type { ErrorBag, Errors, Page, PageProps } from '@inertiajs/core';
+
+interface SharedProps {
+    auth: AuthContext;
+    errors: Errors & ErrorBag;
+}
+
+interface AppPage extends Page {
+    props: PageProps & SharedProps;
+}
 
 export function useAuth(): AuthContext {
-    const { props } = usePage<PageProps>() as PageProps;
+    const { props } = usePage() as AppPage;
 
     return props.auth;
 }

package/src/lib/calculatePricing.tsx

@@ -1,4 +1,4 @@
-import { addGst } from ".";
+import { addGst } from "./money";
 import type { PolicyEnhancement, QuoteRequestPurchaseOption } from "../types";
 
 interface CalculationArguments {

package/src/lib/inertiaOptions.tsx

@@ -1,4 +1,4 @@
-import type { VisitOptions } from '@inertiajs/inertia/types';
+import type { VisitOptions } from '@inertiajs/core';
 import { useToast } from './toast';
 
 interface Options {

package/src/lib/quoteRequestForm.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
-import { InertiaFormProps, useForm } from "@inertiajs/inertia-react";
+import { useForm } from "@inertiajs/react";
+import { InertiaFormProps } from "@inertiajs/react/types/useForm";
 import type { QuoteRequest } from '../types';
 
+type QuoteRequestForm = QuoteRequest & Record<string, any>;
+
 interface QuoteRequestFormContextInterface {
-    form?: InertiaFormProps<QuoteRequest>;
+    form?: InertiaFormProps<QuoteRequestForm>;
     handleChange?: (e: React.ChangeEvent<HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement>) => void;
 }
 
-export const initialData: QuoteRequest = {
+export const initialData: QuoteRequestForm = {
     id: undefined,
     status: 'new',
     source: 'phone',
@@ -71,7 +74,7 @@ export const initialData: QuoteRequest = {
 export const QuoteRequestFormContext = React.createContext<QuoteRequestFormContextInterface>({});
 
 export function QuoteRequestFormProvider({ children }: { children: React.ReactNode }) {
-    const form = useForm<QuoteRequest>(initialData);
+    const form = useForm(initialData);
 
     /**
      * Handle the change event for all form inputs

package/src/types/misc/index.ts

@@ -1,5 +1,3 @@
-export * from './inertia';
-
 export type FormStatus = 'idle' | 'processing' | 'success' | 'error';
 
 export interface Toast {

package/dist/types/misc/inertia.d.ts

@@ -1,8 +0,0 @@
-import type { ErrorBag, Errors, Page, PageProps as PagePropsInterface } from "@inertiajs/inertia";
-import { AuthContext } from '../../types';
-export interface PageProps extends Page<PagePropsInterface> {
-    props: {
-        auth: AuthContext;
-        errors: Errors & ErrorBag;
-    };
-}

package/src/types/misc/inertia.ts

@@ -1,9 +0,0 @@
-import type { ErrorBag, Errors, Page, PageProps as PagePropsInterface } from "@inertiajs/inertia";
-import { AuthContext } from '../../types';
-
-export interface PageProps extends Page<PagePropsInterface> {
-    props: {
-        auth: AuthContext;
-        errors: Errors & ErrorBag;
-    }
-}