diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/pengajuan-tempo/component/FinishTempo.jsx | 55 |
1 files changed, 32 insertions, 23 deletions
diff --git a/src/lib/pengajuan-tempo/component/FinishTempo.jsx b/src/lib/pengajuan-tempo/component/FinishTempo.jsx index 9d912b1a..ad8a7e67 100644 --- a/src/lib/pengajuan-tempo/component/FinishTempo.jsx +++ b/src/lib/pengajuan-tempo/component/FinishTempo.jsx @@ -106,11 +106,41 @@ const FinishTempo = ({ query }) => { 'Proses pengajuan tempo anda sudah berhasil terdaftar di indoteknik.com. Nikmati pembelian anda di website indoteknik dengan menggunakan pembayaran tempo'} </div> + <hr className="border-gray-300 w-full" /> + + {/* Video panduan khusus tampil saat status switch-account */} + {query?.status === 'switch-account' && ( + <div className="w-full max-w-3xl mx-auto px-4 text-center text-gray-700 mb-6"> + <div className="mb-3 font-medium"> + <h1 + className={`text-red-500 text-center font-semibold ${ + isMobile ? 'text-lg' : 'text-3xl' + }`} + // Mengganti py-4 dengan my-6 supaya jarak vertikalnya sama dengan hr + style={{ marginTop: 24, marginBottom: 24 }} + > + Video Panduan Pengajuan Tempo + </h1> + </div> + <div className="relative" style={{ paddingTop: '56.25%' /* 16:9 aspect ratio */ }}> + <iframe + src="https://www.youtube.com/embed/m15f8-eLqUc?si=frNbGnJu1zjINnDT" + title="YouTube video player" + frameBorder="0" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" + allowFullScreen + referrerPolicy="strict-origin-when-cross-origin" + className="absolute top-0 left-0 w-full h-full rounded-md shadow-lg" + ></iframe> + </div> + </div> + )} + {/* Tombol dengan behavior berbeda jika status switch-account */} {query?.status === 'switch-account' ? ( <button onClick={handleSwitchAccountClick} - className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center' + className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center mb-10' > Ubah Akun <ChevronRightIcon className='w-5' /> @@ -122,7 +152,7 @@ const FinishTempo = ({ query }) => { ? '/my/tempo/' : '/' } - className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center' + className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center mb-10' > {query?.status === 'approve' ? 'Lihat Detail Tempo' @@ -130,27 +160,6 @@ const FinishTempo = ({ query }) => { <ChevronRightIcon className='w-5' /> </Link> )} - - {/* Video panduan khusus tampil saat status switch-account */} - {query?.status === 'switch-account' && ( - <div className="w-full max-w-3xl mx-auto px-4 text-center text-gray-700 mb-6 md:mb-20"> - <div className="mb-3 font-medium opacity-75"> - <p>Agar tidak bingung saat mengubah akun,</p> - <p>Yuk pelajari dulu langkah-langkah pengajuan tempo lewat video berikut</p> - </div> - <div className="relative" style={{ paddingTop: '56.25%' /* 16:9 aspect ratio */ }}> - <iframe - src="https://www.youtube.com/embed/m15f8-eLqUc?si=frNbGnJu1zjINnDT" - title="YouTube video player" - frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" - allowFullScreen - referrerPolicy="strict-origin-when-cross-origin" - className="absolute top-0 left-0 w-full h-full rounded-md shadow-lg" - ></iframe> - </div> - </div> - )} </div> ); }; |