feat: transaction confirmation and verification flow

app/components/__tests__/transaction-item.test.tsx

@@ -1,8 +1,9 @@
-import { build, fake } from '@jackfranklin/test-data-bot'
+import { build, fake, oneOf } from '@jackfranklin/test-data-bot'
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import { TransactionItem, TransactionItemProps } from '../transaction-item'
 import { printLocaleDateTimeString } from '~/utils/format'
+import { TRANSACTION_STATUS } from '~/models/enum'
 
 const transactionItemBuilder = build<TransactionItemProps>('TransactionItem', {
   fields: {
@@ -11,37 +12,50 @@ const transactionItemBuilder = build<TransactionItemProps>('TransactionItem', {
     bankAccountNumber: fake((f) => f.finance.account()),
     bankName: fake((f) => f.company.companyName()),
     dateTime: fake((f) => f.date.past()),
+    status: oneOf(TRANSACTION_STATUS),
   },
 })
 describe('TransactionItem', () => {
-  it('should display customer name correctly', () => {
-    const props = transactionItemBuilder()
+  it('should display bankAccountName correctly', () => {
+    const props = transactionItemBuilder({
+      overrides: {
+        status: TRANSACTION_STATUS.VERIFIED,
+      },
+    })
 
     render(<TransactionItem {...props} />, { wrapper: MemoryRouter })
 
     expect(screen.getByLabelText(/nama rekening/i)).toHaveTextContent(
       props.bankAccountName
     )
   })
-  it('should display customer email correctly', () => {
-    const props = transactionItemBuilder()
+  it('should display bankName correctly', () => {
+    const props = transactionItemBuilder({
+      overrides: {
+        status: TRANSACTION_STATUS.REJECTED,
+      },
+    })
 
     render(<TransactionItem {...props} />, { wrapper: MemoryRouter })
 
     expect(screen.getByLabelText(/nama bank/i)).toHaveTextContent(
       props.bankName
     )
   })
-  it('should display transaction datetime correctly', () => {
-    const props = transactionItemBuilder()
+  it('should display datetime correctly', () => {
+    const props = transactionItemBuilder({
+      overrides: {
+        status: TRANSACTION_STATUS.SUBMITTED,
+      },
+    })
 
     render(<TransactionItem {...props} />, { wrapper: MemoryRouter })
 
     expect(screen.getByLabelText(/waktu transaksi/i)).toHaveTextContent(
       printLocaleDateTimeString(props.dateTime ?? '')
     )
   })
-  it('should display transaction bank name correctly', () => {
+  it('should display bankAccountNumber correctly', () => {
     const props = transactionItemBuilder()
 
     render(<TransactionItem {...props} />, { wrapper: MemoryRouter })
@@ -50,7 +64,7 @@ describe('TransactionItem', () => {
       props.bankAccountNumber
     )
   })
-  it('should render transaction details link correctly', () => {
+  it('should link to transaction details page correctly', () => {
     const props = transactionItemBuilder()
 
     render(<TransactionItem {...props} />, { wrapper: MemoryRouter })

app/components/button-link.tsx

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react'
+import { Link } from 'remix'
+import { classNames } from '~/utils/class-names'
+
+const buttonClassNames =
+  'disabled:opacity-80 disabled:bg-gray-100 disabled:text-gray-500 disabled:hover:cursor-not-allowed text-center inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500'
+
+function DisabledButton({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <button disabled className={classNames(buttonClassNames, className ?? '')}>
+      {children}
+    </button>
+  )
+}
+
+type ButtonLinkProps = {
+  to: string
+  replace?: boolean
+  children: ReactNode
+  external?: boolean
+  disabled?: boolean
+  className?: string
+}
+
+export function ButtonLink({
+  to,
+  replace,
+  children,
+  external,
+  disabled,
+  className,
+  ...props
+}: ButtonLinkProps) {
+  return disabled ? (
+    <DisabledButton>{children}</DisabledButton>
+  ) : external ? (
+    <a
+      href={to}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={classNames(buttonClassNames, className ?? '')}
+    >
+      {children}
+    </a>
+  ) : (
+    <Link
+      to={to}
+      replace={replace}
+      className={classNames(
+        buttonClassNames,
+        'w-full sm:w-auto',
+        className ?? ''
+      )}
+      {...props}
+    >
+      {children}
+    </Link>
+  )
+}
+
+export function PrimaryButtonLink(props: ButtonLinkProps) {
+  return (
+    <ButtonLink
+      className="border-transparent text-white bg-blue-600 hover:bg-blue-700 focus:ring-red-500"
+      {...props}
+    />
+  )
+}
+export function SecondaryButtonLink(props: ButtonLinkProps) {
+  return <ButtonLink className="text-gray-700" {...props} />
+}
+export function TertiaryButtonLink(props: ButtonLinkProps) {
+  return (
+    <ButtonLink
+      className="border-transparent text-white bg-red-600 hover:bg-red-700 focus:ring-red-500 mr-auto"
+      {...props}
+    />
+  )
+}

app/components/form-elements.tsx

@@ -26,7 +26,7 @@ type InputProps = (
   | JSX.IntrinsicElements['input']
 ) & {
   status?: InputStatus
-  type?: 'textarea'
+  type?: 'textarea' | 'datetime-local' | 'date' | 'time' | 'number'
   className?: string
 }
 
@@ -52,7 +52,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           {...(props as JSX.IntrinsicElements['input'])}
           className={className}
           ref={ref}
-          type="text"
+          type={props.type ?? 'text'}
         />
         {props.status === 'error' ? (
           <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">

app/components/page-link.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react'
+import { Link } from 'remix'
+import { classNames } from '~/utils/class-names'
+
+export function PageLink({
+  to,
+  isCurrentPage,
+  disableOnCurrentPage,
+  children,
+}: {
+  to: string
+  isCurrentPage: boolean
+  disableOnCurrentPage?: boolean
+  children: ReactNode
+}) {
+  const className = classNames(
+    'border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium',
+    isCurrentPage
+      ? 'border-purple-500 text-purple-600 disabled:cursor-not-allowed'
+      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-200',
+    disableOnCurrentPage ? 'disabled:text-gray-400 disabled:border-hidden' : ''
+  )
+  if (isCurrentPage) {
+    return (
+      <button disabled className={className}>
+        {children}
+      </button>
+    )
+  } else {
+    return (
+      <Link to={to} className={className}>
+        {children}
+      </Link>
+    )
+  }
+}

app/components/sections/pricing.tsx

@@ -56,11 +56,15 @@ type PricingProps = {
   title: string
   description: React.ReactNode
   children: React.ReactNode
+  signupLink?: string
+  isSubscribed?: boolean
 }
 export const Pricing = ({
   title,
   description,
   children,
+  signupLink = '/login',
+  isSubscribed = false,
 }: PricingProps): JSX.Element => {
   return (
     <div className="bg-gray-100" id="biaya">
@@ -113,12 +117,18 @@ export const Pricing = ({
                 </p>
                 <div className="mt-6">
                   <div className="rounded-md shadow">
-                    <Link
-                      to="/login"
-                      className="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 hover:bg-gray-900"
-                    >
-                      Daftarkan Diri
-                    </Link>
+                    {isSubscribed ? (
+                      <button className="flex items-center justify-center px-5 py-3 border border-transparent text-base w-full font-medium rounded-md text-gray-400 bg-gray-200 cursor-not-allowed">
+                        Sudah terdaftar
+                      </button>
+                    ) : (
+                      <Link
+                        to={signupLink}
+                        className="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 hover:bg-gray-900"
+                      >
+                        Daftarkan Diri
+                      </Link>
+                    )}
                   </div>
                 </div>
               </div>