From 8f589c7190162fdf0264b13e8cad04a154e8d399 Mon Sep 17 00:00:00 2001 From: Chathura Date: Thu, 6 Jun 2024 23:36:31 +0530 Subject: [PATCH] success|failed screen --- payment_sdk/src/assets/images/error.png | Bin 0 -> 610 bytes payment_sdk/src/assets/images/error@2x.png | Bin 0 -> 1055 bytes payment_sdk/src/assets/images/error@3x.png | Bin 0 -> 1580 bytes payment_sdk/src/assets/images/success.png | Bin 0 -> 1055 bytes payment_sdk/src/assets/images/success@2x.png | Bin 0 -> 1897 bytes payment_sdk/src/assets/images/success@3x.png | Bin 0 -> 2780 bytes payment_sdk/src/components/ResponseScreen.tsx | 86 ++++++++++++++++++ payment_sdk/src/components/SubmitButton.tsx | 1 + 8 files changed, 87 insertions(+) create mode 100644 payment_sdk/src/assets/images/error.png create mode 100644 payment_sdk/src/assets/images/error@2x.png create mode 100644 payment_sdk/src/assets/images/error@3x.png create mode 100644 payment_sdk/src/assets/images/success.png create mode 100644 payment_sdk/src/assets/images/success@2x.png create mode 100644 payment_sdk/src/assets/images/success@3x.png create mode 100644 payment_sdk/src/components/ResponseScreen.tsx diff --git a/payment_sdk/src/assets/images/error.png b/payment_sdk/src/assets/images/error.png new file mode 100644 index 0000000000000000000000000000000000000000..31f521bb36f76a511ddcfac6c837831a20068116 GIT binary patch literal 610 zcmV-o0-gPdP)Th)!o;-?*a988mObKat@(K0}#4XH(R1W;)~DiIw6RJD*&gabf)bbG&0J8u_f{Ilj@S0yAUI_Tmr zAQ7K3`;TDXc04?;qA%tU&Q2jAPtpgn`^J?*QV5rG04I2yIn)%v6+#k3PbRTWIY@%| z6u}krAE283jdxoB{~&J&Da3SlA7yTiILjLXAvE4=N!E58h?n?@hA0&uxG;R-?*e6PFvO>a-j09@h3b^$?zOL}{ac>6s%pVLbOmQ?|^ zzpLt-U+6Zt~Mbi0M6*aV;c}t0B8IN w*eApWz*#+v_W`j5aMu48;S$mWFxIDj0JkMdf_~z*k^lez07*qoM6N<$g6~rA$p8QV literal 0 HcmV?d00001 diff --git a/payment_sdk/src/assets/images/error@2x.png b/payment_sdk/src/assets/images/error@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..89ba8c4c696a8fd67cf990d9fe4a6571187bfff0 GIT binary patch literal 1055 zcmV+)1mOFLP)DP0(H6j{u_~+k)ZO)`0{FTyicABf*=v#vE*=L z@qLdx<{d#cfX*+3SA;kKbp9Z`A;bls^8?`pAx;3DdkE(UaRcbwLO4a}27t~TgfoP0 z0qER7I6>$pfX+UIb%bsM=_AvS=qG@#Jw$7Sego**L9{{u zz|+hjj1d9@%+ule-grL0czW=Bx;+`DN&fGmw-h8Z2qT2hXFxhsugCL~v!byFh@TX! z<`4sFn2bx%%L}tHAF0{>9M!K8f}AzrdSo`{t7Z_j5wHk1tv*C81OS*;4`L+(0NS=1 zq7p$az@YTH|Ds|nT-6Yz2$Ii$HOfjSTHQ)S;L0Hi5w1S$9N-eQnC0Z zSeTJPKoAfR1QaJiR<-zIVfIooOg1ZqfqstO$6$DWK8$bh# zIwIsGrReMPW2L*i{My|)%m+UavX&xsw7EE$JwIN0Ioezt&m^A_`8$QPM5%Y_aDDu6 z-~Ew~k|}r397E>3<*(P0ItzvpK0M0rB*JTLX0Gty9u8R;Z061p|T$dnR0dP(cxGq4r1mK(_a4|!; z2H?CPa4|yo0N}hKa4|vn0^qzNa4|sm1mL_QaFQW>18_lp0`Kk(UBM4Qg)RgDLI@%B Zw0{Ax+j&YQ<(L2f002ovPDHLkV1knY%C-Oi literal 0 HcmV?d00001 diff --git a/payment_sdk/src/assets/images/error@3x.png b/payment_sdk/src/assets/images/error@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..6ea1050a42e77e524a78475c834985e297c25b14 GIT binary patch literal 1580 zcmYk6dpJ~S9LMJ{F-9|-VGD&Z2Geet#3G&FK%l*Y)l zk`TshN|G#*XP;bl7Y|xZZnf(YgGy;I#2$O?JkNVR=lst1{rukd{P7ArJvaos0Um?F z5L{r$3uQVwL^w6{j^hh1q0l%3AB@6aOm?gez$we>7+M6Pyf`dOMaRYo^aUH_=o+wuB*rC0UVQXUY}1ybL%mTjiltfv zM~G&zjAHL4@enT`^NJ@rsfMf0mjl0;eQ3#=H}uL2 zqA~ZY*RgHKB*zorncU(F`C&)v^|<7u)bX+RrA7RVDBZc{5Ugz1~~>EfccyyLRAN(+Z_< z?LQxJ&$YS4y))l)xJYo~5hzRyG+7{M5iI-5ZWmVTqRM%k%RY$EIu)aF^~DY;tNs3# zU(1$R=2YJAAQx`zsUC{d0^7-7EJ^k@z_8z_*8rilB+x?--wgOyiY_@aZ0><=tPqv0 zJ_UwVZ~sF3u=VU+Yw|o6+#)|>I7NIxc)U}#%RHx_a$syT;Z98B;-}Wj&e<AeMh&M;px z>0f^#eD`F-;H%H=ddl3wfb}9;{4JV765i+T5#DU(H|Nos14ksv)Tyq6VV4oczLeUKx;^jI&-btVF}mbCM2Jx{E*)d6*}GnJMxpBJbu;0lw10q@Qm5G9qkEoQ!B6RhKpup zTDmqdfWVbPiVdFprUnrFOd;Xgw!c*+Wja%}#q@Fw*vBZH3A;-z$y_%`#e{LEj|YW= z8hoD`xhkm|4S5}rYrxM}L%vcvxeG=^zITRrkUtt4IrJG2IGdu%%s>^=6%MN07X@h0 z(I%1~0#!*v5IUdRu1>8N!epvn0+w2z3X_Z7mo(s5ebgwO|4Q`UmXav?u%rpc8ln|_ z2Xxk|rx6g4DWqva+dCe#6%;6vM=mfaWe60om;e9( literal 0 HcmV?d00001 diff --git a/payment_sdk/src/assets/images/success.png b/payment_sdk/src/assets/images/success.png new file mode 100644 index 0000000000000000000000000000000000000000..7ffba80151a9d234f72cc992186d7202105d50fb GIT binary patch literal 1055 zcmV+)1mOFLP)6R0<^Cm;eA-lR9k4a(=!mx?6QnS>z0 z07=LnK7Jp_hF!w`nAzFgSpePv2nnI}HJ!++D1e`cpn^apLMSganE;^)NG1V1Agbd* zePBQW>?A@ujzp&fc8hOI5E1@zlV1(>!0s5ekqI%0B|* zPkPDv`+UXj@C{M|0dJ#PCbS6Gb*vi}P==HdHzTC;L49O|X|IH7r1fhT>^|Kr1PIRe z5O%fx=c_R7w~BBcMDPRhfT$ft$VPW^1yCFE2C+S;|LUx*URU9|P)-&IKv9%dPkX!z zstXjM53A+b3qC=N*q0O@8)aR!?79mUu*5Q%SG$!5~K1*2Yzq36TAe3gx)Mt$qcfwGUOKK2x1}8&A zg1e3FkS>;Q7b2Xcbe>ia0gX}HDT|EFl(c?T_ih#vU0;7l}$U_4yBEO-unE9Hl-=lyWRFE6lRD!j1xjDNM_9bwnV| z%8(@q2oO}&9RiB`Or;E2k&pnv=46CiLv4yYWa}t#Tsi`ANKk;&AHwJ&Je-b16_T)k zWn6bcnuKXA@!Q*JMG}&t06}qI!iku7s2xd2iUJTNZ#5TTsmeIYheHcV*#d;NDOX2C zaauGXD%*slEI=sCJ~%(VBSL09H>DVnbwV-_zyoyb?I~W@P6R(84y!_tnyCu_84tJ^ z0=KeZ z(_zn89Sa_T3&4U!=df>XMKDoqY6evWiZGfZlh@mqut#tXpdIbcr(i9)0# zeDEm910_0a&6Dm5!L@219)}em#5#=EyL^(Q;&(2dL2?*uf=-mqd+hYL2oYl`*yds* zmYb2xMR*5_eIKXu9tr+IrK%HQg&)}9pkC%4mig(66|v*zfD_&qk2zoTn{%n-T{`~m Z_zw)>8g>~y>x}>a002ovPDHLkV1oIm#8UtO literal 0 HcmV?d00001 diff --git a/payment_sdk/src/assets/images/success@2x.png b/payment_sdk/src/assets/images/success@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..83ce85bc9dc7003ad1dd36311fbb429c86784431 GIT binary patch literal 1897 zcmV-v2bTDWP)|PC@>WJptYm;4QYc zh_Tc=ElVlApQHDDRS-F`6Kg*8JX$kj0EI#UfY4y3U#6qwf6K9Ez>avUj{s;y1UtxI z5k}%EBi~CFNU#t;n_I^)n44h!ji}vTPp)-nD2|k~QHBy^|>F2%iYBhKcM6aN_f)7O$!d(2X zYa8aN{`h7N6;ru{{n`FhT=j2YebqM(5gq4M%cx9(b>;uW_t4P7_fw^e(j~0x{N+ng z?VLah5e4*4Gqz6kBYgoSQK|&4dXS9w1TcmcW49Tnvx86PPy(e$;H%&Ge)mQc{wwGZ zWkrQ_30(IZKk>5dSAP^771{m;Pkb7rz)r|@Ivr64 zR-Vb&+D%IMrK*lpHIxr4&oo#jW|9*l!R`%x1x0Q|Z|PxNZz(YnjGqH3Nvb|$-`0&J zHWE}6NF=6_j*SEr1ri~QEX&A9P*EVCsJ0<85>ym$4MKkmjjabmgC2^9g=gulmV@Ka zzZ3NWk)-?D=WZzrm>u36JC8XHvC{6oK`|CW>O=pyAv6-~Ea@0}ieG@m_755Pve9bz zBQVK1qB_E-&{IMMfYr@>3lbm`1B16v2?Qi z4^!1~0>njm4Dtw6Nx?`kjow8;g#y-?15X(TB_KS49#Odf3p#W^3TqRl&=cwrz<(Ha z-0gx#g54hUg4zVwEMYlzjy)2H4A~3y8cE#(7)^uwvi3+o>iz(&2?7{i3hW$v+XTel zpu;ppfc0Jweszw04KsCie9$BT3=u_CM_pam(J%oFB82yjsDmTrCJJEOW$hm)$d+&+ zGasLorV6mRFY6(ch$#HmcJ7@2J)2zZofG17sDOqG@E~=~T99qe%?mCRE*vPCHVI%# zm0)PgKn}ia5p5H|_$5ePpUWq0=i)t-C8A{l?#tTWMU}pFKvg2z76BL~K{T4B?B7tf zh&EP1WNp>3#v2JH{RJgamWVbAU_|cdALrOVSSxKOllAYHE26Ce7zCU<$KFUlx`mRF zC8Es&7($vm#~ulWHYis^VxglAFFJcF7@647P> zYv_ajJE0PWt8MNfl{$KkBT7Wu1t7sZYzLUgl{))ZPfoRvK+G2Ecnu)V!7zAxXl zI|8EHyvUn6L(@Em`r+LrzplRDeQUb_Ml;ON4XGj}=ttHnLmd=S;3%-mG(i0AO{83V zx+#K0MFA5l!Om~!peRIK6flW5`iBOk8ayeYiHiazQG#WVP*qELAvlYR0w&dzm!Y}& zj{CTv$OM5<@uKXZY1#%+64@YT-=%ru{ckcU!NZ_W;G&RZW9qVeT(C`$lS zY9zR^+lmtr6_qR|mw?W96=hdFVN@o;p#?H@p5RdCmG7r=2@Z}7ad=pJn?XF=kj{oC zoL6z>`>9QW8|!0r33!b06tJQ(1{XY9SN$1J`z-V0-;-#B1ULJ$y{WZtC=zcCIt7`K zwF>Eq*9X*H@NOC>!4FFz!W|?W3o*Ps+=%z;v-S(}M-7i;0Tu+vBidVDD~xE~8k%vt jx%_3`ltNc16k+@iLfAYwns_;300000NkvXXu0mjf&i6oG literal 0 HcmV?d00001 diff --git a/payment_sdk/src/assets/images/success@3x.png b/payment_sdk/src/assets/images/success@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..d8c2095a54467aab7aee1df4e9bf6ce9104f0036 GIT binary patch literal 2780 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 iU6X|o1VIplhVnOy<`<84?r}B%0000 void; +}; + +const ResponseScreen = ({status, message, onPress, onPressLabel}: Props) => { + const renderMessageContent = useMemo(() => { + const title = status === 'success' ? 'Payment Success' : 'Payment Failed'; + const defaultMessage = + status === 'success' + ? 'Thank you for your order' + : 'Hey there, We tried to charge your card but, something went wrong. Please update your payment method below to continue'; + const msg = message || defaultMessage; + + return ( + + {title} + {msg} + + ); + }, [status, message]); + + const renderIcon = useMemo(() => { + const source = + status === 'success' + ? require('../assets/images/success.png') + : require('../assets/images/error.png'); + return ; + }, [status]); + + const memoizedOnPress = useCallback(onPress, [onPress]); + + return ( + + {renderIcon} + {renderMessageContent} + + + + + ); +}; + +export default ResponseScreen; + +const styles = StyleSheet.create({ + parentContainer: { + flex: 1, + }, + container: { + padding: 16, + alignItems: 'center', + }, + imageContainer: { + alignItems: 'center', + marginBottom: 18, + }, + icon: { + width: 48, + height: 48, + }, + title: { + fontSize: 28, + fontWeight: 'bold', + marginBottom: 16, + color: '#172E44', + }, + message: { + fontSize: 16, + marginBottom: 16, + textAlign: 'center', + paddingHorizontal: 32, + }, + bottomButton: { + position: 'absolute', + bottom: 32, + left: 0, + right: 0, + }, +}); diff --git a/payment_sdk/src/components/SubmitButton.tsx b/payment_sdk/src/components/SubmitButton.tsx index 92add96..d7edf47 100644 --- a/payment_sdk/src/components/SubmitButton.tsx +++ b/payment_sdk/src/components/SubmitButton.tsx @@ -25,6 +25,7 @@ const styles = StyleSheet.create({ buttonWrapper: { backgroundColor: "#0B82EE", borderRadius: 8, + height: 50, minHeight: 50, marginHorizontal: 16, flex: 1,