Payment Confirmation

[zainfathoni]

Description

Implement the payment confirmation parts of the Transaction Flow.

Narrative

• As a Member,
• I want to pay for the course
• and confirm my payment transaction
• so that the Author can verify my payment transaction in their bank account.

Acceptance Criteria

The purchase route should render this Two-column in card by default.

Scenario 1: Payment Instructions

Step no. 2 (Instructions) in the Transaction Flow diagram.

Payment Instructions

Instruksi Pembayaran
Transfer uang dengan nominal dan nomor rekening berikut ini

---

Nominal
Rp XX0.000,-

Nama Bank
Jago (Bank Artos)

Kode Bank
542

Nomor Rekening
5041 7623 2889

Nama Penerima
Zain Fathoni

Instruksi Konfirmasi
Setelah melakukan transfer, simpan bukti transfer dalam bentuk file gambar atau PDF, lalu klik tombol Konfirmasi Pembayaran di bawah ini.

• Given I am an authenticated user,
• and I have not purchased the course yet,
• when I visit the /dashboard/purchase route,
• then it shows the Two-column in card containing payment instructions
• and a Konfirmasi Pembayaran Primary button at the bottom right corner of the card,
• when I click the Konfirmasi Pembayaran button,
• then it redirects me to the /dashboard/purchase/confirm route.

Scenario 2: Payment Confirmation Form

Step no. 5 (Confirm Payment) in the Transaction Flow diagram.

Form Fields

• Nama Lengkap Anda
• Nomor WhatsApp Anda
• Nama Bank
• Nomor Rekening
• Nama Pemilik Rekening
• Nominal
• Tanggal dan Waktu Pembayaran

• Given I am an authenticated user,
• and I have not purchased the course yet,
• when I visit the /dashboard/purchase/confirm route,
• then it shows the Two-column cards with separate submit actions form containing the form fields defined above,
• when I fill in the form fields correctly,
• and submit the form,
• then it redirects me to the /dashboard/purchase/pending-verification route.

Implementation Model

Image previews

Primary button

Two-column in card

Desktop view

Mobile view

Code snippets

Primary button

export default function Example() {
  return (
    <>
      <button
        type="button"
        className="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
      >
        Button text
      </button>
      <button
        type="button"
        className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
      >
        Button text
      </button>
      <button
        type="button"
        className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
      >
        Button text
      </button>
      <button
        type="button"
        className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
      >
        Button text
      </button>
      <button
        type="button"
        className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
      >
        Button text
      </button>
    </>
  )
}

Two-column in card

/* This example requires Tailwind CSS v2.0+ */
import { PaperClipIcon } from '@heroicons/react/solid'

export default function Example() {
  return (
    <div className="bg-white shadow overflow-hidden sm:rounded-lg">
      <div className="px-4 py-5 sm:px-6">
        <h3 className="text-lg leading-6 font-medium text-gray-900">Applicant Information</h3>
        <p className="mt-1 max-w-2xl text-sm text-gray-500">Personal details and application.</p>
      </div>
      <div className="border-t border-gray-200 px-4 py-5 sm:px-6">
        <dl className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
          <div className="sm:col-span-1">
            <dt className="text-sm font-medium text-gray-500">Full name</dt>
            <dd className="mt-1 text-sm text-gray-900">Margot Foster</dd>
          </div>
          <div className="sm:col-span-1">
            <dt className="text-sm font-medium text-gray-500">Application for</dt>
            <dd className="mt-1 text-sm text-gray-900">Backend Developer</dd>
          </div>
          <div className="sm:col-span-1">
            <dt className="text-sm font-medium text-gray-500">Email address</dt>
            <dd className="mt-1 text-sm text-gray-900">[email protected]</dd>
          </div>
          <div className="sm:col-span-1">
            <dt className="text-sm font-medium text-gray-500">Salary expectation</dt>
            <dd className="mt-1 text-sm text-gray-900">$120,000</dd>
          </div>
          <div className="sm:col-span-2">
            <dt className="text-sm font-medium text-gray-500">About</dt>
            <dd className="mt-1 text-sm text-gray-900">
              Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur
              qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud
              pariatur mollit ad adipisicing reprehenderit deserunt qui eu.
            </dd>
          </div>
          <div className="sm:col-span-2">
            <dt className="text-sm font-medium text-gray-500">Attachments</dt>
            <dd className="mt-1 text-sm text-gray-900">
              <ul role="list" className="border border-gray-200 rounded-md divide-y divide-gray-200">
                <li className="pl-3 pr-4 py-3 flex items-center justify-between text-sm">
                  <div className="w-0 flex-1 flex items-center">
                    <PaperClipIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
                    <span className="ml-2 flex-1 w-0 truncate">resume_back_end_developer.pdf</span>
                  </div>
                  <div className="ml-4 flex-shrink-0">
                    <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
                      Download
                    </a>
                  </div>
                </li>
                <li className="pl-3 pr-4 py-3 flex items-center justify-between text-sm">
                  <div className="w-0 flex-1 flex items-center">
                    <PaperClipIcon className="flex-shrink-0 h-5 w-5 text-gray-400" aria-hidden="true" />
                    <span className="ml-2 flex-1 w-0 truncate">coverletter_back_end_developer.pdf</span>
                  </div>
                  <div className="ml-4 flex-shrink-0">
                    <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
                      Download
                    </a>
                  </div>
                </li>
              </ul>
            </dd>
          </div>
        </dl>
      </div>
    </div>
  )
}

Tasks

• Update dashboard/purchase/index.ts file to contains the Two-column in card containing payment instructions #121
• Add a Konfirmasi Pembayaran Primary button at the bottom right corner of the card
• Implement the payment confirmation form in a dashboard/purchase/confirm.tsx file
• Implement a blank /dashboard/purchase/pending-verification.tsx file
• Write end-to-end test scenarios to cover transaction confirmation process, including verifying the link to the WhatsApp web page #125