WhatsApp Link

[zainfathoni]

Description

Implement the WhatsApp interaction parts of the Transaction Flow. It requires #75 as a prerequisite.

Narrative

• As a Member,
• I want to get my payment transaction verified
• so that I can start consuming the course content.

Acceptance Criteria

The /dashboard/purchase/confirm route should store the transaction values in the database and compose a prefilled WhatsApp link for the Member to send to the Author.

Scenario 1: Compose WhatsApp Link

Step no. 6 (WhatsApp Link) in the Transaction Flow diagram.

Modal Content

Data transaksi tersimpan

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.

[ Kirim Pesan WhatsApp ]

WhatsApp Link

`https://api.whatsapp.com/send?phone=${authorPhoneNumber}&text=%5BKelas%20Tahun%20Prasekolahku%5D%0A%0AKlik%20di%20sini%20untuk%20verifikasi%20pembayaran%0Ahttps%3A%2F%2Frbagi.id%2Fverify%2F${transactionId}%0A%0ABerikut%20terlampir%20foto%2Ffile%20bukti%20pembayaran%20saya%3A`

P.S. I populated that link above through https://create.wa.link, you can try experimenting with it to provide a better WhatsApp message

• Given I am an authenticated user,
• and I have not purchased the course yet,
• when I submit the form in /dashboard/purchase/confirm route correctly,
• then it stores my transaction data in the database
• and composes a WhatsApp link based on my transaction data,
• then it prompts me a Centered with single action modal with a Kirim Pesan WhatsApp action button,
• when I click the Kirim Pesan WhatsApp action button,
• then it redirects me to a WhatsApp web page using the WhatsApp Link defined above,
• when I click the Continue to Chat button on the WhatsApp web page,
• then it redirects me to my installed WhatsApp application with a prefilled message to send to the Author.

Implementation Model

Image previews

Centered with single action

Desktop view

Mobile view

Code snippets

Centered with single action

/* 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">
                    Payment successful
                  </Dialog.Title>
                  <div className="mt-2">
                    <p className="text-sm text-gray-500">
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore.
                    </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)}
                >
                  Go back to dashboard
                </button>
              </div>
            </div>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition.Root>
  )
}

Tasks

• Write the transaction information into the database upon the form submission
• Redirect to /dashboard/purchase/verify/$transactionId route upon a successful response
• Implement Centered with single action modal in a /dashboard/purchase/verify/$transactionId.tsx file
• Render a Remix's Outlet component somewhere in /dashboard/purchase/verify.tsx file to render the modal above
• Write end-to-end test scenarios to cover transaction confirmation process, including verifying the link to the WhatsApp web page #125

[AchmadWahyu]

Hi Mas Zain @zainfathoni, This is my first step on contributing to open source, and I'd like to work on this issue🙏, I have pushed the first commit just to save the seat 😅 but have not created the pull request draft yet, because I just read the prerequisite that it requires #75 . Is it means I have to wait for the #75 to be solved first before creating the pull request draft?

[zainfathoni]

Hi Mas Zain @zainfathoni, This is my first step on contributing to open source, and I'd like to work on this issue🙏, I have pushed the first commit to save the seat 😅 but have not created the pull request draft yet, because I just read the prerequisite that it requires #75. Does it mean I have to wait for the #75 to be solved before creating the pull request draft?

No, as long as you understand the separation of scopes between the two issues, you can start working on this ticket and submit your draft PR first. I meant by requiring #75 that we can only close this ticket after we close #75. It is definitely okay to start both of them in parallel.

Thanks for helping out, and have fun contributing to this project! 😉

[AchmadWahyu]

Hi Mas Zain @zainfathoni, This is my first step on contributing to open source, and I'd like to work on this issue🙏, I have pushed the first commit to save the seat 😅 but have not created the pull request draft yet, because I just read the prerequisite that it requires #75. Does it mean I have to wait for the #75 to be solved before creating the pull request draft?

No, as long as you understand the separation of scopes between the two issues, you can start working on this ticket and submit your draft PR first. I meant by requiring #75 that we can only close this ticket after we close #75. It is definitely okay to start both of them in parallel.

Thanks for helping out, and have fun contributing to this project! 😉

Thank you Mas Zain, please for the guidance if I have any obstacles later on 😬🙏

[AchmadWahyu]

Hi Mas Zain @zainfathoni . I have a question, on confirm page when I fill the fields for transaction, how could I retrieve courseId value?. Thank You🙏

[zainfathoni]

Hi Mas Zain @zainfathoni . I have a question, on confirm page when I fill the fields for transaction, how could I retrieve courseId value?. Thank You🙏

Oops, yeah, it's a hole in our system at the moment, because we are still assuming that we're only supporting one course at the moment. Therefore, based on that assumption, you can try to get all the available courses in the database and get the first course, probably you can use the first() method in Prisma. Thanks! 🙏

[AchmadWahyu]

Okay Mas, Thank you

[AchmadWahyu]

Mas Zain @zainfathoni , i have another question. What should I do to the paymentTime field on the form? is it assigned to transaction as createdAt? or assigned for another purpose? .Thank you

[zainfathoni]

Mas Zain @zainfathoni, I have another question. What should I do to the paymentTime field on the form? is it assigned to transaction as createdAt? or assigned for another purpose? Thank you

No, you should leave the createdAt and updatedAt fields alone because they're supposed to be generated by Prisma or the database. Instead, you should add another field called datetime, as indicated in this Entity Relationship Diagram.

After my changes on #108, it should be much easier to do so now. You just need to update the schema and update the transactionBuilder accordingly, and everything should be good already. Let me know if you need more help to do it.

[zainfathoni]

Update: I just added the datetime field at #110. You can continue the development now. Thanks!