From 191966a2e4e6c8ece8bc01f02a87f167cca90d22 Mon Sep 17 00:00:00 2001
From: riz081 <rizqikaibnu@gmail.com>
Date: Fri, 30 May 2025 14:59:46 +0700
Subject: [PATCH] improve payment success UI

---
 .../java/com/example/bdkipoc/PinActivity.java |  88 +++++++++++++++---
 .../main/res/drawable/ic_success_payment.png  | Bin 0 -> 4117 bytes
 app/src/main/res/layout/activity_pin.xml      |  17 ++--
 3 files changed, 84 insertions(+), 21 deletions(-)
 create mode 100644 app/src/main/res/drawable/ic_success_payment.png

diff --git a/app/src/main/java/com/example/bdkipoc/PinActivity.java b/app/src/main/java/com/example/bdkipoc/PinActivity.java
index bd2e784..29c46e2 100644
--- a/app/src/main/java/com/example/bdkipoc/PinActivity.java
+++ b/app/src/main/java/com/example/bdkipoc/PinActivity.java
@@ -301,7 +301,7 @@ public class PinActivity extends AppCompatActivity {
             // In real implementation, this would call backend API
             
             if (isValidPin(pin)) {
-                // Don't show toast, show success screen instead
+                // Show success screen instead of toast
                 handleSuccessfulVerification();
             } else {
                 showToast("PIN tidak valid. Silakan coba lagi.");
@@ -323,38 +323,100 @@ public class PinActivity extends AppCompatActivity {
         // Show full screen success message
         showSuccessScreen();
         
-        // Navigate to receipt page after 2-3 seconds
+        // Navigate to receipt page after 2.5 seconds
         animationHandler.postDelayed(() -> {
             navigateToReceiptPage();
-        }, 2500); // 2.5 seconds delay
+        }, 2500);
     }
 
     private void showSuccessScreen() {
         if (successScreen != null) {
+            // Hide all other UI components first
+            hideMainUIComponents();
+            
             // Set success message
             if (successMessage != null) {
-                successMessage.setText("Pembayaran berhasil!");
+                successMessage.setText("Pembayaran Berhasil");
             }
             
             // Show success screen with fade in animation
             successScreen.setVisibility(View.VISIBLE);
             successScreen.setAlpha(0f);
             
-            ObjectAnimator fadeIn = ObjectAnimator.ofFloat(successScreen, "alpha", 0f, 1f);
-            fadeIn.setDuration(500);
-            fadeIn.start();
+            // Fade in the background
+            ObjectAnimator backgroundFadeIn = ObjectAnimator.ofFloat(successScreen, "alpha", 0f, 1f);
+            backgroundFadeIn.setDuration(500);
+            backgroundFadeIn.start();
             
-            // Add scale animation to success icon
+            // Add scale and bounce animation to success icon
             if (successIcon != null) {
-                ObjectAnimator scaleX = ObjectAnimator.ofFloat(successIcon, "scaleX", 0f, 1f);
-                ObjectAnimator scaleY = ObjectAnimator.ofFloat(successIcon, "scaleY", 0f, 1f);
+                // Start with invisible icon
+                successIcon.setScaleX(0f);
+                successIcon.setScaleY(0f);
+                successIcon.setAlpha(0f);
+                
+                // Scale animation with bounce effect
+                ObjectAnimator scaleX = ObjectAnimator.ofFloat(successIcon, "scaleX", 0f, 1.2f, 1f);
+                ObjectAnimator scaleY = ObjectAnimator.ofFloat(successIcon, "scaleY", 0f, 1.2f, 1f);
+                ObjectAnimator iconFadeIn = ObjectAnimator.ofFloat(successIcon, "alpha", 0f, 1f);
                 
                 AnimatorSet iconAnimation = new AnimatorSet();
-                iconAnimation.playTogether(scaleX, scaleY);
-                iconAnimation.setDuration(600);
-                iconAnimation.setStartDelay(200);
+                iconAnimation.playTogether(scaleX, scaleY, iconFadeIn);
+                iconAnimation.setDuration(800);
+                iconAnimation.setStartDelay(300);
+                iconAnimation.setInterpolator(new android.view.animation.OvershootInterpolator(1.2f));
                 iconAnimation.start();
             }
+            
+            // Add slide up animation to success message
+            if (successMessage != null) {
+                successMessage.setAlpha(0f);
+                successMessage.setTranslationY(50f);
+                
+                ObjectAnimator messageSlideUp = ObjectAnimator.ofFloat(successMessage, "translationY", 50f, 0f);
+                ObjectAnimator messageFadeIn = ObjectAnimator.ofFloat(successMessage, "alpha", 0f, 1f);
+                
+                AnimatorSet messageAnimation = new AnimatorSet();
+                messageAnimation.playTogether(messageSlideUp, messageFadeIn);
+                messageAnimation.setDuration(600);
+                messageAnimation.setStartDelay(600);
+                messageAnimation.setInterpolator(new android.view.animation.DecelerateInterpolator());
+                messageAnimation.start();
+            }
+        }
+    }
+
+    private void hideMainUIComponents() {
+        // Hide all main UI components to create clean full screen success
+        if (backNavigation != null) {
+            backNavigation.setVisibility(View.GONE);
+        }
+        
+        // Hide the red header backgrounds
+        View redStatusBar = findViewById(R.id.red_status_bar);
+        View redHeaderBackground = findViewById(R.id.red_header_background);
+        if (redStatusBar != null) {
+            redStatusBar.setVisibility(View.GONE);
+        }
+        if (redHeaderBackground != null) {
+            redHeaderBackground.setVisibility(View.GONE);
+        }
+        
+        // Hide PIN card
+        View pinCard = findViewById(R.id.pin_card);
+        if (pinCard != null) {
+            pinCard.setVisibility(View.GONE);
+        }
+        
+        // Hide numpad
+        View numpadGrid = findViewById(R.id.numpad_grid);
+        if (numpadGrid != null) {
+            numpadGrid.setVisibility(View.GONE);
+        }
+        
+        // Hide confirm button
+        if (confirmButton != null) {
+            confirmButton.setVisibility(View.GONE);
         }
     }
 
diff --git a/app/src/main/res/drawable/ic_success_payment.png b/app/src/main/res/drawable/ic_success_payment.png
new file mode 100644
index 0000000000000000000000000000000000000000..6cf999ccb8dce31225645e7486ff39cb6394fa3c
GIT binary patch
literal 4117
zcmV+w5bE!VP)<h;3K|Lk000e1NJLTq007Vc007Vk1^@s6cBJog00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH52{H-K~#7F?cITS
z)W#MC;OjIHcYr#84xU~G&;d>bkP56<L7WPJ3V;fBQvpzcmI@#hoHyf<uvqN%>dqZ$
zW_14VQ|u&WZPq%PJ69v=LTC{H8uwwkUApb}$>*2Dmrg%F_I=pA!{onx9X=k$?c(C%
zAe7vNkf|Xkt=pct?aA=5k#&5Q5U4NX=Pp>Eh0HKO5nNdONYM`4Qwd?Yl)U+o%7@5@
zYVSYiXr;#h&2SW$=d#|&V(s&=eRSL21?s!dSs0*43?-Ql%L@s?*@C^>-n#7{j!vgB
zK=&9%npbi++H9F0nclkXBg6D7252yZ=A~?Fq?v0kcVS|gCk&7ePAefaK0LWM0CM5O
z^TBO@Z@sIx*#NoVTuBH`D-^>A=*9)<oovvi0yLT1ycUi&)(&p#WMhqoO$3O+S=2$o
zJn7vQf>d>Y7@SodWCKB}GC&MYRt|3KYMmoh7a$iN-%<NZ%2_4w{b=(J_k7*)BGX1r
zFFei7K`IPVH34$L@$1lha9YXBxJuf0tG>!)#kBu_7Uxs$S?T?B`1nlnvv=DcwUl+m
z2WTkQt|gRfYnv|A^dI+Y?<m88rIEV@udU>vlW-oX=o7L<2WU76`bO3(*T%s3lZs#5
z&ajsP4DXu{)7q;p4pQ;_C|iEiaob;5$2Yg#_?>VV{faicmoMD*)@?o3@dlv`rPPKU
zx5u)6ghnbiyuWLNso%o;yDBU{>g=}sOGOx&-eXzULblwS+PLi#mf=U64i%JVR)+Wg
zHI^Hdda$Ikfp8T3hV*s_=aA?G_a0qgnIQFUdnu&n-oR_5w*zbM*%0PRJEX^wZZ3q*
z&<<(sz~Dr~GC}h5FqYKkK&ZESq_YEqV-BIz?vYLp&WlcSZ_qQO`z82!6l?0lkamvL
zBdn~TV}9pGx@G~pY70WBB08kO1K~0EhP*-=JMf6L8l)}9*<A3Drqkw+QaLOxCAs|_
zzebwsV%s4?n(*wv$!2ztZZz6vh>#{c9Cb2>G;^bEg$VZH>A}`?F_5O)x{VOQK0G_H
z!&V%Gl5PiEb%zM{;pv2m2K$n(&N3e1JdYLM(YX?;0z#M0QeEeX5NcklHf9f=+o=w0
z=SAPD*+*d8zU;vkb+x#!96?xB-NVMG;@=Q@6zoG(Zi5MSmjiz)`i-Dj5DvUnS0L}C
zM6m0)F+3Xt+Ypu2-bPr`Zh_(1FxZBujLY?5SHm(qWEmpgnQJ6>unA8OhKB~Q3(+UZ
z8Eob~J=krdBe1J%{*oLa+*~474~B;x0J{*ik`u$f7*`n3Nw8Vf(j%uS0>ZtNWAR!Z
zIty&Nym^#zMt_-3h-QGzD(+U+1e>KgWu7Uf)gk_Rq8@9Oa)|G`^<dM0lwflJU#FBq
zXdJ|1(}1GDru)16eu((tvlAi%h`%6j*=Ypg8wb4*8AAL4eYv%Ah^srxSd&CWL6}m+
zoFD43L_-1bqYuybP!fnQ<vK|T@hc8kx=~VyE9LwMHft36P3G};J84Akze1GOpQ7i(
zlcqv47=1b+T7cWvZlE`N6gu~Zx`tj4Uf)9tK{&x0(@^Nd65>Z6J`jl(g}7#y?I;xa
z!?1Bct3X^sp%W{J8-2>SnFCb^am#$Zi3P-sK3r){t3uo;6hHMq+|3+XAzBgQMxnR?
z0O9i4b-p=~5yXu`?Wxy(>_lqJNu~b@Q66IUMco`8alQ1s@4rQx6EO;%Y-yhwfqe3`
zz3>|$%FExP<1=t2b44VU=Y2K;p+mdFU8VAE`1dSNoI_tx&7037?s9FeI;b4ZdqA*%
zv`tpaw-9$HpY#7Nh`X+$5vmsEE$hmv6N@mf*XrhcBkj4LH$v5dZcSt-8G(Lka^ArJ
zapl`{p(;VYpx9<fj1k10SZ$79@4hZvD>{dZi;Is!)fsjie*|u1zDs0O*1LUl?>>AN
zonOug-4`Hj6JRe?oyhQv8p+E$(fOsq`YAvNorYF)v_BMO$|yWJ`XD+jPIcql|9k-*
zp8Kf`Y#%qD-POp@pA-6N6gn>9wAb$Jg{lGDk!SDb9ojiZO4^F)ryJuO2k5EjXop0~
z4D8FcKO|4uefIuNGveCUykSTMU|Y6%on#7ei=}_;@6!=Tdx!d5hiIAs_9M^#+<wtX
zriOj?v*`S1{A3!SR&;por*K;f&xCg0{V@-k21q;q(WaO(u;K7{+I{!etZ3^&p<-b}
zbDoDN_xo?hFQUEo0q=WIC@?&?pkG|t_&-0EaE<7E5h@P0UA7(5?!&GB#~2`O2aY39
zVHloYXy-w<nHdA5Z6JIVDh9)Iuf6CrKR$!*0=lfO^PtnfInRTjYb5m37tmn&RtPXW
zCqa1yw*RxgL4UE+ze3pq%eHf<8VUZr^>d&`ba(<aa}3Yf4x$qkAl`j6V+_wM2hoWN
z5KFjBF+8&!MCUd@+Dj1*LfK(>R1TtZ=>zmc6x^G75XuU}qo%za=XdQ0#Or@D!|>=0
z*9K|!>E^NL13iQR$_T?_LbFd_YMTfLp)4>wX4C=NoQRXhSz&lgsj8}&E?iM?_beN~
z1fw5TWB4T;MLv#&;mN|Kb{$+XPhr4$&$8)D8kNAcZRXs2@D>VNDB=83x_#tp8vk`D
zAVlEEla;Ci<aV}eIe$m<Uzc@=7@qvpJ_23IJdI=;B8DeV)dtAzaQ>3pM&@fIvk);n
z`KoyYis>#kl1Yddp2hqw3O+!pB@9x(Mph0H!?P&Wk~VFCN?>upUn47ph~X*1cWnum
z{mIv1f#6=^HL`Gs7@l%yN1#$xFZ?Ms8d)er49{vBneR|_fZUGb%Q&kCJT;OyL=4ZW
zRQt3Kkmlxy{^3NWgy^jl5F&<Wb(;P8-<T#sF^f=h4-vz&u87~|AtpeL6eQOWF+5pl
zMCY~(cMzRM3X@xi7@ll2qI1|(fV^Bn#PDRL5uK<2sqW^JgSA7%@MK5(bdtmEKcQ3n
zok<a{Qnk|Kj1Ykr!(|5%H<uq@pvQbwJl+Hgh6oH#mZ0-#`U3Bv(?|udK#0KbWC{A`
z1Ap*;eq0NuIhpFUQi0TSB5=-=vqp4o7c2iZ{TBu8vsJT`DntxV_FB>Tsf25wQ{7YQ
zU|-Jlu+s^dg8ni0&yHV6^PI>kpOXsP5LxMj%t7bJem}h)NK?l7MWwA&#<-lbz_KlY
zh<*1*R;B?`JttBsng>l~6e5Nv9qqpRBP-JY?M3IgR4RiIF+6E$_uXIT{%$zCgpQv(
zRegVLtTQL-gpz@NfA^Y)UbKf!E0x2tA?k#Za_{jA==`*V?f9l5A4TVdRBpj?j%C|2
zwEOJC&9;bCR@u(J57LfAozNnnueP3_deNA=u$7HKnh<qDi}3p@^e!KJ@f~z-WJ6#Z
zqE2WrP(BL?=d8SOU-TL}n<?W)unAEov?%Dyx5uAm2>rS^ua%8KT!=cMML|E$_nLFR
z$qqWzEiOF=bRp`576<*cZ|7fu?SHw@+r&eQk6~VjI-$iOuDW_X=NrXz<2u<Wg!16j
zs`hWQei38}`uV-r%=un1W!&bP2~!A1Ip5`(-l(E?+YKtY1in<zHxK4dO%RvXY8RMN
znGo0Pc`0)tlyRDi?7U4j6DVKMk3J_COF#I4t>FPx??lI+>1~B51H-=9h|Y&03%YL%
zJ&r<@1?cDVUfczvk>9)(q7@--5Qx9~F5)I%9EE6Ah#LUrHxC~8A+*f|uN9&dAa2=C
zFIEt@GJ&HItpaiP<g*!lh94xRrEUAe5S;;WQ;#0jC%q9j3RQpO5y}VRZ{**JHN=lX
zoe(X+?Q7T2>yc{772-xAugaS+Qa%v3;@ayZ6~vE1Y$#Ath%4QCq+alg_)&<<`6&sv
zZ@ogC^vy1WQK*NWAHf<SGK5gN#Z*Uj=Y7ujVPj5Ec`W6~6yl%5wCt%C#4VBVSjv$J
z#C6@g<qzo4Kb&={6`}}6`(Yz%K)6gfMh~7~B_-HA`Mi_0AikmCaXv&Uh@VFESo;8u
zxa%!O*FrP{;^#eH9&0oaU&`h4m!a$-{(O)3Msfk0QqK4AxzvYFf=$z)M{egLVN=TW
z+5N>R8?b2_c&+3JHl<t-hKP>9E<By&3_stIQ_H^w+uL*tHd6#|x#c=qh+mU5Vu)xA
zkHtZ`M=6yJ;@8TJ7@`e>U3k2*y1a<L>|w+ZZ4hk3(@BXCf2MfE5N!x-!}DHB1-r=~
z!0y~8Ak3ky!qcPl1262_kK-HC2vv#u$^#J29$R$g#y5s57AiCBBRy=?x2gp;kA$D%
z1$mWlzsr}fJHUEZQX|AY_3l1g#a%eqtg4>sq-L;dZ;y81yr?(`4W=Dzb+QGp4^a=!
zi;97;@VJMqPPPR0A@W$#Wezsi@*L}Ai;yNnJy_CZ2cbp1gS}3+3~55-J38#rWddQ;
zvFx&qI-z7C@_KMIS`EUvogLEP0dflAJW-0Hly?oTrCSU_hwU0^_<iI`=vS~k8-1(?
zZ(Ncb(jEwVu-keXY}Z3Q^h<ayWD21*y+b-ZSdO0up#*r3w07XFg`**TaK_&iOYpgn
zuDNjh%V~vX!7{<|Iw3uTnz~1N{u&g{ksg6?x&996`FYd}p?F9?FPiERRtGmiw{X{0
zOVu1W_KEL*0$8S`n|gx{9|f^onKpGJln&A?M0`w-5T;ftH@v_82ANBZHq-aG6-p1G
zq<f2X^cY4aRL~hhD9_dk&FH4o_wqsthHysOufT3(J$tu(aNC!Qi;KM!0O3gg)NQ^z
z^(Q9R+IbId`=gZi?LI{Z$QzDaeqB^9mon_#_GS2Za689mSrNiyyp<4?r?PHfrv7$Y
z=iZ<1Qn2C!G#Yjk|IC+G^5S=p&%?(rlh1v)4iafNfcUMMY)>QvrI9?sGPQTxpKBjj
ztW*=AQ6^>G9N&lSF!^tX2fnr$K3*PeB{)b3&IhSTbpaX`7^GVHgM%;EZb~oL?o(}m
zyrHbSa+_aa&<HK5>fns34$z1}TGS?jGulLeMw5;dOFMg;3eIR#0h$`-NUtPxt4MF}
zwzn=c?_`5E8=w)w6^{NqlE28V_>~0<@gs~6%!iUsf?C*ofJVdl6n|#k&y!lA`|KsG
zx_GyxGVK%w=pMsd$&W}^!V+)qwtr+}bDMK9K#!O-9=0?x?InyfA1zi()Qka|VJP!j
z38mh+uB-+Jw|$floIOXH^D#gXhSAA~sFl1HYMwH#%^MfIGB6PsAY(&UuaUde&*SH7
zI7kS~*Wu%yC7CS-Xd%OBHQoG3^+fJQtY-LlYJupu@O1k5!EOIeKEK@<lx6%M?!MI7
TiMely00000NkvXXu0mjf!Z6@`

literal 0
HcmV?d00001

diff --git a/app/src/main/res/layout/activity_pin.xml b/app/src/main/res/layout/activity_pin.xml
index aec771f..080f62f 100644
--- a/app/src/main/res/layout/activity_pin.xml
+++ b/app/src/main/res/layout/activity_pin.xml
@@ -255,7 +255,7 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintVertical_bias="0"/>
 
-        <!-- Success Screen (Full Screen Overlay) -->
+        <!-- Success Screen (Full Screen Overlay) - IMPROVED VERSION -->
         <LinearLayout
             android:id="@+id/success_screen"
             android:layout_width="match_parent"
@@ -272,23 +272,24 @@
             <!-- Success Icon -->
             <ImageView
                 android:id="@+id/success_icon"
-                android:layout_width="80dp"
-                android:layout_height="80dp"
-                android:src="@drawable/ic_check_circle"
-                android:tint="@android:color/white"
-                android:layout_marginBottom="24dp"/>
+                android:layout_width="120dp"
+                android:layout_height="120dp"
+                android:src="@drawable/ic_success_payment"
+                android:layout_marginBottom="32dp"
+                android:scaleType="centerInside"/>
 
             <!-- Success Message -->
             <TextView
                 android:id="@+id/success_message"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:text="Pembayaran berhasil!"
+                android:text="Pembayaran Berhasil"
                 android:textColor="@android:color/white"
                 android:textSize="24sp"
                 android:textStyle="bold"
                 android:fontFamily="@font/inter"
-                android:gravity="center"/>
+                android:gravity="center"
+                android:letterSpacing="0.02"/>
 
         </LinearLayout>