feat: Whatsapp Link

app/routes/dashboard/purchase/confirm.tsx

@@ -0,0 +1,86 @@
+import { Outlet, redirect } from 'remix'
+import type { ActionFunction, LoaderFunction } from 'remix'
+import type { Subscription, User } from '@prisma/client'
+import { validatePhoneNumber, validateRequired } from '~/utils/validators'
+import { auth } from '~/services/auth.server'
+import { db } from '~/utils/db.server'
+
+interface TransactionFields {
+  userId: string
+  subscriptionId: string
+  bankName: string
+  bankAccountNumber: string
+  bankAccountName: string
+  amount: number
+  status: string
+}
+
+type ActionData = {
+  formError?: string
+  fieldErrors?: {
+    name: string | undefined
+    phoneNumber: string | undefined
+    bankName: string | undefined
+    bankAccountNumber: string | undefined
+    bankAccountName: string | undefined
+    amount: number | undefined
+    paymentTime: string | undefined
+  }
+  fields: TransactionFields
+}
+
+export const action: ActionFunction = async ({ request }) => {
+  const user = await auth.isAuthenticated(request, {
+    failureRedirect: '/login',
+  })
+
+  const form = await request.formData()
+  const name = form.get('name')
+  const phoneNumber = form.get('phoneNumber')
+  const bankName = form.get('bankName')
+  const bankAccountNumber = form.get('bankAccountNumber')
+  const bankAccountName = form.get('bankAccountName')
+  const amount = form.get('amount')
+  const paymentTime = form.get('paymentTime')
+
+  if (
+    typeof name !== 'string' ||
+    typeof phoneNumber !== 'string' ||
+    typeof bankName !== 'string' ||
+    typeof bankAccountNumber !== 'string' ||
+    typeof bankAccountName !== 'string' ||
+    typeof amount !== 'number' ||
+    typeof paymentTime !== 'string'
+  ) {
+    return { formError: 'Form not submitted correctly.' }
+  }
+
+  const fieldErrors = {
+    name: validateRequired('Nama Lengkap', name),
+    phoneNumber: validatePhoneNumber('Nomor WhatsApp', phoneNumber),
+    bankName: validateRequired('Nomor WhatsApp', bankName),
+    bankAccountNumber: validateRequired('Nama Bank', bankAccountNumber),
+    bankAccountName: validateRequired('Nomor Rekening', bankAccountName),
+    amount: validateRequired('Nominal', amount),
+    paymentTime: validateRequired('Nominal', paymentTime),
+  }
+
+  const fields: TransactionFields = {
+    userId: user.id,
+    subscriptionId: '123', //should create assign subcription first?
+    bankName,
+    bankAccountName,
+    bankAccountNumber,
+    amount,
+    status: 'SUBMITTED',
+  }
+  if (Object.values(fieldErrors).some(Boolean)) {
+    return { fieldErrors, fields }
+  }
+
+  const transaction = await db.transaction.create({ data: fields })
+}
+
+export default function Confirm() {
+  return <Outlet />
+}

app/routes/dashboard/purchase/confirm/$transactionId.tsx

@@ -0,0 +1,85 @@
+/* This example requires Tailwind CSS v2.0+ */
+import { Fragment, useState } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { CheckIcon } from '@heroicons/react/outline'
+
+export default function Example() {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog
+        as="div"
+        className="fixed z-10 inset-0 overflow-y-auto"
+        onClose={setOpen}
+      >
+        <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>
+
+          {/* This element is to trick the browser into centering the modal contents. */}
+          <span
+            className="hidden sm:inline-block sm:align-middle sm:h-screen"
+            aria-hidden="true"
+          >
+            &#8203;
+          </span>
+          <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="inline-block align-bottom 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-sm sm:w-full sm:p-6">
+              <div>
+                <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
+                  <CheckIcon
+                    className="h-6 w-6 text-green-600"
+                    aria-hidden="true"
+                  />
+                </div>
+                <div className="mt-3 text-center sm:mt-5">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg leading-6 font-medium text-gray-900"
+                  >
+                    Data transaksi tersimpan
+                  </Dialog.Title>
+                  <div className="mt-2">
+                    <p className="text-sm text-gray-500">
+                      Silakan klik tombol di bawah ini untuk mengirimkan pesan
+                      WhatsApp kepada kami. Setelah itu, tolong lampirkan bukti
+                      transfer berupa foto atau file PDF ke nomor WhatsApp
+                      tersebut. Terima kasih.
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="mt-5 sm:mt-6">
+                <button
+                  type="button"
+                  className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm"
+                  onClick={() => setOpen(false)}
+                >
+                  Kirim Pesan WhatsApp
+                </button>
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  )
+}