From 67735a8417fb9345a15b912811461dd6a4639c2a Mon Sep 17 00:00:00 2001 From: ducht Date: Mon, 17 May 2021 17:03:05 +0700 Subject: [PATCH] them cac trang cart, tai khoan --- assets/images/acc-icon1.png | Bin 0 -> 480 bytes assets/images/acc-icon2.png | Bin 0 -> 431 bytes assets/images/acc-icon3.png | Bin 0 -> 362 bytes assets/images/acc-icon4.png | Bin 0 -> 509 bytes assets/images/acc-icon5.png | Bin 0 -> 497 bytes assets/images/acc-icon6.png | Bin 0 -> 624 bytes assets/images/acc-icon7.png | Bin 0 -> 508 bytes assets/images/acc-icon8.png | Bin 0 -> 596 bytes assets/images/bg-account.png | Bin 0 -> 6614 bytes assets/images/bg-coin.png | Bin 0 -> 4435 bytes assets/images/check.png | Bin 130 -> 0 bytes assets/images/check@2x.png | Bin 212 -> 0 bytes assets/images/coin.png | Bin 0 -> 11746 bytes assets/images/cus-img-account.png | Bin 0 -> 5512 bytes assets/images/facebook.png | Bin 0 -> 164 bytes assets/images/naga-xu.png | Bin 0 -> 720 bytes assets/images/payinstall-bank.png | Bin 0 -> 2586 bytes assets/images/zalo-login.png | Bin 0 -> 509 bytes components/header/HeaderAllPage.tsx | 24 +- navigation/BottomTabNavigator.tsx | 330 +++++++- package-lock.json | 271 +++++++ package.json | 2 + screens/AccountChagePassword.tsx | 0 screens/AccountCoin.tsx | 177 ++++ screens/AccountHome.tsx | 892 +++++---------------- screens/AccountIndex.tsx | 259 ++++++ screens/AccountOrderDetail.tsx | 316 ++++++++ screens/AccountOrderList.tsx | 255 ++++++ screens/AccountProductBought.tsx | 257 ++++++ screens/AccountProductFavorite.tsx | 308 +++++++ screens/AccountProductSave.tsx | 305 +++++++ screens/AccountProductViewHistory.tsx | 346 ++++++++ screens/Cart.tsx | 1067 ++++++++++--------------- screens/CartPayInstallment.tsx | 248 ++++++ screens/CartStep.tsx | 872 ++++++++++++++++++++ screens/CustomerInfo.tsx | 289 +++++++ screens/ForgotPassword.tsx | 80 ++ screens/Login.tsx | 260 +++--- screens/ProductHotList.tsx | 797 ++++++++++++++++++ screens/Register.tsx | 241 +++--- screens/SettingAccount.tsx | 160 ++++ 41 files changed, 6203 insertions(+), 1553 deletions(-) create mode 100644 assets/images/acc-icon1.png create mode 100644 assets/images/acc-icon2.png create mode 100644 assets/images/acc-icon3.png create mode 100644 assets/images/acc-icon4.png create mode 100644 assets/images/acc-icon5.png create mode 100644 assets/images/acc-icon6.png create mode 100644 assets/images/acc-icon7.png create mode 100644 assets/images/acc-icon8.png create mode 100644 assets/images/bg-account.png create mode 100644 assets/images/bg-coin.png delete mode 100644 assets/images/check.png delete mode 100644 assets/images/check@2x.png create mode 100644 assets/images/coin.png create mode 100644 assets/images/cus-img-account.png create mode 100644 assets/images/facebook.png create mode 100644 assets/images/naga-xu.png create mode 100644 assets/images/payinstall-bank.png create mode 100644 assets/images/zalo-login.png create mode 100644 screens/AccountChagePassword.tsx create mode 100644 screens/AccountCoin.tsx create mode 100644 screens/AccountIndex.tsx create mode 100644 screens/AccountOrderDetail.tsx create mode 100644 screens/AccountOrderList.tsx create mode 100644 screens/AccountProductBought.tsx create mode 100644 screens/AccountProductFavorite.tsx create mode 100644 screens/AccountProductSave.tsx create mode 100644 screens/AccountProductViewHistory.tsx create mode 100644 screens/CartPayInstallment.tsx create mode 100644 screens/CartStep.tsx create mode 100644 screens/CustomerInfo.tsx create mode 100644 screens/ForgotPassword.tsx create mode 100644 screens/ProductHotList.tsx create mode 100644 screens/SettingAccount.tsx diff --git a/assets/images/acc-icon1.png b/assets/images/acc-icon1.png new file mode 100644 index 0000000000000000000000000000000000000000..61764bffa2dd46a87b2f06135d9714f5788bdbaf GIT binary patch literal 480 zcmV<60U!Q}P)!> zi#P$KN((n2ZLn~@XRRZn7_mZ8R$A@u?97`t`}53IuFYn%HOp12)#}R3`oS2pU^;F# zn?q~sU>hY#(#J2z+wiHFJm7pjPqfB4An2XxGyRiZm5p(UeZsi4wjSdhwnxPQXnp|_ zxMWYvZW*WLa=EwP@9P#waZ>_2Bp=v>sg2$)1Y~0f=nDWo4&$tXFbwO5!@jY?j$?6Q#zMhs7;GdU#F(7mUf~yw5=Tb?Pm W-XIgr=)I{ep(Idfi)7ix&&T)OXApUwN1CRw%{{RY!Z8dZ>$=6RJ>=;P zQfjEE@B4_?#`C;0RUvJMYpWD4-4UqR!Mhj0-vR%e1Gc7VI=2Cjz*L6!F^XcN-@}5B zNm0JQ ZzX1KC9U)&Aa~}Wz002ovPDHLkV1j-&xnTeR literal 0 HcmV?d00001 diff --git a/assets/images/acc-icon3.png b/assets/images/acc-icon3.png new file mode 100644 index 0000000000000000000000000000000000000000..ccfb3d18a2549c78ffca7478c7dec5057a79e250 GIT binary patch literal 362 zcmV-w0hRuVP)*{45KCz-5f>2k)=7ZQC9T!;piu#CH;zobxR%qL?ql zb;L=)Ld?a#ig*MdD}fXIBw`YjCrC`_)-sOE4IK0w$1&;!k+7ctA&9F`N~NavwhVhI zLSfu#6s1i&mmEcrnq}Fjeo#@AvuT>wPCyKVCOnrp3CewxJrnn(LxD0a z&+`kCpC(TL*?ub!3f-b8Xb_b}oC(sV_7L7OEz63#D5^bmIvB_D`J(r3)fXn5I{@gi4}dC&8$TNsB$VI6p#T5?07*qo IM6N<$g7p)U&;S4c literal 0 HcmV?d00001 diff --git a/assets/images/acc-icon4.png b/assets/images/acc-icon4.png new file mode 100644 index 0000000000000000000000000000000000000000..23d959c3ca2e7f77b21921a14f85de16da87e525 GIT binary patch literal 509 zcmVNbVpx?^|nP91H|yCD`5Bng9RJ%-R&}2*a?v-|wHJC~6yHsxq@)upaxqznaZv zbxb|>4s)5aE%T~WDh)i((>fkTe{#lgiPHz$5$i2K1-a~>n5XR9tY0n3mRY1Czi0MD z8UtEo8#!ZC(9xLB=Z-)yc3Z91^u&1=Td!CwK1iuS-3UV+XD92N>_v+6SKc|KA}k=t z6`<4&PO;|!WbHu^xZGj_V8wtQ;m}BOa4ksM&!+7Y4D&C5$}YZ0v& zse6$+#l?Uc>Lp5l$5U#Y>$x-;F?wAU-f1?Q3){RQIeSOFo0pPb z3NuMpvk&bjOYe1j=>ePtv@NA?rCMTi&3pd_(_RB2M3pn400000NkvXXu0mjf`_b8) literal 0 HcmV?d00001 diff --git a/assets/images/acc-icon5.png b/assets/images/acc-icon5.png new file mode 100644 index 0000000000000000000000000000000000000000..7d386bf8b13a8c38e3440471383a210fce3a401c GIT binary patch literal 497 zcmV&>#hVn{JR1*r3@U{f01tyZg4+W5B>gI=&l7%q}?u>t0%*=!b(fE!>=!VCn^PM`iZ9Xk`M`&*=UD9;A0LZc@%nI`-ylY1Z1(X5{czD&-c==`E@nVTwX3R1 n(db9sVb!e|i_t!m|Lx@u)J-)c2>MB{00000NkvXXu0mjfi^AA< literal 0 HcmV?d00001 diff --git a/assets/images/acc-icon6.png b/assets/images/acc-icon6.png new file mode 100644 index 0000000000000000000000000000000000000000..c71cf9f58154beb06eff5337763ce898c881f597 GIT binary patch literal 624 zcmV-$0+0QPP)>iw|som-B`Q80{y3JM2S}Yc|!{N{|#&l6P*j4tPy-AW}S*cW3 zy_Q?LxWq|;^Wmiw9Q;Tzp|2uRsz+-^rC|emIQB{fR4NaXL4TrYra3Z$R5VXa+c&%{ID#K`ZnMV1lX*=-PqW0CY}#&=gQ<;w?f^^TBW; z{+=wCYi!0uo;ucYpy)R^8%btVfaCG_VU4piWsLj_n|F2x{U;Z1%jI&@F9^XX{Ws)w z$&L6CXLzVN&o=5z?ow7^`u)BNb+#;BYod<~2l24cApjH&9pueC4nybIK4M!J;J#EU zjY7|siZ5|XWUBC4Q3Aj;ZL%~<`J#f(7-u4S3g9)sTmGN@=j7}hk11eLgh2#yy0XP- z`jxhP|3z5DVGdxMC>8CJNG85snINC2uu3^2Kc{*PMdN5G0z|LM@AVelJJfr-AYF7I zU*LVDzSaZhdzP}}&)s*OqQ1PRQ}k%FX1ARZYZ!20$2am{gX@3fJEGHMx=I0y`qHan zQ7^v$)}~7uE|75AtN}?d8vBDlJacL4F4@RmvAZF&u3z=Dd1(7rkN5#Y4S|@Q4FejW z#!T$mVX?x=sBj+o6}A&w9U@+CJ>8CfWfA)s_;)WRcKCGud;SFol7%E`Y}8@^0000< KMNUMnLSTXjNfxgF literal 0 HcmV?d00001 diff --git a/assets/images/acc-icon7.png b/assets/images/acc-icon7.png new file mode 100644 index 0000000000000000000000000000000000000000..ba4041202eb43fbe80323132dec89e93b4840844 GIT binary patch literal 508 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 Y*m?>VsTL_10u5pCboFyt=akR{0Ob=Nn*aa+ diff --git a/assets/images/check@2x.png b/assets/images/check@2x.png deleted file mode 100644 index af07eb61af33f2a57763c7caf5c899ef6be7531b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 212 zcmeAS@N?(olHy`uVBq!ia0vp^AT|dF8<0HkD{mW+Vkvg=4B-HR8jh3>Aivww#W6%8 zJUQh6^S}T9_cLg$J%8dv#)%GZ*?>T%fIK^ad=@R91Qsq9221gVIqU|$4u;GMzikBK zS(4Zn++m+^h~ME{y+RoaR}8}^)&*TG3%m3hco;NUUfMAP^DI$k*k~)j&SaX`aFeM_ zc~Vl{3K!*oK;})qAI@_Os$qCiQR2Voht!G)#+$(>x)>kCnsBnNwvPrni^0>?&t;uc GLK6TW13=gS diff --git a/assets/images/coin.png b/assets/images/coin.png new file mode 100644 index 0000000000000000000000000000000000000000..29ee5f2b7c18e5fb364aff604a3aceacb7aefc7c GIT binary patch literal 11746 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 literal 0 HcmV?d00001 diff --git a/assets/images/cus-img-account.png b/assets/images/cus-img-account.png new file mode 100644 index 0000000000000000000000000000000000000000..922a04609b951420caa35fa9d61c9161c6c457a2 GIT binary patch literal 5512 zcmV;36?f{1P)x2r(pN>F#vWopitNR;t?SN>x{N z6K4Fw`=frHbltkkSKs;WIp^LGM1K}d2n1=W^=BpeqX8uykNc1Ej{XxswN#(~RuEfi z&}uJU+K<}r()OgFsQs=s9>4EjZJ@;M3qMOg*`U?NApj!=$k%s%1EKbS+5pv_SGq3+ zNDL15^ZE1VZ%9Z;xLvQ;r{LGtI-M>7pNT<1L5b|X+wJ}hAHTU=F7C6jvGH_CNy#TE zDJiG;P8m>Qu;f4tbo|YpYiXe5SmXJQ2WO(uXv_j2T`+mNR8bAk%BZ;H5?!vgkWL>& zt)e37n$~fYlH8hNV_YH@gnf7vJuuLi}6~fViqUel9LI2Tq$-QIyuR6O9^@PJ=UhQgTuv z84U(8Xa{UI+k%LQh^;)k1eS@}#u4<2P|~0cTH0@BR(Oa_IjEwdVqi>6%qy65FV;}u z&%e@hFRi2R4jreOx;kcFO+!$6UEF;ly-r6l;h{8n>_D15V-m$gM|h13?Hs78s+t`e z8~ZH}ic7&fwaiDh&XqDs3KGYlix)567#|=1D)i?T)@%9Y8d|yjb9(*V&#A1c1~mfc zmg9(g;lJqW<`;LF>uJWBW9JzTCWcU@iG+>nrv z1-QwW#V#e$*F2U$fRbg=+O=!Lva_?_gizlj^nSV0N^_TfO51-ZB&*Fv)>L9*j8@M5Z_2u30Aa;!Hem?<=1rS6O`9@himfHs<8Qo=>fpHuvC@2`$uV23lB4$b53Qer?2Pj#Pphq`D z6W#+zZG;{hT`pSp&%Ly}pqT0%4h|rz4PbE~HC+}PzyiCR4NlpCn(^(f>6z52RTzDF z{5SgRCxui|F98cLWJE?PZQC%145HOg+#tZZc;Ui@yV|#J|KpW_C+Y zb8>Qag8He#;24|s9y&$ymw!#chENI%4W$P7OHC}|LGrMwiCuLLm?FQzHR+I>Mt6>< z^^xX_^7~MNt{u_rZ_k@TLr9bnQrAe=v_C;6f-BEFvF4KPU4* z$%(vA7_=}-3KIKW4@d8*(9qETmA3wm63`jHbwN0L8$HXaXzP6bvD+ZOFK_dqlgDlA!f?k^dj}`b)C=2 z*4Ebk9ggp-sKnj~YeBjqDn73jD8b}7CjI>L&)vFo>9UUjCT^KcvhT>p>Bz6eWDXAI zfr{pUVpkM^3l9s2DK>EI;=uBlW0Pqn8XWZLeZ46@oT*gva=F$)Bi`Oa$1AXy@#4+~ zx9HjXX~xvM)QqF?*s){jUAuPuNyIF%Hy%FScjF7 zEBJ0m?=JN9hx27!1#x3A!91AY9XzW9Mu|On*}i=-N>-OjOH0RMm3v>>n$y`p;~$tu zTk{WiiLEY3N8zDi6cyRTD0XoSgK3(KCJ1>QOwdZ9E(<-LYNT#)!D_7Fgg@)u0?LEH z3ndZybSQ5*wNCh5*OVH9Pzz8V@qYaA$3tFw?X@Ft1=>poQGDSN zrH!6JrCfmPU4lSHW{Od~`7vfO4P(EDhlEf^vyH~Jvr}6^i=`nBfN_F7CDnGsh)zZz z`q%L?POCiT*WjY>w=ATLw63Z^V-+kKGGs{FjvYIgZz2f0PgW@bCC4T`vH(wohlkIV z8_D)vhv@bPU!*!8A&Svpq=>Kx&IDt@ux_oRDLo;GZj5qZ8Ff<##M@-hQM;%RZ|4%o z6j#|P)TF0Kvyl^lQ{^_gW##u|7t9YpZTLqHWltEY=q8BAjk(N#WZeZ{ zK#2uhzh%po#Bt-s9Yw?5p*!FElD9slCl;(z4NP>HW&7ADdS>9YG`4FTg%}v$c&Xv! z#!Y(0C|quqZjlLJSnURcHX~N;p@QF7klmzHv!_p_xld+m0t!#mySh1uW!;)w-w#t)~(3#O?G zy3onlvu8&oCnxXF!YVnS#4DWulmULztMHqq$pOXun?YGm)2<(n^FX=D3`QiF^^}$I-kK|KderxT@R-0kj&&sN=e9mTmTvBE`ANUL^AW93Zk)1w#ZBs6EnpiXcb zyoXd}cTkuvtCD?I|W}V^Ud8<%X^>qj?ARBOP^4T`=o<_sQ-eT zRv&yXh`Qj2N;9OgxkWE+VnFTLv!@FpaFz^{EtOd5dJddU=WC!BV93%@UFhEKk>s?L zQ;^<7=J+J&M)OpNB6^Y=XD-_)IX0|W^$S(Cl)gNlEC7;~yNC6o4R1V6Mj7TR^@Yqw z-;9imW4!rEwaW9D5~DoY#DJ=-tb8guI{F2r&dSOwspqYaQK{9+0kv^LFB*BRnVdD3 z@CaOk_zt8qn6%>3tlp_|D|M9U7pueoylKU5vSGzzWdd^Rn^w&73n-+J=OSG#gf#+C zV!w)OTMCrGCicm|Vxpo)#_-+X;9#%dS3H}F%hi+$(<@;>!IZ||kU%TObtiXq3Ar1c zWQs~8eTesNiW+LnB<;>dZWU#&!SxA}#TNGq&R5a!HG8=ws|lzy0QHPtKp}~ki;V1j zJfj4yY8KWg0p$^K1{Q$&7(m^sG`VVvjZz0pM+&5h3pI^sb=6%xXdIUR`l?c}$w;Q? zHd>c$t{b*MoQG*K=h6V(YKN6iTHf1#jvm>Hu#MNX0D;;LpvH=TlGQ0+KnX%_L~NIj z*iJr;h#u_rI_h!DG>9u7Qebuwa2|(tileS^p;U|P&l=lB`at0mV$ufYspy!WOoZD_hvAmpWh?{Zd{oUjdVv(4{rK zIld?7c`KC$xB&R)vySjA^RY6P?V@7%UqT54D9r6VR=yrQPy$%ZymT>8QvZo_3)qFX zhu21m(W)v?cvugcTzY#q`b%1pPoPd-vT|Wcn@Dq$fGTWl9W1V*!EgOQZjn1NacDo< zxZJ;04?Wa_1g&L&@{0X50R`00qA|tXhZdmNoD)M#wEmtOsbBkO&a;*)%%qrjGmrcl zfE61i|9+O||4Pq(bHZym3dB7?e>LzAJG2B)M&xkzfu5a|s9>+Fr&MUv$?^){(gIr%wuOO1It@U3%hsQJ9}vFg=()`*>E`5`QdP~hv7({g#M=EN9J^j zP0w#e8L@9_xpoE%k_yi6v z+;MRpyxsr-=d|f}(`0FuPYO%u;oL%OSIKY1{RKe1<0nw(&YjEY(4oTybjI{alSZ*| z3!w`erN`l1y?S-hLk~T4h`-+qiL>WR0aOlE<4l2S0V^KumrU~!IExF%F67S}>@{GR zoioWG0H(tR1zdZo!PeH8_lu~o0(~f0X#haESFT){I&IptVxCcAhtn(G)8ufX5hFxz z2X-&I$pKMx@;u!*>TgH`3sILcT&%-+V|vkJeX#@2yi1w=`bjrsZc{W3E%zmNlJH;(o6A3qDed-DvYw0^wVOy9ln2(?X! z#@Y-sDo3*KGD08rGXq9J%xyTJ!8SgRz;jnBO^Lgin#Fwg?%kvM_wT<~1}M$h1Ftj- z0}8t@#+sU%U*tUWuk#9M#C>xCl*(!YAfC(WPqXeH=DoTxfGPo238bQqU-l({vA}v1 zfI3*_11LZIDCUu47p61P!OWJW&Za6*N`lU@3MX-Av}x1kIq4hC-MWjirY}S^>jNm3 zSMQ!o@4t{uVIc}(BRiylV?sEffKQxSVP?r63$nX)H0G7hXx}-7z#D_QXIKWUf8!}l z`6z6HzKl)K#S(oI@9}vpt-f;R;+2mBYUt3RVPAdq)qccA@nW#v|0s_pJ+YJ}j%2NZ zecLG^1|UtM&Pj?%2;~)k%?1m_{I%cE=AB2Wv<62UWfp=v2ll3au6mA4COEJ@3S!st z5hF(Q$;-=Qj-S9L@dkrmIdcZ0An5Fq^=>$Q`t$?X;$i0_J>~5U+i2?ZtJv{f@8Pkn zDy-#``gf<<4~?MKamr^3e9nx&$=NoUz$7cGZS>8aBHDYRl-_)O7KJEj zARan;^ymYrsi~jyOp^1)o0**wqr^bT`c#Zvi2s%#{=1u1p1ts0TD|d08kK$>-8;ND z_3oM^n;!88fI#Xx0Gc@pr(~jINRKlPK{(ebeo2VyK15uXBLh;vTk2}8GIa0W-HiRd zjUmCox9r=whZ0O~ii-)qs_gL#JTTiB8%M?%Y`^2AAF>3yuz#0bSXhYVw3*3?k1G0g zNJEWPoEhFbVM6rM7oPhV(&-(z`8A`fTp2NAgI-^h^ZcB#8$bLI+eBUhE{*M)X_GKI zUonSpPcBgQi2F-VKizKnq=`6zr}rG6zRFYgt9h)HrEjcXKl<;Bma((uQt_7C@bsHe zVht0ofZ`aC+aR4ib7tF|?1}FNn@qAnvtKi7!OF-#!qzOD_iBVeub2sKK@3!zveY|18#!g_-;NwPBGx3a zzoaVQQV`TSl`}!H*Y4TYV(dEe)6tw*Jw1uP4pL7gsP!DkeYd;ug1v5Dm-L%gE3imx zZmMTDwP=(QtCTd$mvb~W^G#6earD{z&I&KyGZIzxW`kB1lBnU%$o zjDk=LERsvgX*xQs)%3)mO3hHpEOE%A-??+=fIg|Iv-Gx_R43bbVDVW?f`+3+`jAj^ zM?@Vt@bj^S0|yS=B>_kbmQ=VkgA@o*!ZQM3UdMx&>GAp{0LI-vc<|uZ>pORzY6_wr zF1sBmUpqCjzpi4L0mN^b3QG;+4;l41MXU#VbRl8vPdyI*bgXDadV2boXhRTXIdGIf z@+si{YLr}kIc5p$60=MUWYC;BbJ|RtIB`(hwrvL^zm*A)BHZ{Z1~&k6A-%#j8Qd(j zg2E2D2H_mK&SZjzZ3IXL96=1KwpgwC#l^)t)~#Fje~T6^Vn_TKGsHlMO-xRY#371i zO$bDA#p137FtKaVw6((j&GEKv+xj4izZPLd2kaYm!10@8Y_xL0HuBl$aNOuDJnFLu zJ0h6*u z2^=Y_wfbrszzf?C|P)X@4*0i`ysKivI4fztR&{sc-RQ2!4Q3N_NT0|(H2weopPOOjPX`%>N5)R9;tVe<6!vi(kxyu1Z;+{WQ(#!ll2yuZ>90c$!x06u zh!6H1jXVxbybg^l3e(shxutXmoNc+~w@~4PC6hyXQ%@oTgJ-K=l|tvrqd;pIJYD@< J);T3K0RUBDFjW8m literal 0 HcmV?d00001 diff --git a/assets/images/naga-xu.png b/assets/images/naga-xu.png new file mode 100644 index 0000000000000000000000000000000000000000..92601080cff032bc959a9d306a6b7c792100ce1d GIT binary patch literal 720 zcmV;>0x$iEP)y5KQ+!3i*fZnF49 z7$u~He5iHP7;)@c-?c%&7k))9g8Fgn8}I@21wpJb7`f*B*D1>s$!6tGwJl^lKv5v@ zQVcGEW2OXJ%!g1@v7BC4+Z^Ug&|*noQoeZr z(7xqDD5@lwm^NF>&xP6p<8JibcOk&8%tj@ZBpV$Uh`T0C&8mkeuB`dkQPpQ^+7!2~ zThBiS{Qb9iH06;dRM4xo=R5Ebjv}`X)h9?4Q#22%kX|9p=LbzvO zBD@z|#W#0)XXWZJO5n2WkEO#18vVisZAoCIaEE zG9MMs0K5OMc$e8t49Sj7X*X&V>d=xk8yRQqc4&}*ht8P>@yHnk34~%r4dR?>kTx}l zad}JY=t2V8gC%Pnxd96FI8$W0QtYk0dIx z1SexNF2WIWo907DwHc0MX?3+|b#Y^jVy5wT literal 0 HcmV?d00001 diff --git a/assets/images/payinstall-bank.png b/assets/images/payinstall-bank.png new file mode 100644 index 0000000000000000000000000000000000000000..dc4f6ce0c15e756a09560aa527350b71532154d0 GIT binary patch literal 2586 zcmV+#3gz{QP)X1^@s6)92Uk00004b3#c}2nYxW zd+a5K>t=1-Lj0#mY!zLUuSx8HY%nKI6R z4rhkpG`yaBWbU`$?>F!J-1pvL_(^H=cjyK9sCTQ=Gy zWKXnjrpXPT(jYzKTDepradl8we;I&TtFpBNE0&tOYm@tn^>>N;YlQD^lN&xAELJ9y!QS5b`^aN>5rbfvdxxLW-ym51 ze8IWlEab6{q~(w(D2LSE-WsdY8&k;VO$&FFpELJFNGR;pV_nFtLg9l(yBsT;jUzZ+`mI6PBEOkce zy|@-jcV6!ite7(g(3Ew{Xt~YV1pMLZC*}bw#dZ!R${#?~%mbWNKr6{iG?7Ef;$Z7^ zEUVsRbf6atvv6|9TD`LTC=X2WyoT$6AqY_D$LP?`FATkxg~6hsP<`(kC~xk8x-tzA z${<>FTQ}#I{*{fCNA(C)*db%iBq$Ch6R_0SI>`&~jdR1nqDOc)tpxQ1F0IkJ*XK^s zK{xtHnyx%4)EjF9TnE9TS0GC`9sag85UB}FTCf_(-$LNDIuf&Ml8l0NYWo_57v<=c z)vg=@-_AS8k&S`h_#gGk&Zr_VU-hwmU;O|U9WaM@9M!#Zcs_S6gwu|J=M)a=X?%_n z*of_k^1}-wWC;8!gZq4JY5>M5B)amM?!z#Scq3|c?Mmzj^XC4h;Ke2v=+?A&v=jDC z_8U-OQNd2F;C>^POmPSGSREDB5IPUn%~RFbg4W_P*q{G1KF>d*H~-3(8dQ_ROgwl4-+_6P1V0pguVhe5oDy5<7C2cnMUzQ~UkZZIIfC5gV`& zj^bfhb7>R8T!Kv#?*<-=A>NA03F5&_^;qpIRB%;RqEPG!_YjSC(OQZ+2rNYFhuxztjU^&rb=jNc8*$*rnFbS}CstiNiY;I6(ksh( zeH5mOQ*g;G5@B8?dS&ma)?$}xfz`m;oK=RcKEqVEaMQptO3gE#+;w0p7NmZoSNp>H5X=oo z*E{!j)h`gMiZ|@FpEQ;h60KLEa3zzwyzZJP;8;3}>Ra{BX(!xWOHmK^Dgj5^*Ak+u z+zFV6h~BzOyqwkpS_>>XF3n?|On=B}DhkpqqOazDlnR<|SRLsIfmDL>9s9ZPXY1oZ za#|XVr45DDV+|J%#k%0-TvBvL_I?r)hxQ*>bP@FKFuW+6yN)!Eb=7w~UgaetkSXTQ zC98vx%#JsXYCnQSC!p0t+R0GwL(>Op7O>rS8RS3ij__ChF4&cSpDS}Cx+$-=3G=%2 z7Zv&x%D)vGe|8?}B*#S(8m$EuO*foMs~~zxlM=}&uEWK=Dm1iqa$r&M&X9lIP1V$l zmLiRK-*e-rURkrU1*IelZ?brQM(1RiYW)n>iYo;=AiAdw3hG*PcZ6rA1wzE<>4bat zh0`|sC;MY!m!4YlyenpTXu@7D37a%EL9JtDv{k{fdLGNRt^#g1^h4Q`1QkZUX&I%Dj{tmaEwPT;tX`ySC^?3if=KMc?HU_OEm-Q*}Sh+QtXKfx*TTYuT^>O0v z9zVUI$W4`_AXOCsRiJR2ZfB;KsE5OMOVQ7v|FbbCQ%K3OaC&(yRH1)76`U5VfWy}n~ z;zD8m*S&)EL+B!tuA)hm2f;Gwa&@oV)7uTko)x+%L`Ym5z`Zh4xO$@=SbT{XBNonp zOY8#VJuWl=%Twlxcg8QrD7jmYbN$J@Hgh{^BrCUN;b5KD-Sswr@B7O*VfePeH%R;Z z73xbv3wf+Tu==tYeQ(2gEJ0#&gIXk$4v2T&0e|vKo&P<>?fcsFS{Cl~R!apf%s}v1 zHolAI3c{04nrUgeZZa}co1{{y-9UKfodG+R5qy%q9jeZCN;!E*%p;F+tYs{F5x@3& z*%HG)`a14X{jKBCuJ$ZhqJA>a665vMC*v4eEt-B}geAtz%E?GnDODR>TwKT+t+|i5 zLVo@gt+~n{r%izp0w^3iEwSil>T|W{$(< w+NES=WlScoJqw+joUFEwPEN`+hVg9sFGR)a_<|BSTmS$707*qoM6N<$f?-wm)c^nh literal 0 HcmV?d00001 diff --git a/assets/images/zalo-login.png b/assets/images/zalo-login.png new file mode 100644 index 0000000000000000000000000000000000000000..5d880e4671e5371899aeb74cd1916e2ae44c445a GIT binary patch literal 509 zcmVbfp8eJkxtb6dLC_-VS%vaD)DWU&c@J{h#j zKXW*m$;m2Q_y;a%PYYh9qhrL#{9F#EzWo3<@W+YKw)w8);Lc6@aMHW}N5tWl7de<< zY~YG|uHi8O*dZP`gUrhDB`ft#C0oGoydXX6d=t&Z{vio+DQWs%ffvzlAUPjAVwgE$n{L?qFs?M zfm2gI9cm7Y5dqpaTT^qJ!%krA#~xl8Q{WiiTrLU6OZSCt1-(iLUeaj}PKxh|;B*>? zzV|P#RQJnRV9xCK;&Ku>+;fvTfMf7dM!#22g*R75_{$3;KNk*^axSQG7|AjC+BS3G zz5wE{L!Y-w8$6oksWo!zLO7pukGtbsP;C7Vpoh2-FgjsN00000NkvXXu0mjfDHP@p literal 0 HcmV?d00001 diff --git a/components/header/HeaderAllPage.tsx b/components/header/HeaderAllPage.tsx index 896bff7..5195d5e 100644 --- a/components/header/HeaderAllPage.tsx +++ b/components/header/HeaderAllPage.tsx @@ -110,8 +110,26 @@ const HeaderAllOtherPage = (props : {headerTitle: string}) => { ) } +const HeaderLogin = (props : {headerTitle: string}) => { + const {headerTitle} = props + const navigation = useNavigation(); + return ( + + navigation.goBack()} style={styles.boxHeaderProductDetailGoBack}> + + + {headerTitle} + + + Trợ giúp + + + + ) +} -export { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage }; + +export { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage, HeaderLogin }; const styles = StyleSheet.create({ container: { @@ -318,4 +336,8 @@ const styles = StyleSheet.create({ fontWeight: 'bold', fontSize: 16, }, + headerLoginSp: { + fontWeight: '300', + color: '#777' + }, }) \ No newline at end of file diff --git a/navigation/BottomTabNavigator.tsx b/navigation/BottomTabNavigator.tsx index 994b7ac..1fbd2ea 100644 --- a/navigation/BottomTabNavigator.tsx +++ b/navigation/BottomTabNavigator.tsx @@ -9,6 +9,7 @@ import Colors from '../constants/Colors'; import useColorScheme from '../hooks/useColorScheme'; import HomePage from '../screens/HomePage'; import ProductList from '../screens/ProductList'; +import ProductHotList from '../screens/ProductHotList'; import MenuCategory from '../screens/MenuCategory'; import ProductDetail from '../screens/ProductDetail'; import Cart from '../screens/Cart'; @@ -19,7 +20,20 @@ import ArticleHome from '../screens/ArticleHome'; import ArticleList from '../screens/ArticleList'; import ArticleDetail from '../screens/ArticleDetail'; import AccountHome from '../screens/AccountHome'; -import { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage } from '../components/header/HeaderAllPage' +import ForgotPassword from '../screens/ForgotPassword'; +import CartStep from '../screens/CartStep'; +import CartPayInstallment from '../screens/CartPayInstallment'; +import AccountIndex from '../screens/AccountIndex'; +import SettingAccount from '../screens/SettingAccount'; +import AccountOrderList from '../screens/AccountOrderList'; +import AccountOrderDetail from '../screens/AccountOrderDetail'; +import AccountProductBought from '../screens/AccountProductBought'; +import AccountProductViewHistory from '../screens/AccountProductViewHistory'; +import AccountProductFavorite from '../screens/AccountProductFavorite'; +import AccountProductSave from '../screens/AccountProductSave'; +import AccountCoin from '../screens/AccountCoin'; +import CustomerInfo from '../screens/CustomerInfo'; +import { HeaderHome, HeaderCategory, HeaderProductDetail, HeaderAllOtherPage, HeaderLogin } from '../components/header/HeaderAllPage' const BottomTab = createBottomTabNavigator(); @@ -59,7 +73,7 @@ export default function BottomTabNavigator() { /> , }} @@ -174,10 +188,58 @@ function CartNavigation() { + + ); +} + +const CartStepStack = createStackNavigator(); + +function CartStepNavigation() { + return ( + + + + ); +} + +const CartPayInstallmentStack = createStackNavigator(); + +function CartPayInstallmentNavigation() { + return ( + + + + ); +} + +const AccountIndexStack = createStackNavigator(); + +function AccountIndexNavigation() { + return ( + + ( - + ), headerStyle: { backgroundColor: '#fff', @@ -185,7 +247,7 @@ function CartNavigation() { } }} /> - + ); } @@ -200,7 +262,7 @@ function LoginNavigation() { options={{ headerTitle: '', headerLeft: () => ( - + ), headerStyle: { backgroundColor: '#fff', @@ -223,7 +285,7 @@ function RegisterNavigation() { options={{ headerTitle: '', headerLeft: () => ( - + ), headerStyle: { backgroundColor: '#fff', @@ -351,6 +413,197 @@ function AccountHomeNavigation() { ); } +const ProductHotListStack = createStackNavigator(); + +function ProductHotListNavigation() { + return ( + + ( + + ), + headerStyle: { + backgroundColor: '#fff', + height: 80, + } + }} + /> + + ); +} + +const ForgotPasswordStack = createStackNavigator(); + +function ForgotPasswordNavigation() { + return ( + + ( + + ), + headerStyle: { + backgroundColor: '#fff', + height: 80, + } + }} + /> + + ); +} + +const SettingAccountStack = createStackNavigator(); + +function SettingAccountNavigation() { + return ( + + + + ); +} + +const AccountOrderListStack = createStackNavigator(); + +function AccountOrderListNavigation() { + return ( + + + + ); +} + +const AccountOrderDetailStack = createStackNavigator(); + +function AccountOrderDetailNavigation() { + return ( + + + + ); +} + +const AccountProductBoughtStack = createStackNavigator(); + +function AccountProductBoughtNavigation() { + return ( + + + + ); +} + +const AccountProductViewHistoryStack = createStackNavigator(); + +function AccountProductViewHistoryNavigation() { + return ( + + + + ); +} + +const AccountProductFavoriteStack = createStackNavigator(); + +function AccountProductFavoriteNavigation() { + return ( + + + + ); +} + +const AccountProductSaveStack = createStackNavigator(); + +function AccountProductSaveNavigation() { + return ( + + + + ); +} + +const AccountCoinStack = createStackNavigator(); + +function AccountCoinNavigation() { + return ( + + + + ); +} + +const CustomerInfoStack = createStackNavigator(); + +function CustomerInfoNavigation() { + return ( + + + + ); +} + + const AllStack = createStackNavigator(); function AllStackNavigation() { @@ -381,6 +634,16 @@ function AllStackNavigation() { component={CartNavigation} options={{ headerShown: false }} /> + + + + + + + + + + + + + ); } diff --git a/package-lock.json b/package-lock.json index 0bed90c..79bbad4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,8 +21,10 @@ "expo-status-bar": "~1.0.3", "expo-web-browser": "~8.6.0", "react": "16.13.1", + "react-bootstrap-icons": "^1.4.0", "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz", + "react-native-bootstrap-icons": "^1.0.0-rc.1", "react-native-gesture-handler": "~1.8.0", "react-native-paper": "^4.7.2", "react-native-safe-area-context": "3.1.9", @@ -4840,6 +4842,12 @@ "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz", "integrity": "sha1-4Fpj95amwf8l9Hcex62twUjAcjM=" }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", + "peer": true + }, "node_modules/bplist-creator": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.0.8.tgz", @@ -5621,6 +5629,52 @@ "isobject": "^3.0.1" } }, + "node_modules/css-select": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz", + "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==", + "peer": true, + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^3.2.1", + "domutils": "^1.7.0", + "nth-check": "^1.0.2" + } + }, + "node_modules/css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "peer": true, + "dependencies": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/css-tree/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/css-what": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz", + "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==", + "peer": true, + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/cssom": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz", @@ -5839,11 +5893,39 @@ "node": ">= 8.3" } }, + "node_modules/dom-serializer": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", + "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==", + "peer": true, + "dependencies": { + "domelementtype": "^2.0.1", + "entities": "^2.0.0" + } + }, + "node_modules/dom-serializer/node_modules/domelementtype": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "peer": true + }, "node_modules/dom-walk": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" }, + "node_modules/domelementtype": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", + "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==", + "peer": true + }, "node_modules/domexception": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz", @@ -5853,6 +5935,16 @@ "webidl-conversions": "^4.0.2" } }, + "node_modules/domutils": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", + "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", + "peer": true, + "dependencies": { + "dom-serializer": "0", + "domelementtype": "1" + } + }, "node_modules/ecc-jsbn": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", @@ -5913,6 +6005,15 @@ "once": "^1.4.0" } }, + "node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "peer": true, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/envinfo": { "version": "7.7.4", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.4.tgz", @@ -10560,6 +10661,12 @@ "node": ">=0.10" } }, + "node_modules/mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "peer": true + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -12478,6 +12585,15 @@ "node": ">=8" } }, + "node_modules/nth-check": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz", + "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==", + "peer": true, + "dependencies": { + "boolbase": "~1.0.0" + } + }, "node_modules/nullthrows": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz", @@ -13496,6 +13612,17 @@ "node": ">=0.10.0" } }, + "node_modules/react-bootstrap-icons": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.4.0.tgz", + "integrity": "sha512-rxT8IxIU3Cnnj4y+rDJvlj5qITNfQP0jdw0e1gGCuyNDQDxvRvrA6QEFSLmWBgMqC/hig3CnZ+Snx2GwXbPxmQ==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^16.8.6 || ^17" + } + }, "node_modules/react-devtools-core": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.10.1.tgz", @@ -13568,6 +13695,15 @@ "react": "16.13.1" } }, + "node_modules/react-native-bootstrap-icons": { + "version": "1.0.0-rc.1", + "resolved": "https://registry.npmjs.org/react-native-bootstrap-icons/-/react-native-bootstrap-icons-1.0.0-rc.1.tgz", + "integrity": "sha512-V+LQbhzEegsrbnsMxLVDmOIyyTbK6iqDHQCypFkx3IUSR74a35n4s51Jam3cQW96PB/Y8BxP0TM1b/jPOY04Iw==", + "peerDependencies": { + "react": "*", + "react-native-svg": "*" + } + }, "node_modules/react-native-gesture-handler": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.8.0.tgz", @@ -13620,6 +13756,20 @@ "react-native": "*" } }, + "node_modules/react-native-svg": { + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-12.1.1.tgz", + "integrity": "sha512-NIAJ8jCnXGCqGWXkkJ1GTzO4a3Md5at5sagYV8Vh4MXYnL4z5Rh428Wahjhh+LIjx40EE5xM5YtwyJBqOIba2Q==", + "peer": true, + "dependencies": { + "css-select": "^2.1.0", + "css-tree": "^1.0.0-alpha.39" + }, + "peerDependencies": { + "react": "*", + "react-native": ">=0.50.0" + } + }, "node_modules/react-native-swiper": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/react-native-swiper/-/react-native-swiper-1.6.0.tgz", @@ -20667,6 +20817,12 @@ "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz", "integrity": "sha1-4Fpj95amwf8l9Hcex62twUjAcjM=" }, + "boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", + "peer": true + }, "bplist-creator": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.0.8.tgz", @@ -21298,6 +21454,42 @@ "isobject": "^3.0.1" } }, + "css-select": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz", + "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==", + "peer": true, + "requires": { + "boolbase": "^1.0.0", + "css-what": "^3.2.1", + "domutils": "^1.7.0", + "nth-check": "^1.0.2" + } + }, + "css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "peer": true, + "requires": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "peer": true + } + } + }, + "css-what": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz", + "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==", + "peer": true + }, "cssom": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz", @@ -21470,11 +21662,35 @@ "integrity": "sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==", "dev": true }, + "dom-serializer": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", + "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==", + "peer": true, + "requires": { + "domelementtype": "^2.0.1", + "entities": "^2.0.0" + }, + "dependencies": { + "domelementtype": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", + "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==", + "peer": true + } + } + }, "dom-walk": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" }, + "domelementtype": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", + "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==", + "peer": true + }, "domexception": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz", @@ -21484,6 +21700,16 @@ "webidl-conversions": "^4.0.2" } }, + "domutils": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", + "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", + "peer": true, + "requires": { + "dom-serializer": "0", + "domelementtype": "1" + } + }, "ecc-jsbn": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", @@ -21540,6 +21766,12 @@ "once": "^1.4.0" } }, + "entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "peer": true + }, "envinfo": { "version": "7.7.4", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.4.tgz", @@ -25132,6 +25364,12 @@ "buffer-alloc": "^1.1.0" } }, + "mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "peer": true + }, "merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -26698,6 +26936,15 @@ } } }, + "nth-check": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz", + "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==", + "peer": true, + "requires": { + "boolbase": "~1.0.0" + } + }, "nullthrows": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz", @@ -27463,6 +27710,14 @@ "prop-types": "^15.6.2" } }, + "react-bootstrap-icons": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.4.0.tgz", + "integrity": "sha512-rxT8IxIU3Cnnj4y+rDJvlj5qITNfQP0jdw0e1gGCuyNDQDxvRvrA6QEFSLmWBgMqC/hig3CnZ+Snx2GwXbPxmQ==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-devtools-core": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.10.1.tgz", @@ -27565,6 +27820,12 @@ } } }, + "react-native-bootstrap-icons": { + "version": "1.0.0-rc.1", + "resolved": "https://registry.npmjs.org/react-native-bootstrap-icons/-/react-native-bootstrap-icons-1.0.0-rc.1.tgz", + "integrity": "sha512-V+LQbhzEegsrbnsMxLVDmOIyyTbK6iqDHQCypFkx3IUSR74a35n4s51Jam3cQW96PB/Y8BxP0TM1b/jPOY04Iw==", + "requires": {} + }, "react-native-gesture-handler": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.8.0.tgz", @@ -27604,6 +27865,16 @@ "integrity": "sha512-CagNf2APXkVoRlF3Mugr264FbKbrBg9eXUkqhIPVeZB8EsdS8XPrnt99yj/pzmT+yJMBY0dGrjXT8+68WYh6YQ==", "requires": {} }, + "react-native-svg": { + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-12.1.1.tgz", + "integrity": "sha512-NIAJ8jCnXGCqGWXkkJ1GTzO4a3Md5at5sagYV8Vh4MXYnL4z5Rh428Wahjhh+LIjx40EE5xM5YtwyJBqOIba2Q==", + "peer": true, + "requires": { + "css-select": "^2.1.0", + "css-tree": "^1.0.0-alpha.39" + } + }, "react-native-swiper": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/react-native-swiper/-/react-native-swiper-1.6.0.tgz", diff --git a/package.json b/package.json index 357a36b..182363b 100644 --- a/package.json +++ b/package.json @@ -28,8 +28,10 @@ "expo-status-bar": "~1.0.3", "expo-web-browser": "~8.6.0", "react": "16.13.1", + "react-bootstrap-icons": "^1.4.0", "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz", + "react-native-bootstrap-icons": "^1.0.0-rc.1", "react-native-gesture-handler": "~1.8.0", "react-native-paper": "^4.7.2", "react-native-safe-area-context": "3.1.9", diff --git a/screens/AccountChagePassword.tsx b/screens/AccountChagePassword.tsx new file mode 100644 index 0000000..e69de29 diff --git a/screens/AccountCoin.tsx b/screens/AccountCoin.tsx new file mode 100644 index 0000000..d1b37e3 --- /dev/null +++ b/screens/AccountCoin.tsx @@ -0,0 +1,177 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { useNavigation } from '@react-navigation/native'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; + +export default function AccountCoin() { + return ( + + + + + + + + ) +} + +function formatCurrency(price: string | number) { + let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + let len = priceConvert.length; + return priceConvert.substring(0, len - 3); +} + +const HeaderAccountOrderList = () => { + const navigation = useNavigation(); + return ( + + + + navigation.goBack()} style={styles.headerAOLBack}> + + + Naga Xu + + + + + 10 + + Bạn có 10 xu trong tài khoản + + + ) +} + +const NoteCoin = () => { + return( + + Giới thiệu về Naga xu + - Naga Xu là hệ thống tích điểm dành cho Khách hàng của Nagakawa Shop. + - 10 Naga Xu = 1.000 đồng. + - Thời gian sử dụng Naga Xu là 01 năm từ khi bắt đầu đăng ký tài khoản tại website + - Khách hàng nhận Naga Xu khi mua hàng hoặc tương tác comment tại website Nagakawa + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + headerAOL: { + width: winWidth, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + position: 'absolute', + top: 50, + left: 0, + paddingHorizontal: 10, + backgroundColor: 'rgba(0,0,0,0)' + }, + headerAOLBack: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLBackIcon: { + fontSize: 24, + color: '#fff', + }, + headerAOLSearch: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLSearchIcon: { + fontSize: 24, + }, + headerAOLTitle: { + width: winWidth - 60, + textAlign: 'center', + fontWeight: '700', + color: '#fff', + }, + GreenColor: { + color: '#008445', + }, + OrangeColor: { + color: '#FE9923', + }, + RedColor: { + color: '#D8262F', + }, + headerCoin: { + width: winWidth, + position: 'relative', + }, + headerCoinBg: { + width: winWidth, + }, + headerCoinCtBot: { + width: winWidth, + paddingHorizontal: 10, + position: 'absolute', + bottom: 20, + left: 0, + backgroundColor: 'rgba(0,0,0,0)' + }, + headerCoinCount: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: 'rgba(0,0,0,0)' + }, + headerCoinCountImg: { + width: 105, + height: 105, + marginRight: 10, + }, + headerCoinCountText: { + fontSize: 50, + fontWeight: '700', + marginLeft: 10, + color: '#fff' + }, + headerCoinText: { + width: '100%', + textAlign: 'center', + color: '#fff' + }, + textBold: { + fontWeight: '700', + color: '#fff', + }, + noteCoin: { + width: winWidth, + padding: 10, + }, + noteCoinText: { + width: '100%', + marginBottom: 6, + fontWeight: '300', + }, +}) \ No newline at end of file diff --git a/screens/AccountHome.tsx b/screens/AccountHome.tsx index 9caebb6..fa99745 100644 --- a/screens/AccountHome.tsx +++ b/screens/AccountHome.tsx @@ -5,7 +5,7 @@ import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, import Constants from 'expo-constants'; import { Ionicons, FontAwesome } from '@expo/vector-icons'; import { LinearGradient } from 'expo-linear-gradient'; - +import { useNavigation } from '@react-navigation/native'; import EditScreenInfo from '../components/EditScreenInfo'; import { Text, View, } from '../components/Themed'; import useColorScheme from '../hooks/useColorScheme'; @@ -17,91 +17,136 @@ export default function AccountHome() { return ( - - Trang chủ - - Tài khoản của bạn - + + + - - - - - - - Tài khoản - Hurasoft test - - - - - - - Bạn đang ở trang tài khoản. Vui lòng chọn XEM THÔNG TIN để xem các mục. - - - - - - - - - - - - - - - - - - ) } -const MenuAccount = () => { - const [showMenuAccount, setShowMenuAccount] = useState(true) +const HeaderAccountHome = () => { + const navigation = useNavigation(); return ( - - setShowMenuAccount(!showMenuAccount)}> - Xem thông tin - - - - - - Thông tin tài khoản - - - - Quản lý đơn hàng - - - - Sản phẩm đã xem - - - - Sản phẩm đã lưu - - - - Sản phẩm bạn đã đánh giá - - - - Sản phẩm bạn đã thích - - - - Thay đổi mật khẩu - - - - Logout - + + + + + + + Nguyễn Quỳnh + Xu 10 + + + + navigation.navigate('SettingAccount')} style={styles.headerAccountHomeCtSetting}> + + + + + + ) +} + +const ListContentAccount = () => { + const navigation = useNavigation(); + return ( + + + + navigation.navigate('AccountOrderList')} style={styles.boxListItemAccBt}> + + + Đơn hàng của tôi + + + Xem tất cả + + + + + + navigation.navigate('AccountProductBought')} style={styles.boxListItemAccBt}> + + + Sản phẩm bạn đã mua + + + + + + + + + + navigation.navigate('AccountProductViewHistory')} style={styles.boxListItemAccBt}> + + + Sản phẩm bạn đã xem + + + + + + + + navigation.navigate('AccountProductFavorite')} style={styles.boxListItemAccBt}> + + + Sản phẩm yêu thích + + + + + + + + navigation.navigate('AccountProductSave')} style={styles.boxListItemAccBt}> + + + Sản phẩm mua sau + + + + + + + + navigation.navigate('AccountCoin')} style={styles.boxListItemAccBt}> + + + Quản lý Xu của tôi + + + + + + + + + + navigation.navigate('CustomerInfo')} style={styles.boxListItemAccBt}> + + + Tài khoản + + + + + + + + + + + Trung tậm trợ giúp + + + + + + ) @@ -214,109 +259,6 @@ function formatCurrency(price: string | number) { return priceConvert.substring(0, len - 3); } -const ShowProductItemSave = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number, privateStyle: object }) => { - - const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity, privateStyle } = props; - const discount = Math.ceil(100 - (price / marketPrice * 100)); - - - return ( - - - - - - {productSKU} - -{discount}% - - - - - - {productName} - - {summary} - {formatCurrency(price)} đ - {formatCurrency(marketPrice)} đ - - ); -} - -const productData = [ - { - id: 1, - productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng', - productSKU: 'TESTSKU', - productImage: { - small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', - medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', - large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', - original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', - }, - price: 30000000, - marketPrice: 50000000, - quantity: 1, - summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' - }, - { - id: 2, - productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng', - productSKU: 'TESTSKU', - productImage: { - small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', - medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', - large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', - original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', - }, - price: 25000000, - marketPrice: 50000000, - quantity: 0, - summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' - }, -] - -const ProductSave = () => { - const itemProductStyle = { - width: '100%', - borderBottomWidth: 1, - borderBottomColor: '#e8e8e8', - position: 'relative', - } - return ( - - Sản phẩm mua sau - - { - productData.map(item => ) - } - - - ) -} - -const ProductFavorite = () => { - const itemProductStyle = { - width: '100%', - borderBottomWidth: 1, - borderBottomColor: '#e8e8e8', - position: 'relative', - } - return ( - - Sản phẩm Bạn đã thích - - { - productData.map(item => ) - } - - - ) -} - const ChangePassword = () => { return ( @@ -350,154 +292,6 @@ const ChangePassword = () => { ) } -const ListOrder = () => { - return ( - - Danh Sách đơn hàng - - - Số đơn hàng - Giá trị - Thời gian - Thông tin - - - - #123456 - - Xem chi tiết - - - 100.000.000 đ - 13-03-2021 - Đã hoàn thành - - - - #123457 - - Xem chi tiết - - - 100.000.000 đ - 13-03-2021 - Hủy bỏ - - - - ) -} - -const OrderDetail = () => { - return ( - - Đơn hàng số #123456 - Thời gian đặt mua: 13-3-2021, 5:00 pm - - Thông tin người mua - - Họ và tên: - Hurasoft Test - - - Email: - test@mail.com - - - Số điện thoại: - 0912345678 - - - Địa chỉ: - 30 Nguyên Hồng - Láng Hạ - Đống Đa - HN - - - - - - - STT - - - 1 - - - - - Ảnh - - - - - - - - - - Tên Sản phẩm - - - - Bàn Game K-Deck ( Khung Kim Loại , Mặt Gỗ Tự Nhiên Phủ PU Bóng ) - - - - - - Giá bán - - - 30.000.000 đ - - - - - Số lượng - - - 1 - - - - - Tổng - - - 30.000.000 đ - - - - - - - Giá trị - - - 30.000.000 đ - - - - - Phí vận chuyển - - - 30.000 đ - - - - - Tổng giá trị đơn hàng - - - 30.030.000 đ - - - - - - ) -} - const winWidth = Dimensions.get('window').width; //full width const winHeight = Dimensions.get('window').height; //full height const winWidthP10 = winWidth - 20; @@ -511,30 +305,110 @@ const styles = StyleSheet.create({ justifyContent: 'center', backgroundColor: '#fff', }, - brecrumb: { - display: 'flex', + headerAccountHome: { width: winWidth, - paddingLeft: 10, - paddingRight: 10, + position: 'relative', + }, + headerAccountHomeImg: { + width: '100%', + height: 122, + }, + headerAccountHomeCt: { + width: '100%', + position: 'absolute', + left: 0, + bottom: 18, + flexDirection: 'row', + justifyContent: 'space-between', + backgroundColor: 'rgba(0,0,0,0)', + paddingHorizontal: 10, + }, + headerAccountHomeCtLeft: { flexDirection: 'row', - height: 18, alignItems: 'center', - marginTop: 10, + backgroundColor: 'rgba(0,0,0,0)', + }, + headerAccountHomeCtCusImg: { + width: 56, + height: 56, + marginRight: 10, + borderRadius: 28, + overflow: 'hidden' + }, + headerAccountHomeCtCusInfo: { + backgroundColor: 'rgba(0,0,0,0)', + }, + headerAccountHomeCtCusName: { + fontSize: 16, + fontWeight: '700', + color: '#fff', + marginBottom: 5, + }, + headerAccountHomeCtCusXu: { + fontSize: 13, + fontWeight: '300', + color: '#fff' + }, + headerAccountHomeCtRight: { + backgroundColor: 'rgba(0,0,0,0)', + }, + headerAccountHomeCtSetting: { + width: 30, + height: 30, + borderRadius: 15, + backgroundColor: '#fff', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + headerAccountHomeCtSettingIcon: { + fontSize: 18, + }, + boxListItemAcc: { + width: winWidth, + backgroundColor: '#f2f2f2', + }, + boxListItemAccList: { + width: '100%', + backgroundColor: '#fff', marginBottom: 10, }, - brecrumbText: { - fontSize: 13, - color: '#222', + borderBot: { + borderBottomColor: '#e1e1e1', + borderBottomWidth: 1, }, - brecrumbTextLast: { - fontSize: 13, - color: '#b7b7b7', + boxListItemAccItem: { + width: '100%', + paddingHorizontal: 10, }, - brecrumbIcon: { - fontSize: 13, - color: '#222', - marginLeft: 6, - marginRight: 6 + boxListItemAccBt: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + height: 48, + }, + boxListItemAccItemLeft: { + flexDirection: 'row', + alignItems: 'center', + }, + boxListItemAccItemImg: { + width: 20, + marginRight: 10, + }, + boxListItemAccItemLeftText: { + fontWeight: '500', + }, + boxListItemAccItemRight: { + flexDirection: 'row', + alignItems: 'center', + }, + boxListItemAccItemRightText: { + marginRight: 10, + }, + boxListItemAccItemIcon: { + fontSize: 24, + color: '#777' }, accountBox: { marginBottom: 20, @@ -574,47 +448,6 @@ const styles = StyleSheet.create({ textTransform: 'uppercase', fontWeight: 'bold' }, - accountBoxSelec: { - marginBottom: 20, - }, - accountBoxSelecBox: { - borderRadius: 3, - borderWidth: 1, - borderColor: '#999', - paddingHorizontal: 10, - height: 40, - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - accountBoxSelecBoxText: { - textTransform: 'uppercase', - fontWeight: 'bold', - }, - accountBoxSelecBoxIcon: {}, - accountBoxSelecList: { - width: '100%', - borderRadius: 3, - borderWidth: 1, - borderColor: '#999', - display: 'none', - }, - active: { - display: 'flex', - }, - accountNameTab: { - padding: 10, - flexDirection: 'row', - alignItems: 'center', - }, - accountNameTabIcon: { - fontSize: 24, - color: '#7b7b7b', - marginRight: 8, - }, - accountNameTabText: {}, - accountBoxContent: {}, - accountBoxTextHome: {}, custommerInfo: { }, custommerInfoItemHeader: { @@ -700,287 +533,4 @@ const styles = StyleSheet.create({ boxCustommerInfoChangeSubmitText: { color: '#fff' }, - boxProductSave: {}, - boxProductSaveTitle: { - fontSize: 16, - fontWeight: 'bold', - marginBottom: 15, - }, - listProductSave: {}, - ListOrder: {}, - ListOrderList: { - width: '100%', - borderColor: '#e1e1e1', - borderWidth: 1, - borderRadius: 5, - padding: 5 - }, - ListOrderListHeader: { - flexDirection: 'row', - alignItems: 'center', - borderBottomColor: '#e1e1e1', - borderBottomWidth: 1, - height: 40, - }, - ListOrderListHeaderSt: { - fontWeight: 'bold', - width: winWidthP10 - 260, - fontSize: 12, - }, - ListOrderListHeaderNd: { - fontWeight: 'bold', - width: 90, - fontSize: 12, - }, - ListOrderListHeaderRd: { - fontWeight: 'bold', - width: 75, - fontSize: 12, - }, - ListOrderListHeaderInfo: { - fontWeight: 'bold', - width: 90, - fontSize: 12, - }, - ListOrderItem: { - flexDirection: 'row', - alignItems: 'center', - borderBottomColor: '#e1e1e1', - borderBottomWidth: 1, - paddingVertical: 10, - }, - ListOrderItemLast: { - borderBottomWidth: 0, - }, - ListOrderItemSt: { - width: winWidthP10 - 260, - flexDirection: 'row', - flexWrap: 'wrap', - alignItems: 'center', - }, - ListOrderItemStText: { - fontSize: 12, - marginRight: 6, - }, - ListOrderItemStButton: {}, - ListOrderItemStButtonText: { - fontSize: 12, - color: '#f78d1c' - }, - ListOrderItemNd: { - width: 90, - fontSize: 12, - }, - ListOrderItemRd: { - width: 75, - fontSize: 12, - }, - ListOrderItemInfo: { - width: 90, - fontSize: 12, - }, - boxOrderDetail: {}, - boxOrderDetailNum: { - width: '100%', - marginBottom: 15, - fontSize: 21, - fontWeight: 'bold', - textAlign: 'center' - }, - boxOrderDetailTime: { - marginBottom: 15, - }, - boxOrderDetailInfo: { - borderWidth: 1, - borderRadius: 5, - borderColor: '#e1e1e1', - marginBottom: 20, - padding: 8, - }, - boxOrderDetailInfoTitle: { - fontWeight: 'bold', - color: '#f60', - marginBottom: 10, - }, - boxOrderDetailInfoItem: { - flexDirection: 'row', - alignItems: 'center', - marginBottom: 10, - }, - boxOrderDetailInfoItemTextSt: { - width: 100, - }, - boxOrderDetailInfoItemTextNd: { - width: winWidthP10 - 120, - }, - boxOrderDetailList: { - borderWidth: 1, - borderRadius: 5, - borderColor: '#e1e1e1', - width: '100%', - flexDirection: 'column', - }, - bold: { - fontWeight: 'bold', - }, - boxOrderDetailListItem: { - width: '100%', - flexDirection: 'column', - }, - boxOrderDetailListItemLine: { - flexDirection: 'row', - borderBottomWidth: 1, - borderBottomColor: '#e1e1e1', - width: '100%', - }, - boxOrderDetailListItemLineTotal: { - width: '100%', - flexDirection: 'row', - borderBottomWidth: 1, - borderBottomColor: '#e1e1e1', - alignItems: 'center', - }, - boxOrderDetailListItemLeft: { - width: 100, - padding: 10, - }, - boxOrderDetailListItemText: {}, - boxOrderDetailListItemRight: { - width: winWidthP10 - 120, - borderLeftColor: '#e1e1e1', - borderLeftWidth: 1, - padding: 10, - }, - boxOrderDetailListItemImage: { - width: 75, - height: 75, - position: 'relative', - }, - boxOrderDetailListItemImageCt: { - width: '100%', - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0, - }, - boxOrderTotalItemLeft: { - width: '50%', - flexDirection: 'row', - justifyContent: 'flex-end', - padding: 10, - }, - boxOrderTotalItemRight: { - width: '50%', - flexDirection: 'row', - justifyContent: 'flex-start', - borderLeftColor: '#e1e1e1', - borderLeftWidth: 1, - padding: 10, - }, - boxOrderDetailTotal: { - width: '100%', - flexDirection: 'column', - }, - itemProduct: { - padding: 10, - }, - pBloxImgProduct: { - position: 'relative', - marginBottom: 10, - }, - pSkuProduct: { - position: 'absolute', - fontSize: 12, - color: '#e00', - top: 0, - left: 0, - lineHeight: 36, - zIndex: 10, - }, - pDiscountProduct: { - width: 36, - height: 36, - backgroundColor: '#e00', - position: 'absolute', - top: 0, - right: 0, - color: '#fff', - textAlign: 'center', - lineHeight: 36, - borderRadius: 18, - overflow: 'hidden', - fontSize: 12, - zIndex: 10, - }, - pBloxImgProductBao: { - position: 'relative', - paddingTop: '100%', - overflow: 'hidden', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - flexDirection: 'row', - }, - pImgProduct: { - position: 'absolute', - top: 0, - left: '5%', - right: 0, - bottom: 0, - maxHeight: 500, - width: '90%', - }, - pNameProduct: { - height: 40, - lineHeight: 20, - overflow: 'hidden', - fontSize: 14, - color: '#111', - marginBottom: 5, - }, - priceProduct: { - fontSize: 16, - fontWeight: 'bold', - color: '#f10000', - marginBottom: 5, - }, - oldPriceProduct: { - fontSize: 14, - color: '#b7b7b7', - marginBottom: 5, - height: 24, - lineHeight: 24, - overflow: 'hidden', - textDecorationLine: 'line-through', - }, - pBottonProduct: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - flexDirection: 'row', - marginTop: 5, - }, - pStatusProduct: { - fontSize: 13, - color: '#00a706', - }, - pCartProduct: { - fontSize: 13, - color: '#333', - }, - pStatusProductIcon: { - fontSize: 15, - }, - pCartProductIcon: { - fontSize: 15 - }, - pProductDelete: {}, - pProductDeleteIcon: { - fontSize: 18, - }, - pSummaryProduct: { - marginBottom: 10, - lineHeight: 20, - }, }) \ No newline at end of file diff --git a/screens/AccountIndex.tsx b/screens/AccountIndex.tsx new file mode 100644 index 0000000..2d9e244 --- /dev/null +++ b/screens/AccountIndex.tsx @@ -0,0 +1,259 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View } from '../components/Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import { useNavigation } from '@react-navigation/native'; + +export default function AccountIndex() { + const navigation = useNavigation(); + return ( + + + + + + + + ); +} + +const HeaderAccountIndex = () => { + const navigation = useNavigation(); + return ( + + + Chào mừng đến với Nagakawa, Đăng nhập ngay! + + navigation.navigate('Login')} style={styles.headerAccountIndexLogin}> + Đăng nhập + + navigation.navigate('Register')} style={styles.headerAccountIndexRegis}> + Đăng ký + + + + ) +} + +const ListContentAccount = () => { + return ( + + + + + + + Đơn hàng của tôi + + + Xem tất cả + + + + + + + + + Sản phẩm bạn đã mua + + + + + + + + + + + + + Sản phẩm bạn đã xem + + + Xem tất cả + + + + + + + + + Sản phẩm yêu thích + + + + + + + + + + + Sản phẩm mua sau + + + + + + + + + + + Quản lý Xu của tôi + + + + + + + + + + + + + Tài khoản + + + + + + + + + + + Trung tậm trợ giúp + + + + + + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + headerAccountIndex: { + width: winWidth, + position: 'relative', + }, + headerAccountIndexImg: { + width: '100%', + height: 122, + }, + headerAccountIndexTitle: { + width: '100%', + textAlign: 'center', + fontSize: 12, + color: '#fff', + position: 'absolute', + top: 45, + left: 0, + }, + headerAccountIndexBt: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + position: 'absolute', + left: 0, + bottom: 16, + backgroundColor: 'rgba(0,0,0,0)', + }, + headerAccountIndexLogin: { + width: 84, + height: 32, + backgroundColor: '#fff', + borderColor: '#fff', + borderWidth: 1, + borderRadius: 3, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + marginRight: 5, + }, + headerAccountIndexLoginText: { + fontWeight: '700', + color: '#D8262F' + }, + headerAccountIndexRegis: { + width: 84, + height: 32, + backgroundColor: 'rgba(0,0,0,0)', + borderColor: '#fff', + borderWidth: 1, + borderRadius: 3, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + marginLeft: 5, + }, + headerAccountIndexRegisText: { + fontWeight: '700', + color: '#fff' + }, + boxListItemAcc: { + width: winWidth, + backgroundColor: '#f2f2f2', + }, + boxListItemAccList: { + width: '100%', + backgroundColor: '#fff', + marginBottom: 10, + }, + borderBot: { + borderBottomColor: '#e1e1e1', + borderBottomWidth: 1, + }, + boxListItemAccItem: { + width: '100%', + paddingHorizontal: 10, + }, + boxListItemAccBt: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + height: 48, + }, + boxListItemAccItemLeft: { + flexDirection: 'row', + alignItems: 'center', + }, + boxListItemAccItemImg: { + width: 20, + marginRight: 10, + }, + boxListItemAccItemLeftText: { + fontWeight: '500', + }, + boxListItemAccItemRight: { + flexDirection: 'row', + alignItems: 'center', + }, + boxListItemAccItemRightText: { + marginRight: 10, + }, + boxListItemAccItemIcon: { + fontSize: 24, + color: '#777' + }, +}); diff --git a/screens/AccountOrderDetail.tsx b/screens/AccountOrderDetail.tsx new file mode 100644 index 0000000..e28ad35 --- /dev/null +++ b/screens/AccountOrderDetail.tsx @@ -0,0 +1,316 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { useNavigation } from '@react-navigation/native'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; + +export default function AccountOrderDetail() { + return ( + + + + + + + + + + + ) +} + +function formatCurrency(price: string | number) { + let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + let len = priceConvert.length; + return priceConvert.substring(0, len - 3); +} + +const HeaderAccountOrderList = () => { + const navigation = useNavigation(); + return ( + + navigation.goBack()} style={styles.headerAOLBack}> + + + Đơn hàng 88899999 + + + + + ) +} + +const AccountOrderDetailContent = () => { + return ( + + + Thời gian đặt mua: + 06-05-2021, 4:01 pm + + + Tình trạng: + Giao hàng thành công + + + + 1 + Thông tin khách hàng + + + + Họ tên: + Nguyễn Quỳnh + + + Email: + Quynhqt@gmail.com + + + Số điện thoại: + 0932108199 + + + Địa chỉ: + 100 Láng Hạ + + + + + + 1 + Thông tin đơn hàng + + + + + + ĐIỀU HÒA 1 CHIỀU 9000 BTU/H NAGAKAWA NS-C09R1M05 - MADE IN MALAYSIA - BẢO HÀNH 2 NĂM() + 15.000.000đ + Số lượng: 1 + + + + + + ) +} + +const AccountOrderDetailBottom = () => { + return ( + + + Giá trị + 10.500.000đ + + + Phí vận chuyển + 0đ + + + Tổng giá trị đơn hàng + 10.500.000đ + + + Đặt lại + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + headerAOL: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + headerAOLBack: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLBackIcon: { + fontSize: 24, + }, + headerAOLSearch: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLSearchIcon: { + fontSize: 24, + }, + headerAOLTitle: { + width: winWidth - 100, + textAlign: 'center', + fontWeight: '700', + }, + headerAOLChat: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + }, + headerAOLChatIcon: { + fontSize: 24, + }, + GreenColor: { + color: '#008445', + }, + OrangeColor: { + color: '#FE9923', + }, + RedColor: { + color: '#D8262F', + }, + boxAccOrDt: { + width: winWidth, + padding: 10, + }, + boxAccOrDtCtTop: { + flexDirection: 'row', + alignItems: 'center', + flexWrap: 'wrap', + marginBottom: 10, + }, + boxAccOrDtCtTopTextLeft: { + fontWeight: '700', + }, + boxAccOrDtCtTopTextRight: {}, + boxAccOrDtCus: { + marginBottom: 10, + marginTop: 10, + }, + boxAccOrDtTitle: { + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 5, + marginBottom: 10, + borderBottomColor: '#ababab', + borderBottomWidth: 1, + }, + boxAccOrDtTitleNum: { + width: 20, + height: 20, + fontSize: 16, + fontWeight: '700', + color: '#008445', + textAlign: 'center', + lineHeight: 20, + borderColor: '#008445', + borderWidth: 1, + marginRight: 5, + borderRadius: 10, + }, + boxAccOrDtTitleText: { + fontSize: 16, + fontWeight: '700', + color: '#008445', + textTransform: 'uppercase', + }, + boxAccOrDtCusInfo: {}, + boxAccOrDtCusInfoItem: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + boxAccOrDtCusInfoItemLeft: { + width: 100, + fontWeight: '300', + }, + boxAccOrDtCusInfoItemRight: { + width: winWidth - 120, + fontWeight: '300', + }, + boxAccOrDtList: {}, + boxAccOrDtListItem: { + width: '100%', + marginBottom: 10, + flexDirection: 'row', + }, + boxAccOrDtListItemImg: { + width: 48, + height: 48, + marginRight: 10, + }, + boxAccOrDtListItemInfo: { + width: winWidth - 78, + }, + boxAccOrDtListItemName: { + fontWeight: '700', + fontSize: 16, + marginBottom: 10, + }, + boxAccOrDtListItemPrice: { + fontSize: 18, + fontWeight: '700', + color: '#D8262F', + marginBottom: 10, + }, + boxAccOrDtListItemQuan: {}, + accDtBt: { + width: winWidth, + padding: 10, + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.20, + shadowRadius: 1.41, + elevation: 2, + }, + accDtBtItem: { + marginBottom: 5, + flexDirection: 'row', + justifyContent: 'flex-end', + alignItems: 'center', + }, + accDtBtItemTextLeft: { + fontSize: 12, + marginRight: 10, + }, + accDtBtItemTextRight: { + fontWeight: '700', + width: 150, + }, + accDtBtButton: { + width: '100%', + height: 40, + backgroundColor: '#D8262F', + borderRadius: 5, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + accDtBtButtonText: { + textTransform: 'uppercase', + fontWeight: '700', + color: '#fff' + }, +}) \ No newline at end of file diff --git a/screens/AccountOrderList.tsx b/screens/AccountOrderList.tsx new file mode 100644 index 0000000..22a9011 --- /dev/null +++ b/screens/AccountOrderList.tsx @@ -0,0 +1,255 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { useNavigation } from '@react-navigation/native'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; + +export default function AccountOrderList() { + return ( + + + + + + + + ) +} + +function formatCurrency(price: string | number) { + let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + let len = priceConvert.length; + return priceConvert.substring(0, len - 3); +} + +const HeaderAccountOrderList = () => { + const navigation = useNavigation(); + return ( + + navigation.goBack()} style={styles.headerAOLBack}> + + + + + + Đơn hàng của tôi + + + + + ) +} + +const ListOrder = () => { + const navigation = useNavigation(); + return ( + + + + + Mã đơn hàng + 09888888 + + + Ngày mua + 15/5/2021 + + + Tổng tiền + 5.000.000đ + + + Trạng thái + Giao hàng thành công + + + Đặt lại + + + navigation.navigate('AccountOrderDetail')} style={styles.ListOrderItemBtDetail}> + + + + + + + Mã đơn hàng + 09888888 + + + Ngày mua + 15/5/2021 + + + Tổng tiền + 5.000.000đ + + + Trạng thái + Giao hàng thành công + + + Đặt lại + + + navigation.navigate('AccountOrderDetail')} style={styles.ListOrderItemBtDetail}> + + + + + + + Mã đơn hàng + 09888888 + + + Ngày mua + 15/5/2021 + + + Tổng tiền + 5.000.000đ + + + Trạng thái + Đã hủy + + + Đặt lại + + + navigation.navigate('AccountOrderDetail')} style={styles.ListOrderItemBtDetail}> + + + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + headerAOL: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + headerAOLBack: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLBackIcon: { + fontSize: 24, + }, + headerAOLSearch: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLSearchIcon: { + fontSize: 24, + }, + headerAOLTitle: { + width: winWidth - 140, + textAlign: 'center', + fontWeight: '700', + }, + headerAOLChat: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + }, + headerAOLChatIcon: { + fontSize: 24, + }, + ListOrder: { + width: winWidth, + backgroundColor: '#f2f2f2', + }, + ListOrderItem: { + width: winWidth, + padding: 10, + marginTop: 10, + position: 'relative', + flexDirection: 'row', + alignItems: 'center', + }, + ListOrderItemLine: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + ListOrderItemTextLeft: { + width: 100, + fontSize: 14, + fontWeight: '300', + color: '#777777', + }, + ListOrderItemLineTextRight: { + width: winWidth - 170, + }, + GreenColor: { + color: '#008445', + }, + OrangeColor: { + color: '#FE9923', + }, + RedColor: { + color: '#D8262F', + }, + ListOrderItemBt: { + width: 104, + height: 40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + borderColor: '#D8262F', + borderWidth: 1, + borderRadius: 5, + }, + ListOrderItemBtText: { + fontWeight: '700', + textTransform: 'uppercase', + color: '#D8262F', + }, + ListOrderItemLeft: { + width: winWidth - 70, + }, + ListOrderItemBtDetail: { + width: 50, + height: 150, + flexDirection: 'row', + justifyContent: 'flex-end', + alignItems: 'center', + }, + ListOrderItemBtDetailIcon: { + fontSize: 26, + }, +}) \ No newline at end of file diff --git a/screens/AccountProductBought.tsx b/screens/AccountProductBought.tsx new file mode 100644 index 0000000..9090ab7 --- /dev/null +++ b/screens/AccountProductBought.tsx @@ -0,0 +1,257 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { useNavigation } from '@react-navigation/native'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; + +export default function AccountProductBought() { + return ( + + + + + + + + ) +} + +function formatCurrency(price: string | number) { + let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + let len = priceConvert.length; + return priceConvert.substring(0, len - 3); +} + +const HeaderAccountOrderList = () => { + const navigation = useNavigation(); + return ( + + navigation.goBack()} style={styles.headerAOLBack}> + + + Sản phẩm bạn đã mua + + ) +} + +const ShowProductItemBought = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number }) => { + + const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity } = props; + const discount = Math.ceil(100 - (price / marketPrice * 100)); + + + return ( + + + + + + + + + + {productName} + + {formatCurrency(price)} đ + + + + Viết nhận xét + + + ); +} + +const productData = [ + { + id: 1, + productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng', + productSKU: 'TESTSKU', + productImage: { + small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + }, + price: 30000000, + marketPrice: 50000000, + quantity: 1, + summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' + }, + { + id: 2, + productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng', + productSKU: 'TESTSKU', + productImage: { + small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + }, + price: 25000000, + marketPrice: 50000000, + quantity: 0, + summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' + }, +] + +const ProductBought = () => { + return ( + + + { + productData.map(item => ) + } + + + ) +} + + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + headerAOL: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + headerAOLBack: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLBackIcon: { + fontSize: 24, + }, + headerAOLSearch: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLSearchIcon: { + fontSize: 24, + }, + headerAOLTitle: { + width: winWidth - 60, + textAlign: 'center', + fontWeight: '700', + }, + headerAOLChat: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + }, + headerAOLChatIcon: { + fontSize: 24, + }, + GreenColor: { + color: '#008445', + }, + OrangeColor: { + color: '#FE9923', + }, + RedColor: { + color: '#D8262F', + }, + boxAccOrDt: { + width: winWidth, + padding: 10, + }, + boxProductSave: { + backgroundColor: '#f2f2f2' + }, + listProductSave: { + backgroundColor: '#f2f2f2' + }, + itemProduct: { + padding: 10, + marginBottom: 10, + }, + itemProducCt: { + width: '100%', + flexDirection: 'row', + marginBottom: 10, + }, + pBloxImgProduct: { + position: 'relative', + width: 96, + height: 96, + marginRight: 10, + }, + pBloxImgProductBao: { + position: 'relative', + paddingTop: '100%', + overflow: 'hidden', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'row', + }, + pImgProduct: { + position: 'absolute', + top: 0, + left: '5%', + right: 0, + bottom: 0, + maxHeight: 500, + width: '90%', + }, + pBloxImgProductInfo: { + width: winWidth - 136, + }, + pNameProduct: { + fontSize: 16, + color: '#111', + marginBottom: 10, + fontWeight: '700', + textTransform: 'uppercase' + }, + priceProduct: { + fontSize: 18, + fontWeight: 'bold', + color: '#f10000', + marginBottom: 5, + }, + proReview: { + width: '100%', + height: 40, + backgroundColor: '#D8262F', + borderRadius: 5, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + proReviewText: { + textTransform: 'uppercase', + fontWeight: '700', + color: '#fff' + }, +}) \ No newline at end of file diff --git a/screens/AccountProductFavorite.tsx b/screens/AccountProductFavorite.tsx new file mode 100644 index 0000000..f524607 --- /dev/null +++ b/screens/AccountProductFavorite.tsx @@ -0,0 +1,308 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { useNavigation } from '@react-navigation/native'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; + +export default function AccountProductFavorite() { + return ( + + + + + + + + ) +} + +function formatCurrency(price: string | number) { + let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + let len = priceConvert.length; + return priceConvert.substring(0, len - 3); +} + +const HeaderAccountOrderList = () => { + const navigation = useNavigation(); + return ( + + navigation.goBack()} style={styles.headerAOLBack}> + + + Sản phẩm yêu thích + + ) +} + +const ShowProductItemBought = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number }) => { + + const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity } = props; + const discount = Math.ceil(100 - (price / marketPrice * 100)); + + + return ( + + + + + + + + + + + + + {productName} + + + {formatCurrency(price)} đ + + + + + + + + + + + + + ); +} + +const productData = [ + { + id: 1, + productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng', + productSKU: 'TESTSKU', + productImage: { + small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + }, + price: 30000000, + marketPrice: 50000000, + quantity: 1, + summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' + }, + { + id: 2, + productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng', + productSKU: 'TESTSKU', + productImage: { + small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + }, + price: 25000000, + marketPrice: 50000000, + quantity: 0, + summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' + }, +] + +const ProductBought = () => { + return ( + + + { + productData.map(item => ) + } + + + ) +} + + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + headerAOL: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + headerAOLBack: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLBackIcon: { + fontSize: 24, + }, + headerAOLSearch: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLSearchIcon: { + fontSize: 24, + }, + headerAOLTitle: { + width: winWidth - 60, + textAlign: 'center', + fontWeight: '700', + }, + headerAOLChat: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + }, + headerAOLChatIcon: { + fontSize: 24, + }, + GreenColor: { + color: '#008445', + }, + OrangeColor: { + color: '#FE9923', + }, + RedColor: { + color: '#D8262F', + }, + boxAccOrDt: { + width: winWidth, + padding: 10, + }, + boxProductSave: { + backgroundColor: '#f2f2f2' + }, + listProductSave: { + backgroundColor: '#f2f2f2' + }, + itemProduct: { + padding: 10, + marginBottom: 10, + }, + itemProducCt: { + width: '100%', + flexDirection: 'row', + marginBottom: 10, + }, + pBloxImgProduct: { + width: 96, + marginRight: 10, + flexDirection: 'column', + alignItems: 'center', + }, + pBloxImgProductBao: { + width: 96, + position: 'relative', + paddingTop: 96, + overflow: 'hidden', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'row', + }, + pImgProduct: { + position: 'absolute', + top: 0, + left: '5%', + right: 0, + bottom: 0, + maxHeight: 500, + width: '90%', + }, + pBloxImgProductInfo: { + width: winWidth - 136, + }, + pNameProduct: { + fontSize: 16, + color: '#111', + marginBottom: 10, + fontWeight: '700', + textTransform: 'uppercase' + }, + priceProduct: { + fontSize: 18, + fontWeight: 'bold', + color: '#f10000', + marginBottom: 5, + }, + proReview: { + width: '100%', + height: 40, + backgroundColor: '#D8262F', + borderRadius: 5, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + proReviewText: { + textTransform: 'uppercase', + fontWeight: '700', + color: '#fff' + }, + pNameProductFavo: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + pNameProductFavoBt: { + flexDirection: 'row', + alignItems: 'center' + }, + pNameProductFavoHeart: { + marginRight: 10, + }, + pNameProductFavoHeartIcon: { + fontSize: 24, + color: '#D8262F', + }, + pNameProductFavoCart: { + width: 32, + height: 32, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#D8262F', + borderRadius: 3, + }, + pNameProductFavoCartIcon: { + fontSize: 18, + color: '#fff', + }, + pBloxImgProductDelete: { + marginTop: 10, + padding: 5, + borderRadius: 3, + borderWidth: 1, + borderColor: '#ababab', + }, + pBloxImgProductDeleteIcon: { + fontSize: 16, + color: '#ababab', + }, +}) \ No newline at end of file diff --git a/screens/AccountProductSave.tsx b/screens/AccountProductSave.tsx new file mode 100644 index 0000000..d5013bd --- /dev/null +++ b/screens/AccountProductSave.tsx @@ -0,0 +1,305 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { useNavigation } from '@react-navigation/native'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; + +export default function AccountProductSave() { + return ( + + + + + + + + ) +} + +function formatCurrency(price: string | number) { + let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + let len = priceConvert.length; + return priceConvert.substring(0, len - 3); +} + +const HeaderAccountOrderList = () => { + const navigation = useNavigation(); + return ( + + navigation.goBack()} style={styles.headerAOLBack}> + + + Sản phẩm mua sau + + ) +} + +const ShowProductItemBought = (props: { id: number, productName: string, productSKU: string, summary: string, productImage: { small: string, medium: string, large: string, original: string }, price: number, marketPrice: number, quantity: number }) => { + + const { id, productName, productSKU, summary, productImage, price, marketPrice, quantity } = props; + const discount = Math.ceil(100 - (price / marketPrice * 100)); + + + return ( + + + + + + + + + + + + + {productName} + + + {formatCurrency(price)} đ + + + + + + + + + + ); +} + +const productData = [ + { + id: 1, + productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng', + productSKU: 'TESTSKU', + productImage: { + small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + }, + price: 30000000, + marketPrice: 50000000, + quantity: 1, + summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' + }, + { + id: 2, + productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng', + productSKU: 'TESTSKU', + productImage: { + small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + }, + price: 25000000, + marketPrice: 50000000, + quantity: 0, + summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' + }, +] + +const ProductBought = () => { + return ( + + + { + productData.map(item => ) + } + + + ) +} + + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + headerAOL: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + headerAOLBack: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLBackIcon: { + fontSize: 24, + }, + headerAOLSearch: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLSearchIcon: { + fontSize: 24, + }, + headerAOLTitle: { + width: winWidth - 60, + textAlign: 'center', + fontWeight: '700', + }, + headerAOLChat: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + }, + headerAOLChatIcon: { + fontSize: 24, + }, + GreenColor: { + color: '#008445', + }, + OrangeColor: { + color: '#FE9923', + }, + RedColor: { + color: '#D8262F', + }, + boxAccOrDt: { + width: winWidth, + padding: 10, + }, + boxProductSave: { + backgroundColor: '#f2f2f2' + }, + listProductSave: { + backgroundColor: '#f2f2f2' + }, + itemProduct: { + padding: 10, + marginBottom: 10, + }, + itemProducCt: { + width: '100%', + flexDirection: 'row', + marginBottom: 10, + }, + pBloxImgProduct: { + width: 96, + marginRight: 10, + flexDirection: 'column', + alignItems: 'center', + }, + pBloxImgProductBao: { + width: 96, + position: 'relative', + paddingTop: 96, + overflow: 'hidden', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'row', + }, + pImgProduct: { + position: 'absolute', + top: 0, + left: '5%', + right: 0, + bottom: 0, + maxHeight: 500, + width: '90%', + }, + pBloxImgProductInfo: { + width: winWidth - 136, + }, + pNameProduct: { + fontSize: 16, + color: '#111', + marginBottom: 10, + fontWeight: '700', + textTransform: 'uppercase' + }, + priceProduct: { + fontSize: 18, + fontWeight: 'bold', + color: '#f10000', + marginBottom: 5, + }, + proReview: { + width: '100%', + height: 40, + backgroundColor: '#D8262F', + borderRadius: 5, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + proReviewText: { + textTransform: 'uppercase', + fontWeight: '700', + color: '#fff' + }, + pNameProductFavo: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + pNameProductFavoBt: { + flexDirection: 'row', + alignItems: 'center' + }, + pNameProductFavoHeart: { + marginRight: 10, + }, + pNameProductFavoHeartIcon: { + fontSize: 24, + color: '#D8262F', + }, + pNameProductFavoCart: { + width: 32, + height: 32, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#D8262F', + borderRadius: 3, + }, + pNameProductFavoCartIcon: { + fontSize: 18, + color: '#fff', + }, + pBloxImgProductDelete: { + marginTop: 10, + padding: 5, + borderRadius: 3, + borderWidth: 1, + borderColor: '#ababab', + }, + pBloxImgProductDeleteIcon: { + fontSize: 16, + color: '#ababab', + }, +}) \ No newline at end of file diff --git a/screens/AccountProductViewHistory.tsx b/screens/AccountProductViewHistory.tsx new file mode 100644 index 0000000..478bfee --- /dev/null +++ b/screens/AccountProductViewHistory.tsx @@ -0,0 +1,346 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { useNavigation } from '@react-navigation/native'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; + +export default function AccountProductViewHistory() { + return ( + + + + + + + + ) +} + +function formatCurrency(price: string | number) { + let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString(); + let len = priceConvert.length; + return priceConvert.substring(0, len - 3); +} + +const HeaderAccountOrderList = () => { + const navigation = useNavigation(); + return ( + + navigation.goBack()} style={styles.headerAOLBack}> + + + Sản phẩm đã xem + + ) +} + +const ProductCategory = () => { + const navigation = useNavigation(); + return ( + + + + + + + + + + navigation.navigate('ProductDetail')}> + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + ) +} + +const productData = [ + { + id: 1, + productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng', + productSKU: 'TESTSKU', + productImage: { + small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + }, + price: 30000000, + marketPrice: 50000000, + quantity: 1, + summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' + }, + { + id: 2, + productName: 'Máy làm mát Nagakawa NFC452 (110W) - Hàng chính hãng', + productSKU: 'TESTSKU', + productImage: { + small: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + medium: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + large: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + original: 'https://shop.nagakawa.com.vn/media/product/137_nfc452.jpg', + }, + price: 25000000, + marketPrice: 50000000, + quantity: 0, + summary: 'CPU: Intel Core i5 1035G1\nRAM: 8GB\nỔ cứng: 256GB SSD\nMàn hình: 15.6 inch FHD\nHĐH: Win 10\nMàu: Đen' + }, +] + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + headerAOL: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + headerAOLBack: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLBackIcon: { + fontSize: 24, + }, + headerAOLSearch: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLSearchIcon: { + fontSize: 24, + }, + headerAOLTitle: { + width: winWidth - 60, + textAlign: 'center', + fontWeight: '700', + }, + headerAOLChat: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + }, + headerAOLChatIcon: { + fontSize: 24, + }, + GreenColor: { + color: '#008445', + }, + OrangeColor: { + color: '#FE9923', + }, + RedColor: { + color: '#D8262F', + }, + boxAccOrDt: { + width: winWidth, + padding: 10, + }, + pContainer: { + width: '100%', + padding: 10, + }, + pImgContent: { + width: '100%', + position: 'relative', + paddingTop: '100%', + marginBottom: 10, + }, + pNew: { + width: 24, + height: 18, + position: 'absolute', + zIndex: 6, + top: 0, + left: 0, + }, + pImg: { + width: '100%', + position: 'absolute', + zIndex: 5, + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + pTraGop: { + width: 68, + height: 16, + position: 'absolute', + zIndex: 6, + bottom: 0, + left: '50%', + transform: [{ translateX: -34 }], + }, + pInfo: { + width: '100%', + }, + pName: { + width: '100%', + fontSize: 14, + marginBottom: 10, + }, + pPrice: { + width: '100%', + fontSize: 18, + marginBottom: 10, + color: '#D8262F', + fontWeight: 'bold', + }, + pAllSale: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + pOldPrice: { + color: '#A1A1A1', + fontSize: 14, + textDecorationLine: 'line-through', + }, + pDiscount: { + paddingVertical: 5, + backgroundColor: '#D8262F', + width: 50, + textAlign: 'center', + color: '#fff', + borderRadius: 5, + overflow: 'hidden', + marginLeft: 5, + }, + pOffer: { + flexDirection: 'row', + alignItems: 'center', + }, + pOfferText: { + fontSize: 10, + color: '#A1A1A1', + }, + pOfferPrice: { + fontSize: 10, + color: '#D8262F', + }, + pItem: { + width: winWidth / 2 - 15, + marginBottom: 10, + borderRadius: 5, + overflow: 'hidden', + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.27, + shadowRadius: 4.65, + elevation: 6, + }, + boxProductCategoryList: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + flexWrap: 'wrap', + backgroundColor: '#f2f2f2', + }, +}) \ No newline at end of file diff --git a/screens/Cart.tsx b/screens/Cart.tsx index bb90ade..2b85322 100644 --- a/screens/Cart.tsx +++ b/screens/Cart.tsx @@ -10,6 +10,7 @@ import Swiper from 'react-native-swiper'; import { Asset } from 'expo-asset'; import { RadioButton, Checkbox } from 'react-native-paper'; import { Picker } from '@react-native-picker/picker'; +import { useNavigation } from '@react-navigation/core'; export default function Cart() { return ( @@ -22,308 +23,109 @@ export default function Cart() { } const CustommerInfo = () => { - const [selecTab, setSelecTab] = React.useState('cus') return ( - - setSelecTab('login')}> - Đăng nhập - Đã là thành viên của Nagakawa - - setSelecTab('cus')}> - Mua hàng nhanh - Dành cho khách hàng mới - - - - - - - - - - - - + + + + + - - ) } -const LoginCart = () => { +const HeaderCart = () => { return ( - - Thanh toán đơn hàng chỉ trong 1 bước với - - - - - - Facebook + + + Giỏ hàng + (0) + + + + - - - - - Google - - - - - - Facebook - - - - - Email đăng nhập - - - - Mật khẩu - - - - - Quên mật khẩu? Khôi phục mật khẩu - - Tại đây - - - - Đăng nhập - - - ) -} - -const CustommerInfoCart = () => { - const [selecSex, setSelecSex] = React.useState('male'); - const [checkedInfo, setCheckedInfo] = React.useState(false); - const [selectedProvince, setSelectedProvince] = React.useState(); - const [selectedDistrict, setSelectedDistrict] = React.useState(); - return ( - - Thông tin khách hàng - - Thông tin người mua - (*) Thông tin bắt buộc - - - - - setSelecSex('male')} /> - - Anh - - - - setSelecSex('female')} /> - - Chị - - - - - - - - - - - - - - - - - - - - - - - - - - Thông tin người nhận - (*) Thông tin bắt buộc - - - - setCheckedInfo(!checkedInfo)} /> - - Lấy thông tin người mua - - - - - - - - - - - - - - setSelectedProvince(itemValue) - } - > - - - - - - - - - - setSelectedDistrict(itemValue) - } - > - - - - - - - - - - - - - - ) -} - -const SelecPayOption = () => { - const [checkedPayment, setCheckedPayment] = React.useState('pay1'); - const listPayment = [ - { - id: 1, - name: 'COD - Thanh toán khi nhận hàng', - description: '', - image: require('../assets/images/pay_1.png'), - }, - { - id: 2, - name: 'Thanh toán trực tuyến (bằng thẻ ATM, VISA, MASTER) ', - description: '', - image: require('../assets/images/pay_2.png'), - }, - { - id: 3, - name: 'Trả góp qua Alepay (Ngân Lượng)', - description: '', - image: require('../assets/images/pay_2.png'), - }, - ] - return ( - - Phương thức thanh toán - Chọn phương thức thanh toán - - { - listPayment.map(item => { - let idpay = 'pay' + item.id; - return ( - - - - - {item.name} - - setCheckedPayment(idpay)} /> - - - ) - }) - } - - - ) -} - -const Bill = () => { - const [checkedBill, setCheckedBill] = React.useState(false); - return ( - - - - setCheckedBill(!checkedBill)} /> - - Yêu cầu xuất hóa đơn GTGT cho đơn hàng này - - - - - - - - - - - ) } const CartItem = () => { + const [selectCartItem, setSelectedCartItem] = React.useState(false); return ( - - - Quay lại mua thêm sản phẩm khác - - Giỏ hàng của bạn + + setSelectedCartItem(!selectCartItem)} /> + - - - Xóa + + + + Khẩu trang vải kháng khuẩn Nagakawa 2 lớp - Công nghệ Nhật Bản Hộp 10 chiếc (Hộp 10 chiếc - L) + + + + 121.000.000 đ + + + + + + + + - + + + + Để dành mua sau + + + + + + + + + setSelectedCartItem(!selectCartItem)} /> + + + + + + Khẩu trang vải kháng khuẩn Nagakawa 2 lớp - Công nghệ Nhật Bản Hộp 10 chiếc (Hộp 10 chiếc - L) - - Để dành mua sau - - - - 121.000.000 đ - - - + - - - - - - + + + 121.000.000 đ + + + + + + + + - + + + + Để dành mua sau + + @@ -333,27 +135,78 @@ const CartItem = () => { ) } +const VoucherList = () => { + return ( + + + + + Voucher 1.000.000đ dành riêng cho điều hòa NS-C09R1M05 + + + + Đăng ký tài khoản nhận ngay 500 NagaXu = 50.000đ + + + + Bộ 3 nồi inox 4 đáy Nagakawa NAG1306 (16cm, 20cm, 24cm) - Quai mạ vàng - Dùng trên mọi loại bếp- Hàng Chính Hãng + + + + Lưu ý: Mã giảm giá không áp dụng kèm với chương trình trả góp 0%, sản phẩm Flash sale. + - Các mã giảm giá được áp dụng đồng thời nếu đủ điều kiện. + - Tài khoản đăng ký chưa được xác thực dùng NagaXu hệ thống sẽ tự động hủy đơn hàng + + + ) +} + +const TotalPriceCatStepSt = () => { + const [selecAllItemCart, setSelecAllItemCart] = useState(false); + const navigation = useNavigation(); + return( + + + + setSelecAllItemCart(!selecAllItemCart)} /> + + Tất cả + + + + Tổng cộng: + 10.500.000đ + + + Phí vận chuyển: + 0đ + + + navigation.navigate('CartStep')} style={styles.stepStTotalGoStepNd}> + Thanh toán + + + ) +} + const Voucher = () => { const [openPopVoucher, setOpenPopVoucher] = useState(false); const [checkedVoucher, setCheckedVoucher,] = useState(''); return ( - - - - Áp dụng - - setOpenPopVoucher(true)}> - - Chọn mã voucher + + + Chọn mã voucher + + + + + + Bạn chưa có naga xu + - - - Lưu ý: Mã giảm giá không áp dụng kèm với chương trình trả góp 0%, sản phẩm Flash sale. - - Các mã giảm giá được áp dụng đồng thời nếu đủ điều kiện. - - Tài khoản đăng ký chưa được xác thực dùng NagaXu hệ thống sẽ tự động hủy đơn hàng { setOpenPopVoucher(!openPopVoucher); }}> @@ -361,7 +214,12 @@ const Voucher = () => { - Chọn Nagakawa Voucher + + setOpenPopVoucher(false)} style={styles.contentPopVoucherBack}> + + + Chọn Nagakawa Voucher + Mã Voucher @@ -373,8 +231,8 @@ const Voucher = () => { Voucher có thể áp dụng - - + + Nhập NAG9CVFGZ @@ -433,13 +291,50 @@ const Voucher = () => { setCheckedVoucher('vc5')} /> + + + Nhập + NAG9CVFGZ + + + Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ + + + setCheckedVoucher('vc5')} /> + + + + + Nhập + NAG9CVFGZ + + + Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ + + + setCheckedVoucher('vc5')} /> + + + + + Nhập + NAG9CVFGZ + + + Mã giảm giá trị giá 150.000đ áp dụng cho Đơn hàng từ 4.000.000đ + + + setCheckedVoucher('vc5')} /> + + - setOpenPopVoucher(false)}> - Trở lại - + + 1 Voucher đã được chọn. + Đã chọn mã NAGAA200 + setOpenPopVoucher(false)}> Ok @@ -450,42 +345,6 @@ const Voucher = () => { ) } -const TotalCart = () => { - return ( - - - - - Bạn chưa có Naga Xu - - - - - Tổng cộng - 5.000.000đ - - - Giảm giá - 00đ - - - Phí giao hàng - 00đ - - - Thanh toán - 5.000.000đ - - - - - Thanh toán - - - - ) -} - const winWidth = Dimensions.get('window').width; //full width const winHeight = Dimensions.get('window').height; //full height @@ -496,147 +355,154 @@ const styles = StyleSheet.create({ flex: 1, alignItems: 'center', justifyContent: 'center', - backgroundColor: '#f2f2f2', + backgroundColor: '#fff', + }, + headerCart: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: 10, + }, + headerCartLeft: { + flexDirection: 'row', + alignItems: 'center', + }, + headerCartTextSt: { + fontSize: 17, + fontWeight: '700', + }, + headerCartCount: {}, + headerCartRight: {}, + headerCartDelete: { + padding: 5, + borderWidth: 1, + borderColor: '#ABABAB', + borderRadius: 3, + }, + headerCartDeleteIcon: { + fontSize: 16, + color: '#ABABAB' }, boxCustommerInfoCart: { width: winWidth, + backgroundColor: '#fff', + }, + boxCartItemContent: { + width: '100%', + }, + boxCartItemList: {}, + boxCartItemItem: { + width: '100%', padding: 10, - backgroundColor: '#f2f2f2', - }, - boxCustommerInfoCartHeader: { - width: '100%', flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - backgroundColor: 'rgba(0,0,0,0)', - marginBottom: 10, - }, - boxCustommerInfoCartTab: { - width: winWidth / 2 - 15, - padding: 10, - borderWidth: 1, - borderColor: '#ddd', - borderRadius: 5, - flexDirection: 'column', - alignItems: 'center', - }, - boxCustommerInfoCartTextSt: { - fontSize: 13, - textTransform: 'uppercase', - fontWeight: 'bold', - }, - boxCustommerInfoCartTextNd: { - fontSize: 10, - }, - boxCustommerInfoCartTabActive: { - borderColor: '#008445', - }, - green: { - color: '#008445', - }, - boxCustommerInfoCartLoginContent: { - width: '100%', - padding: 5, - display: 'none', - }, - loginCartTitle: { - width: '100%', - textAlign: 'center', - paddingVertical: 10, - }, - loginCartSocial: { - width: '100%', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - marginBottom: 10, - paddingBottom: 10, borderBottomColor: '#e1e1e1', borderBottomWidth: 1, }, - loginCartSocialButtonFace: { - width: 110, - height: 30, + boxCartItemItemCheck: { + width: 36, + height: 36, + borderColor: '#777', + borderWidth: 1, + marginRight: 10, + }, + boxCartItemItemImage: { + width: 90, + }, + boxCartItemItemImageCt: { + width: 90, + height: 90, + position: 'relative', + marginBottom: 10, + }, + boxCartItemItemImageCtImg: { + width: 90, + height: 90, + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + boxCartItemItemDelete: { flexDirection: 'row', alignItems: 'center', - backgroundColor: '#3b5998', - borderRadius: 3, + justifyContent: 'center', }, - loginCartSocialIcCt: { + boxCartItemItemDeleteIcon: { + fontSize: 18, + color: '#999', + }, + boxCartItemItemDeleteText: { + fontSize: 18, + color: '#999', + }, + boxCartItemItemContent: { + width: winWidth - 156, + paddingHorizontal: 10, + }, + boxCartItemItemImageName: { + marginBottom: 10, + fontWeight: '500', + }, + boxCartItemItemImageBuyAfter: { + color: '#00a456', + }, + boxCartItemItemPriceAll: { + width: '100%', + }, + boxCartItemItemPriceAllLeft: { + width: '100%' + }, + boxCartItemItemPrice: { + fontSize: 16, + fontWeight: '500', + color: '#d9282f', + marginBottom: 10, + textAlign: 'left', + }, + selecCountContent: { + width: 100, + flexDirection: 'row', + justifyContent: 'flex-end', + alignItems: 'center', + marginBottom: 10, + marginLeft: 10, + }, + selecCountButton: { width: 30, height: 30, - borderRightWidth: 1, - borderRightColor: '#fff', flexDirection: 'row', - alignItems: 'center', justifyContent: 'center', - backgroundColor: 'rgba(0,0,0,0)', + alignItems: 'center', + backgroundColor: '#DFDFDF', }, - loginCartSocialButtonIcon: { + selecCountButtonText: { fontSize: 24, - color: '#fff' }, - loginCartSocialButtonText: { - width: 80, + selecCountInput: { + width: 50, + height: 30, textAlign: 'center', - color: '#fff', + backgroundColor: '#f2f2f2', + fontSize: 22, }, - loginCartSocialButtonGoogle: { - width: 110, - height: 30, - flexDirection: 'row', - alignItems: 'center', - backgroundColor: '#df4a32', - borderRadius: 3, + boxVoucherList: { + padding: 10, }, - loginCartSocialButtonImg: { - width: 24, - height: 24, - }, - loginCartSocialButtonZalo: { - width: 110, - height: 30, - flexDirection: 'row', - alignItems: 'center', - backgroundColor: '#0f8edd', - borderRadius: 3, - }, - loginCartSocialForm: { - marginBottom: 10, - }, - loginCartSocialFormItem: { - width: '100%', - marginBottom: 10, - }, - loginCartSocialFormItemText: { - marginBottom: 5, - }, - loginCartSocialFormItemInput: { - width: '100%', - height: 40, - borderWidth: 1, - borderColor: '#e1e1e1', - borderRadius: 5, - }, - loginCartSocialFormNote: { + boxVoucherListItem: { marginBottom: 10, flexDirection: 'row', }, - loginCartSocialFormNoteText: {}, - loginCartSocialFormNoteButton: {}, - loginCartSocialFormButton: { - width: '100%', - height: 40, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 5, - overflow: 'hidden', - backgroundColor: '#d9282f', + boxVoucherListItemImg: { + width: 26, + maxHeight: 26, + marginRight: 10, }, - loginCartSocialFormButtonText: { - fontWeight: 'bold', - color: '#fff' + boxVoucherListItemText: { + width: winWidth - 56, + }, + green: { + color: '#008445', }, boxInfoCusCart: { width: '100%', @@ -750,70 +616,6 @@ const styles = StyleSheet.create({ width: '100%', backgroundColor: 'rgba(0,0,0,0)' }, - boxPayment: { - width: '100%', - marginBottom: 20, - backgroundColor: 'rgba(0,0,0,0)' - }, - boxPaymentHead: { - width: '100%', - marginBottom: 10, - backgroundColor: '#008445', - lineHeight: 40, - paddingHorizontal: 10, - fontSize: 18, - fontWeight: 'bold', - textTransform: 'uppercase', - color: '#fff', - }, - boxPaymentTitle: { - marginBottom: 10, - fontSize: 16, - fontWeight: 'bold', - }, - boxPaymentList: {}, - paymentItem: { - width: '100%', - padding: 10, - borderBottomWidth: 1, - borderBottomColor: '#e1e1e1', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - }, - paymentItemImage: { - width: 31, - height: 31, - borderRadius: 15.5, - overflow: 'hidden', - marginRight: 10, - }, - paymentItemImageCt: { - width: 31, - height: 31, - }, - paymentItemText: { - width: winWidth - 130, - }, - paymentItemRadio: { - width: 36, - height: 36, - borderRadius: 18, - borderWidth: 1, - borderColor: '#e1e1e1', - marginLeft: 10, - }, - boxBill: { - width: '100%', - padding: 10, - marginBottom: 20, - }, - boxBillList: { - display: 'none', - }, - boxBillText: { - fontSize: 12, - }, boxCartItem: { width: '100%', marginBottom: 20, @@ -835,99 +637,6 @@ const styles = StyleSheet.create({ marginRight: 5, textTransform: 'uppercase' }, - boxCartItemContent: { - width: '100%', - padding: 5, - }, - boxCartItemContentTitle: { - fontSize: 18, - fontWeight: 'bold', - lineHeight: 40, - }, - boxCartItemList: {}, - boxCartItemItem: { - width: '100%', - paddingVertical: 10, - flexDirection: 'row', - borderTopColor: '#e1e1e1', - borderTopWidth: 1, - }, - boxCartItemItemImage: { - width: 90, - }, - boxCartItemItemImageCt: { - width: 90, - height: 90, - position: 'relative', - marginBottom: 10, - }, - boxCartItemItemImageCtImg: { - width: 90, - height: 90, - position: 'absolute', - top: 0, - left: 0, - right: 0, - bottom: 0, - }, - boxCartItemItemDelete: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - }, - boxCartItemItemDeleteIcon: { - fontSize: 18, - color: '#999', - }, - boxCartItemItemDeleteText: { - fontSize: 18, - color: '#999', - }, - boxCartItemItemContent: { - width: winWidth - 230, - paddingHorizontal: 10, - }, - boxCartItemItemImageName: { - marginBottom: 10, - fontWeight: '500', - }, - boxCartItemItemImageBuyAfter: { - color: '#00a456', - }, - boxCartItemItemPriceAll: { - width: 110, - }, - boxCartItemItemPrice: { - fontSize: 16, - fontWeight: '500', - color: '#d9282f', - marginBottom: 10, - textAlign: 'left', - }, - selecCountContent: { - width: 100, - flexDirection: 'row', - justifyContent: 'flex-end', - alignItems: 'center', - }, - selecCountButton: { - width: 30, - height: 30, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#DFDFDF', - }, - selecCountButtonText: { - fontSize: 24, - }, - selecCountInput: { - width: 50, - height: 30, - textAlign: 'center', - backgroundColor: '#f2f2f2', - fontSize: 22, - }, boxVoucher: { width: '100%', marginBottom: 20, @@ -968,7 +677,14 @@ const styles = StyleSheet.create({ boxVoucherShowPopButton: { flexDirection: 'row', alignItems: 'center', - marginBottom: 15, + justifyContent: 'space-between', + padding: 10, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1' + }, + boxVoucherShowPopButtonCt: { + flexDirection: 'row', + alignItems: 'center', }, boxVoucherShowPopImg: { marginRight: 10, @@ -976,34 +692,66 @@ const styles = StyleSheet.create({ boxVoucherShowPopText: { color: '#d9282f', }, + boxVoucherShowPopIcon: {}, + boxXuShowPopButton: { + flexDirection: 'row', + alignItems: 'center', + padding: 10, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1' + }, + boxXuShowPopButtonImg: { + marginRight: 10, + }, + boxXuShowPopButtonText: { + marginRight: 10, + }, + boxXuShowPopButtonIcon: {}, boxVoucherNote: { - backgroundColor: 'rgba(0,0,0,0)' + backgroundColor: '#f2f2f2', + padding: 10, }, boxVoucherNoteText: { marginBottom: 10, + fontStyle: 'italic', }, TextBold: { fontWeight: 'bold', }, boxCloseModalVoucher: { width: winWidth, - height: 100, backgroundColor: 'rgba(0,0,0,0.5)' }, boxCloseModalVoucherPress: { width: '100%', - height: 100, }, contentPopVoucher: { width: winWidth, padding: 10, - height: winHeight - 100, + height: winHeight, + paddingTop: 50, + }, + contentPopVoucherHeader: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + contentPopVoucherBack: { + width: 50, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + contentPopVoucherBackIcon: { + fontSize: 24, + height: 24, }, contentPopVoucherTitle: { - width: '100%', + width: winWidth - 70, fontSize: 18, lineHeight: 25, - marginBottom: 10, + textAlign: 'center', + fontWeight: '700' }, contentPopVoucherForm: { width: '100%', @@ -1011,44 +759,47 @@ const styles = StyleSheet.create({ borderRadius: 5, backgroundColor: '#f5f5f5', marginBottom: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', }, contentPopVoucherFormText: { - marginBottom: 5, + width: 78, }, contentPopVoucherFormInput: { - width: '100%', + width: winWidth - 205, height: 40, borderRadius: 5, paddingHorizontal: 10, backgroundColor: '#fff', - marginBottom: 10, + borderWidth: 1, + borderColor: '#ababab' }, contentPopVoucherFormButton: { - width: '100%', + width: 72, height: 40, borderRadius: 5, - paddingHorizontal: 10, backgroundColor: '#d9282f', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }, contentPopVoucherFormButtonText: { - fontSize: 18, + fontSize: 12, textTransform: 'uppercase', color: '#fff', fontWeight: 'bold' }, contentPopVoucherPop: { width: '100%', - height: winHeight - 350, + height: winHeight - 260, }, contentPopVoucherPopTitle: { marginBottom: 10, }, contentPopVoucherPopList: { width: '100%', - height: winHeight - 370, + height: winHeight - 290, }, contentPopVoucherPopItem: { width: '100%', @@ -1068,6 +819,12 @@ const styles = StyleSheet.create({ flexDirection: 'column', alignItems: 'center', }, + contentPopVoucherPopItemHasUse: { + borderColor: '#008445', + }, + contentPopVoucherPopItemLeftHasUse: { + backgroundColor: '#008445' + }, contentPopVoucherPopItemLeftSt: { color: '#fff', marginBottom: 5, @@ -1096,26 +853,11 @@ const styles = StyleSheet.create({ }, contentPopVoucherPopBot: { width: '100%', - height: 60, - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - contentPopVoucherPopBotBack: { - width: winWidth / 2 - 15, - backgroundColor: '#ebebeb', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - borderRadius: 5, - height: 40, - }, - contentPopVoucherPopBotBackText: { - fontSize: 18, - textTransform: 'uppercase', + height: 90, + paddingVertical: 10, }, contentPopVoucherPopBotOk: { - width: winWidth / 2 - 15, + width: '100%', backgroundColor: '#d9282f', flexDirection: 'row', justifyContent: 'center', @@ -1192,4 +934,73 @@ const styles = StyleSheet.create({ textTransform: 'uppercase', fontWeight: 'bold', }, + stepStTotal: { + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + stepStTotalSelect: { + flexDirection: 'row', + alignItems: 'center', + width: 78, + flexWrap: 'wrap' + }, + stepStTotalSetectItem: { + width: 36, + height: 35, + borderColor: '#ababab', + borderWidth: 1, + marginRight: 10, + marginBottom: 5, + }, + stepStTotalSelectText: { + fontSize: 13, + }, + stepStTotalPrice: {}, + stepStTotalPriceCt: { + flexDirection: 'row', + alignItems: 'center', + width: winWidth - 204, + flexWrap: 'wrap' + }, + stepStTotalPriceText: { + marginRight: 10, + }, + stepStTotalPriceNum: { + fontSize: 16, + color: '#D8262F', + fontWeight: '700' + }, + stepStTotalShip: { + flexDirection: 'row', + alignItems: 'center' + }, + stepStTotalShipText: { + color: '#999' + }, + stepStTotalShupNum: { + color: '#D8262F', + }, + stepStTotalGoStepNd: { + width: 96, + height: 36, + borderRadius: 5, + backgroundColor: '#D8262F', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + stepStTotalGoStepNdText: { + fontSize: 14, + color: '#fff', + }, + countVoucherSelect: { + width: '100%', + marginBottom: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + flexWrap: 'wrap' + }, }); diff --git a/screens/CartPayInstallment.tsx b/screens/CartPayInstallment.tsx new file mode 100644 index 0000000..61a9838 --- /dev/null +++ b/screens/CartPayInstallment.tsx @@ -0,0 +1,248 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View } from '../components/Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import { useNavigation } from '@react-navigation/native'; + +export default function CartPayInstallment() { + return ( + + + + + + + + + + ); +} + +const HeaderCart = () => { + const navigation = useNavigation(); + return ( + + navigation.navigate('Cart')}> + + + Mua trả góp + + ) +} + +const CartItemPayInstall = () => { + return( + + + + + + + + + + ĐIỀU HÒA 1 CHIỀU 9000 BTU/H NAGAKAWA NS-C09R1M05 - MADE IN MALAYSIA - BẢO HÀNH 2 NĂM() + 10.000.000đ + + + + + + + + + + + ĐIỀU HÒA 1 CHIỀU 9000 BTU/H NAGAKAWA NS-C09R1M05 - MADE IN MALAYSIA - BẢO HÀNH 2 NĂM() + 10.000.000đ + + + + ) +} + +const BoxPayInstallForm = () => { + return( + + + Trả góp 0% bằng thẻ tín dụng + + + + Giá trị sản phẩm (*) + + + + Số tiền trả góp (*) + + + + Tiền tệ (*) + + + + Họ tên (*) + + + + Địa chỉ (*) + + + + Số tiền trả trước (*) + + + + Số lượng (*) + + + + Email (*) + + + + Số điện thoại (*) + + + + Thành phố (*) + + + + + Thanh toán trả góp + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + headerCartStep: { + flexDirection: 'row', + alignItems: 'center', + padding: 10, + }, + goBack: { + width: 50, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + goBackIcon: { + fontSize: 24, + }, + headerCartStepTitle: { + fontWeight: '700', + width: winWidth - 70, + textAlign: 'center' + }, + boxItemCartPayInstall: { + marginBottom: 10, + backgroundColor: '#f2f2f2', + }, + boxItemCartPayInstallItem: { + width: '100%', + padding: 10, + backgroundColor: '#fff', + flexDirection: 'row', + }, + boxItemCartPayInstallItemLeft: { + width: 65, + paddingRight: 15, + flexDirection: 'column', + alignItems: 'center' + }, + boxItemCartPayInstallItemImg: { + width: '100%', + height: 50, + marginBottom: 10, + }, + boxItemCartPayInstallItemDelete: { + padding: 5, + borderColor: '#e1e1e1', + borderWidth: 1, + borderRadius: 3, + }, + boxItemCartPayInstallItemDeleteIcon: { + fontSize: 16, + color: '#999' + }, + boxItemCartPayInstallItemInfo: { + width: winWidth - 85, + }, + boxItemCartPayInstallItemName: { + marginBottom: 10, + fontWeight: '700' + }, + boxItemCartPayInstallItemPrice: { + fontSize: 18, + fontWeight: '700', + color: '#D8262F', + }, + boxPayForm: { + width: winWidth, + padding: 10, + }, + boxPayFormHeader: { + marginBottom: 10, + padding: 10, + borderRadius: 5, + borderWidth: 1, + borderColor: '#008445', + backgroundColor: '#DBF1E6', + flexDirection: 'column', + alignItems: 'center', + }, + boxPayFormHeaderText: { + marginBottom: 10, + fontWeight: '700', + fontSize: 16, + }, + boxPayFormHeaderImg: { + width: 149, + height: 24, + }, + boxPayFormItem: { + marginBottom: 15, + }, + boxPayFormItemText: { + fontSize: 16, + marginBottom: 5, + }, + boxPayFormItemInput: { + width: '100%', + height: 40, + paddingHorizontal: 10, + borderColor: '#ABABAB', + borderWidth: 1, + borderRadius: 3, + }, + boxPayFormItemSend: { + width: '100%', + height: 40, + backgroundColor: '#D8262F', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 5, + }, + boxPayFormItemSendText: { + fontSize: 14, + color: '#fff', + textTransform: 'uppercase', + fontWeight: 'bold', + }, +}); diff --git a/screens/CartStep.tsx b/screens/CartStep.tsx new file mode 100644 index 0000000..fe56108 --- /dev/null +++ b/screens/CartStep.tsx @@ -0,0 +1,872 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View } from '../components/Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import Swiper from 'react-native-swiper'; +import { Asset } from 'expo-asset'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; +import { useNavigation } from '@react-navigation/core'; + +export default function CartStep() { + return ( + + + + + + ); +} + +const CustommerInfo = () => { + return ( + + + + + + + + + + + + ) +} + +const HeaderCart = () => { + const navigation = useNavigation(); + return ( + + navigation.navigate('Cart')}> + + + Thanh toán + + ) +} + +const CustommerInfoCart = () => { + const [selecSex, setSelecSex] = React.useState('male'); + const [checkedInfo, setCheckedInfo] = React.useState(false); + const [selectedProvince, setSelectedProvince] = React.useState(); + const [selectedDistrict, setSelectedDistrict] = React.useState(); + return ( + + + 1 + Thông tin khách hàng + + + Thông tin người mua + (*) Thông tin bắt buộc + + + + + setSelecSex('male')} /> + + Anh + + + + setSelecSex('female')} /> + + Chị + + + + + + + + + + + + + + + + + + + + + Thông tin người nhận + (*) Thông tin bắt buộc + + + + setCheckedInfo(!checkedInfo)} /> + + Lấy thông tin người mua + + + + + + + + + + + + setSelectedProvince(itemValue) + } + > + + + + + + + + + + setSelectedDistrict(itemValue) + } + > + + + + + + + + + + + + + + ) +} + +const SelecPayOption = () => { + const [checkedPayment, setCheckedPayment] = React.useState('pay1'); + const listPayment = [ + { + id: 1, + name: 'COD - Thanh toán khi nhận hàng', + description: '', + image: require('../assets/images/pay_1.png'), + }, + { + id: 2, + name: 'Thanh toán trực tuyến (bằng thẻ ATM, VISA, MASTER) ', + description: '', + image: require('../assets/images/pay_2.png'), + }, + { + id: 3, + name: 'Trả góp qua Alepay (Ngân Lượng)', + description: '', + image: require('../assets/images/pay_2.png'), + }, + ] + return ( + + + 1 + Phương thức thanh toán + + Chọn phương thức thanh toán + + { + listPayment.map(item => { + let idpay = 'pay' + item.id; + return ( + + + + + {item.name} + + setCheckedPayment(idpay)} /> + + + ) + }) + } + + + ) +} + +const Bill = () => { + const [checkedBill, setCheckedBill] = React.useState(false); + return ( + + + + setCheckedBill(!checkedBill)} /> + + Yêu cầu xuất hóa đơn GTGT cho đơn hàng này + + + + + + + + + + + + + + ) +} + + + +const TotalCart = () => { + const navigation = useNavigation(); + return ( + + + + + Bạn chưa có Naga Xu + + + + + Tổng cộng + 5.000.000đ + + + Giảm giá Voucher + 00đ + + + Phí giao hàng + 00đ + + + Thanh toán + 5.000.000đ + + + Nhận thêm 500 xu + + + Tổng cộng: + 5.000.000 đ + + + navigation.navigate('CartPayInstallment')} style={styles.boxTotalCartSubmitButtonTragop}> + Mua trả góp + + + Đặt hàng + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + + + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + headerCartStep: { + flexDirection: 'row', + alignItems: 'center', + padding: 10, + }, + goBack: { + width: 50, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + goBackIcon: { + fontSize: 24, + }, + headerCartStepTitle: { + fontWeight: '700', + width: winWidth - 70, + textAlign: 'center' + }, + boxCustommerInfoCart: { + width: winWidth, + backgroundColor: '#fff', + paddingHorizontal: 10, + }, + green: { + color: '#008445', + }, + boxInfoCusCart: { + width: '100%', + backgroundColor: 'rgba(0,0,0,0)', + display: 'none', + }, + boxInfoCusCartTitle: { + fontSize: 18, + fontWeight: 'bold', + textTransform: 'uppercase', + color: '#008445', + }, + boxInfoCusCartTitleAll: { + width: '100%', + marginBottom: 10, + height: 40, + flexDirection: 'row', + alignItems: 'center', + borderBottomColor: '#ababab', + borderBottomWidth: 1, + paddingBottom: 5, + }, + boxInfoCusCartTitleAllNum: { + width: 30, + height: 30, + textAlign: 'center', + lineHeight: 30, + borderColor: '#008445', + borderWidth: 1, + borderRadius: 15, + marginRight: 10, + }, + boxInfoCusCartHeading: { + marginBottom: 10, + backgroundColor: 'rgba(0,0,0,0)', + flexDirection: 'row', + alignItems: 'center' + }, + boxInfoCusCartHeadingText: { + fontSize: 16, + fontWeight: 'bold', + marginRight: 5, + }, + boxInfoCusCartHeadingNote: {}, + boxInfoCusCartItemSex: { + padding: 10, + marginBottom: 10, + width: '100%', + flexDirection: 'row', + }, + boxInfoCusCartItemSexIt: { + flexDirection: 'row', + alignItems: 'center', + marginRight: 20, + }, + itemRadio: { + width: 36, + height: 36, + borderRadius: 18, + borderWidth: 1, + borderColor: '#e1e1e1', + marginRight: 5, + }, + boxInfoCusCartContent: { + width: '100%', + marginBottom: 10, + backgroundColor: 'rgba(0,0,0,0)', + }, + boxInfoCusCartItem: { + width: '100%', + marginBottom: 10, + backgroundColor: 'rgba(0,0,0,0)', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + boxInfoCusCartItemInput: { + width: '100%', + height: 42, + borderRadius: 5, + borderWidth: 1, + borderColor: '#e1e1e1', + paddingHorizontal: 10, + backgroundColor: '#fff', + }, + red: { + color: '#d9282f' + }, + boxInfoCusCartItemHalf: { + width: winWidth / 2 - 15, + backgroundColor: 'rgba(0,0,0,0)', + }, + boxInfoCusCartItemArea: { + width: '100%', + height: 85, + borderRadius: 5, + borderWidth: 1, + borderColor: '#e1e1e1', + paddingHorizontal: 10, + backgroundColor: '#fff', + }, + boxInfoCusCartItemCheckInfo: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + backgroundColor: 'rgba(0,0,0,0)' + }, + picker: { + height: 42, + width: '100%', + backgroundColor: '#fff', + borderRadius: 5, + }, + onePickerItem: { + height: 46, + color: '#222', + fontSize: 14, + textAlign: 'center', + width: '100%', + backgroundColor: '#fff', + }, + active: { + display: 'flex', + }, + noBg: { + width: '100%', + backgroundColor: 'rgba(0,0,0,0)' + }, + boxPayment: { + width: '100%', + marginBottom: 20, + backgroundColor: 'rgba(0,0,0,0)' + }, + boxPaymentHead: { + width: '100%', + marginBottom: 10, + backgroundColor: '#008445', + lineHeight: 40, + paddingHorizontal: 10, + fontSize: 18, + fontWeight: 'bold', + textTransform: 'uppercase', + color: '#fff', + }, + boxPaymentTitle: { + marginBottom: 10, + fontSize: 16, + fontWeight: 'bold', + }, + boxPaymentList: {}, + paymentItem: { + width: '100%', + padding: 10, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + paymentItemImage: { + width: 31, + height: 31, + borderRadius: 15.5, + overflow: 'hidden', + marginRight: 10, + }, + paymentItemImageCt: { + width: 31, + height: 31, + }, + paymentItemText: { + width: winWidth - 130, + }, + paymentItemRadio: { + width: 36, + height: 36, + borderRadius: 18, + borderWidth: 1, + borderColor: '#e1e1e1', + marginLeft: 10, + }, + boxBill: { + width: '100%', + paddingVertical: 10, + marginBottom: 20, + }, + boxBillList: { + display: 'none', + }, + boxBillText: { + fontSize: 12, + }, + boxCartItem: { + width: '100%', + marginBottom: 20, + backgroundColor: 'rgba(0,0,0,0)' + }, + boxCartItemBuyOther: { + marginBottom: 10, + flexDirection: 'row', + alignItems: 'center', + }, + boxCartItemBuyOtherIcon: { + fontSize: 15, + color: '#d9282f', + marginRight: 5, + }, + boxCartItemBuyOtherIconText: { + fontSize: 15, + color: '#d9282f', + marginRight: 5, + textTransform: 'uppercase' + }, + boxVoucher: { + width: '100%', + marginBottom: 20, + backgroundColor: 'rgba(0,0,0,0)' + }, + boxVoucherForm: { + marginBottom: 10, + flexDirection: 'row', + alignItems: 'center', + borderRadius: 5, + }, + boxVoucherFormInput: { + width: winWidth - 98, + height: 40, + paddingHorizontal: 10, + backgroundColor: '#fff', + borderTopLeftRadius: 5, + borderBottomLeftRadius: 5, + overflow: 'hidden', + }, + boxVoucherFormButton: { + width: 78, + height: 40, + backgroundColor: '#6c757d', + borderTopRightRadius: 5, + borderBottomRightRadius: 5, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + boxVoucherFormButtonText: { + color: '#fff', + }, + boxVoucherShowPop: { + width: '100%', + backgroundColor: 'rgba(0,0,0,0)' + }, + boxVoucherShowPopButton: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: 10, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1' + }, + boxVoucherShowPopButtonCt: { + flexDirection: 'row', + alignItems: 'center', + }, + boxVoucherShowPopImg: { + marginRight: 10, + }, + boxVoucherShowPopText: { + color: '#d9282f', + }, + boxVoucherShowPopIcon: {}, + boxXuShowPopButton: { + flexDirection: 'row', + alignItems: 'center', + padding: 10, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1' + }, + boxXuShowPopButtonImg: { + marginRight: 10, + }, + boxXuShowPopButtonText: { + marginRight: 10, + }, + boxXuShowPopButtonIcon: {}, + boxVoucherNote: { + backgroundColor: '#f2f2f2', + padding: 10, + }, + boxVoucherNoteText: { + marginBottom: 10, + fontStyle: 'italic', + }, + TextBold: { + fontWeight: 'bold', + }, + boxCloseModalVoucher: { + width: winWidth, + backgroundColor: 'rgba(0,0,0,0.5)' + }, + boxCloseModalVoucherPress: { + width: '100%', + }, + contentPopVoucher: { + width: winWidth, + padding: 10, + height: winHeight, + paddingTop: 50, + }, + contentPopVoucherHeader: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + contentPopVoucherBack: { + width: 50, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + contentPopVoucherBackIcon: { + fontSize: 24, + height: 24, + }, + contentPopVoucherTitle: { + width: winWidth - 70, + fontSize: 18, + lineHeight: 25, + textAlign: 'center', + fontWeight: '700' + }, + contentPopVoucherForm: { + width: '100%', + padding: 10, + borderRadius: 5, + backgroundColor: '#f5f5f5', + marginBottom: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + contentPopVoucherFormText: { + width: 78, + }, + contentPopVoucherFormInput: { + width: winWidth - 205, + height: 40, + borderRadius: 5, + paddingHorizontal: 10, + backgroundColor: '#fff', + borderWidth: 1, + borderColor: '#ababab' + }, + contentPopVoucherFormButton: { + width: 72, + height: 40, + borderRadius: 5, + backgroundColor: '#d9282f', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + contentPopVoucherFormButtonText: { + fontSize: 12, + textTransform: 'uppercase', + color: '#fff', + fontWeight: 'bold' + }, + contentPopVoucherPop: { + width: '100%', + height: winHeight - 350, + }, + contentPopVoucherPopTitle: { + marginBottom: 10, + }, + contentPopVoucherPopList: { + width: '100%', + height: winHeight - 370, + }, + contentPopVoucherPopItem: { + width: '100%', + marginBottom: 10, + borderWidth: 1, + borderColor: '#999', + flexDirection: 'row', + borderRadius: 5, + overflow: 'hidden', + alignItems: 'center', + paddingRight: 8, + }, + contentPopVoucherPopItemLeft: { + width: 130, + padding: 10, + backgroundColor: '#999', + flexDirection: 'column', + alignItems: 'center', + }, + contentPopVoucherPopItemHasUse: { + borderColor: '#008445', + }, + contentPopVoucherPopItemLeftHasUse: { + backgroundColor: '#008445' + }, + contentPopVoucherPopItemLeftSt: { + color: '#fff', + marginBottom: 5, + fontSize: 15, + }, + contentPopVoucherPopItemLeftNd: { + color: '#fff', + marginBottom: 5, + fontSize: 15, + textTransform: 'uppercase', + fontWeight: 'bold' + }, + contentPopVoucherPopItemCenter: { + + }, + contentPopVoucherPopItemCenterText: { + width: winWidth - 194, + paddingHorizontal: 10, + }, + contentPopVoucherPopItemCheck: { + width: 36, + height: 36, + borderRadius: 18, + borderWidth: 1, + borderColor: '#999', + }, + contentPopVoucherPopBot: { + width: '100%', + height: 60, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + contentPopVoucherPopBotBack: { + width: winWidth / 2 - 15, + backgroundColor: '#ebebeb', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + borderRadius: 5, + height: 40, + }, + contentPopVoucherPopBotBackText: { + fontSize: 18, + textTransform: 'uppercase', + }, + contentPopVoucherPopBotOk: { + width: winWidth / 2 - 15, + backgroundColor: '#d9282f', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + borderRadius: 5, + height: 40, + }, + contentPopVoucherPopBotOkText: { + fontSize: 18, + textTransform: 'uppercase', + color: '#fff', + fontWeight: 'bold', + }, + boxTotalCart: { + }, + boxTotalCartXu: { + width: '100%', + paddingVertical: 15, + borderBottomColor: '#e1e1e1', + borderBottomWidth: 1, + flexDirection: 'row', + alignItems: 'center', + }, + boxTotalCartXuImg: { + width: 20, + height: 20, + marginRight: 10, + }, + boxTotalCartXuButton: { + flexDirection: 'row', + alignItems: 'center', + }, + boxTotalCartButtonTex: {}, + boxTotalCartButtonIcon: {}, + boxTotalCartItem: { + width: '100%', + paddingVertical: 15, + borderBottomColor: '#e1e1e1', + borderBottomWidth: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + boxTotalCartItemLeft: { + fontSize: 14, + textTransform: 'uppercase', + }, + boxTotalCartItemRight: { + fontSize: 14, + }, + boxTotalCartItemCoin: { + color: '#FE9923', + textAlign: 'right', + width: '100%' + }, + boxTotalCartSubmit: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + boxTotalCartSubmitButton: { + width: winWidth / 2 - 15, + height: 40, + backgroundColor: '#d9282f', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 5, + }, + boxTotalCartSubmitText: { + fontSize: 15, + color: '#fff', + textTransform: 'uppercase', + fontWeight: 'bold', + }, + boxTotalCartItemAll: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + paddingVertical: 10, + }, + boxTotalCartItemAllText: { + marginRight: 5, + }, + boxTotalCartItemAllPrice: { + fontSize: 16, + color: '#D8262F', + }, + boxTotalCartSubmitButtonTragop: { + width: winWidth / 2 - 15, + height: 40, + backgroundColor: '#FE9923', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 5, + }, + boxTotalCartSubmitTextTragop: { + fontSize: 15, + color: '#fff', + textTransform: 'uppercase', + fontWeight: 'bold', + }, +}); diff --git a/screens/CustomerInfo.tsx b/screens/CustomerInfo.tsx new file mode 100644 index 0000000..fe584b7 --- /dev/null +++ b/screens/CustomerInfo.tsx @@ -0,0 +1,289 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native'; +import Constants from 'expo-constants'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import { useNavigation } from '@react-navigation/native'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View, } from '../components/Themed'; +import useColorScheme from '../hooks/useColorScheme'; +import { TextInput } from 'react-native-gesture-handler'; +import { RadioButton, Checkbox } from 'react-native-paper'; +import { Picker } from '@react-native-picker/picker'; + +export default function CustomerInfo() { + return ( + + + + + + + + ) +} + +const HeaderAccountOrderList = () => { + const navigation = useNavigation(); + return ( + + navigation.goBack()} style={styles.headerAOLBack}> + + + Thông tin tài khoản + + ) +} + +const CustomerInfoContent = () => { + const [openModalCusInfoChange, setOpenModalCusInfoChange] = useState(false); + return ( + + + setOpenModalCusInfoChange(true)} style={styles.boxCustommerBt}> + Họ tên + + Nguyễn Quỳnh + + + + + + + Giới tính + + Nữ + + + + + + + Địa chỉ email + + quynhnt@gmail.com + + + + + + + Địa chỉ nhà + + 100 Láng Hạ, Đống Đa + + + + + + + Tỉnh / TP + + Hà Nội + + + + + + + Điện thoại + + 0912345678 + + + + + + + Thay đổi mật khẩu + + + + + + + { setOpenModalCusInfoChange(!openModalCusInfoChange); }}> + + setOpenModalCusInfoChange(!openModalCusInfoChange)} style={styles.cusInfoContentBg}> + + + + Họ tên + setOpenModalCusInfoChange(!openModalCusInfoChange)}> + + + + + Họ tên + + + + Thay đổi + + + + + + ) +} + + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height +const winWidthP10 = winWidth - 20; +const halfWinWidth = winWidth / 2; +const ratio = winWidthP10 / 850; //541 is actual image width + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#fff', + }, + headerAOL: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + headerAOLBack: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLBackIcon: { + fontSize: 24, + }, + headerAOLSearch: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + headerAOLSearchIcon: { + fontSize: 24, + }, + headerAOLTitle: { + width: winWidth - 60, + textAlign: 'center', + fontWeight: '700', + }, + headerAOLChat: { + width: 40, + height: 40, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + }, + headerAOLChatIcon: { + fontSize: 24, + }, + GreenColor: { + color: '#008445', + }, + OrangeColor: { + color: '#FE9923', + }, + RedColor: { + color: '#D8262F', + }, + boxCustommer: { + width: winWidth, + paddingTop: 10, + backgroundColor: '#f2f2f2', + }, + boxCustommerItem: { + width: winWidth, + borderBottomWidth: 1, + borderBottomColor: '#f2f2f2', + }, + boxCustommerBt: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + paddingHorizontal: 10, + height: 40, + }, + boxCustommerTextLeft: {}, + boxCustommerCtRight: { + flexDirection: 'row', + alignItems: 'center', + }, + boxCustommerTextRight: { + color: '#777777', + marginRight: 10, + }, + boxCustommerIcon: { + fontSize: 18, + color: '#777' + }, + cusInfoContent: { + width: winWidth, + height: winHeight, + backgroundColor: 'rgba(0,0,0,0)' + }, + cusInfoContentBg: { + width: winHeight, + height: winHeight - 236, + backgroundColor: 'rgba(0,0,0,0.5)', + }, + cusInfoContentct: { + width: winWidth, + paddingHorizontal: 10, + backgroundColor: '#fff', + height: 236, + }, + cusInfoContentctHead: { + marginBottom: 30, + position: 'relative', + padding: 10, + }, + cusInfoContentctHeadText: { + width: '100%', + textAlign: 'center', + fontSize: 16, + fontWeight: '700' + }, + cusInfoContentctHeadBt: { + position: 'absolute', + top: 10, + right: 10, + zIndex: 2, + }, + cusInfoContentctHeadBtIcon: { + fontSize: 18, + }, + cusInfoContentctIp: { + borderBottomColor: '#ababab', + borderBottomWidth: 1, + marginBottom: 20, + }, + cusInfoContentctIpText: { + marginBottom: 10, + fontWeight: '500', + color: '#008445' + }, + cusInfoContentctIpInput: { + width: '100%', + height: 40, + }, + cusInfoContentctBtSubmit: { + width: '100%', + height: 40, + backgroundColor: '#D8262F', + borderRadius: 5, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + cusInfoContentctBtSubmitText: { + textTransform: 'uppercase', + fontWeight: '700', + color: '#fff' + }, +}) \ No newline at end of file diff --git a/screens/ForgotPassword.tsx b/screens/ForgotPassword.tsx new file mode 100644 index 0000000..2e54a10 --- /dev/null +++ b/screens/ForgotPassword.tsx @@ -0,0 +1,80 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View } from '../components/Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import { useNavigation } from '@react-navigation/native'; + +export default function ForgotPassword() { + const navigation = useNavigation(); + return ( + + + Bạn quên mật khẩu vào tài khoản? + Vui lòng nhập địa chỉ email đã đăng ký với chúng tôi để tạo mật khẩu mới. Chúng tôi sẽ gửi 1 email vào địa chỉ email cung cấp và yêu cầu xác minh trước khi có thể tạo mật khẩu mới + + + + + Lấy lại mật khẩu + + + + ); +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + boxForgotPassword: { + width: winWidth, + padding: 10, + height: '100%', + }, + boxForgotPasswordTitle: { + marginBottom: 20, + textAlign: 'center', + fontWeight: '700' + }, + boxForgotPasswordNote: { + textAlign: 'center', + marginBottom: 20, + fontWeight: '300' + }, + boxForgotPasswordInput: { + width: '100%', + marginBottom: 15, + borderBottomColor: '#ABABAB', + borderBottomWidth: 1, + paddingBottom: 5, + }, + boxForgotPasswordInputCt: { + width: '100%', + height: 30, + }, + boxForgotPasswordButton: { + width: '100%', + height: 40, + borderRadius: 5, + marginBottom: 10, + backgroundColor: '#D8262F', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + boxForgotPasswordButtonText: { + fontWeight: '700', + color: '#fff', + textTransform: 'uppercase', + }, + +}); diff --git a/screens/Login.tsx b/screens/Login.tsx index 0f875da..0c59287 100644 --- a/screens/Login.tsx +++ b/screens/Login.tsx @@ -12,53 +12,51 @@ export default function Login() { const navigation = useNavigation(); return ( - - - - Chào mừng đến với Nagakawa! - Đăng nhập ngay! + + + + + + + + + + - - Khách hàng mới? - navigation.navigate('Register')}> - Đăng ký + + + + navigation.navigate('ForgotPassword')} style={styles.boxLoginItemForgitPas}> + Quên? - tại đây - - - - Email đăng nhập - - - - Mật khẩu - - - - - Quên mật khẩu? - - - navigation.navigate('AccountHome')}> - Đăng nhập - - - Hoặc đăng nhập bằng - - - - - - - - - - - - - + navigation.navigate('AccountHome')} style={styles.boxLoginButton}> + Đăng nhập + + + Khách hàng mới? + navigation.navigate('Register')}> + Đăng ký + + + + + Hoặc + + + + + + + + + + + + + + ); } @@ -74,110 +72,120 @@ const styles = StyleSheet.create({ }, boxLogin: { width: winWidth, + height: winHeight - 130, padding: 10, - backgroundColor: 'rgba(0,0,0,0)' }, - boxLoginTitle: { - width: '100%', - backgroundColor: 'rgba(0,0,0,0)', + boxLoginTop: { + flexDirection: 'row', + justifyContent: 'center', marginBottom: 20, }, - boxLoginTitleText: { - fontSize: 18, - fontWeight: 'bold', - }, - boxLoginToRegis: { - width: '100%', - backgroundColor: 'rgba(0,0,0,0)', + boxLoginLogo: {}, + boxLoginItemList: {}, + boxLoginItem: { marginBottom: 10, flexDirection: 'row', alignItems: 'center', + borderBottomColor: '#ABABAB', + borderBottomWidth: 1, + paddingBottom: 5, + position: 'relative', + }, + boxLoginItemIcon: { + fontSize: 24, + width: 32, + }, + boxLoginItemInput: { + width: winWidth - 52, + height: 30, + }, + boxLoginItemInputMk: { + paddingRight: 50, + }, + boxLoginItemForgitPas: { + position: 'absolute', + right: 0, + borderLeftColor: '#e1e1e1', + borderLeftWidth: 1, + width: 50, + height: 30, + flexDirection: 'row', justifyContent: 'flex-end', + alignItems: 'center', }, - green: { - color: '#008445', + boxLoginItemForgitPasText: { + color: '#0070C7' }, - loginCartSocialForm: { - marginBottom: 10, - padding: 10, - }, - loginCartSocialFormItem: { - width: '100%', - marginBottom: 10, - }, - loginCartSocialFormItemText: { - marginBottom: 5, - fontWeight: 'bold' - }, - loginCartSocialFormItemInput: { + boxLoginButton: { width: '100%', height: 40, - borderWidth: 1, - borderColor: '#e1e1e1', borderRadius: 5, - }, - loginCartSocialFormNote: { marginBottom: 10, - flexDirection: 'row', - }, - boxLoginForgetPass: { - width: '100%', - flexDirection: 'row', - marginBottom: 15, - justifyContent: 'flex-end', - }, - boxLoginForgetPassText: { - color: '#008445', - }, - boxLoginSubmit: { - width: '100%', - height: 40, + backgroundColor: '#D8262F', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', - borderRadius: 5, - overflow: 'hidden', - backgroundColor: '#d9282f', - marginBottom: 20, }, - boxLoginSubmitText: { - fontWeight: 'bold', + boxLoginButtonText: { + fontWeight: '700', + color: '#fff', + textTransform: 'uppercase', + }, + boxLoginButtonRegis: { + marginBottom: 20, + flexDirection: 'row', + alignItems: 'center', + }, + boxLoginButtonRegisText: { + marginRight: 5, + }, + boxLoginButtonRegisBt: { + color: '#0070C7', + }, + boxLoginLineChia: { + marginBottom: 20, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center' + }, + boxLoginLine: { + width: 80, + height: 1, + backgroundColor: '#e1e1e1', + }, + boxLoginLineChiaText: { + marginHorizontal: 5, + color: '#777', + fontWeight: '300', + }, + loginSocial: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + loginSocialItem: { + width: 40, + height: 40, + borderRadius: 20, + backgroundColor: '#3B5998', + marginHorizontal: 8, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + loginSocialItemIcon: { + fontSize: 18, color: '#fff' }, - boxLoginOther: { - marginBottom: 20, - flexDirection: 'row', - justifyContent: 'center', + loginSocialItemImg: { + width: 22, + height: 24, }, - boxLoginOtherText: {}, - boxLoginSocial: { - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', + loginSocialItemFace: {}, + loginSocialItemGoogle: { + backgroundColor: '#DF4A32', }, - boxLoginSocialItem: { - width: 34, - height: 34, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - borderRadius: 5, - marginHorizontal: 5, - backgroundColor: '#3b5998', - }, - boxLoginSocialFace: {}, - boxLoginSocialGoogle: { - backgroundColor: '#df4a32', - }, - boxLoginSocialZalo: { - backgroundColor: '#0f8edd', - }, - boxLoginSocialIcon: { - fontSize: 16, - color: '#fff', - }, - boxLoginSocialImg: { - width: 16, - height: 16, + loginSocialItemZalo: { + backgroundColor: '#0F8EDD' }, }); diff --git a/screens/ProductHotList.tsx b/screens/ProductHotList.tsx new file mode 100644 index 0000000..2db48a4 --- /dev/null +++ b/screens/ProductHotList.tsx @@ -0,0 +1,797 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View } from '../components/Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import { useNavigation } from '@react-navigation/native'; + +export default function ProductHotList() { + return ( + + + + + + + + + + + ); +} + +const SortAndFilter = () => { + const [openSort, setopenSort] = useState(true); + const [openFilter, setOpenFilter] = useState(false); + return ( + + + setopenSort(!openSort)}> + Sắp xếp: + Mới nhất + + + + + Mới nhất + + + + Giá giảm dần + + + Giá tăng dần + + + + + setOpenFilter(true)}> + + Lọc + + { setOpenFilter(!openFilter); }}> + + setOpenFilter(!openFilter)} style={styles.filterItemContentBg}> + + + + setOpenFilter(!openFilter)}> + + + Bộ lọc + + + + + + + + + + + + + Xem 1020 sản phẩm + + + + + + + + ) +} + +const PriceFilterList = () => { + const dataPriceFilter = [ + { + url: '/', + name: 'Dưới 200.000', + is_current: 1, + }, + { + url: '/', + name: 'Từ 200.000 đến 500.000', + is_current: 0, + }, + { + url: '/', + name: 'Từ 500.000 đến 1.000.000', + is_current: 0, + }, + { + url: '/', + name: 'Từ 1.000.000 đến 5.000.000', + is_current: 0, + }, + { + url: '/', + name: 'Từ 5.000.000 đến 15.000.000', + is_current: 0, + }, + { + url: '/', + name: 'Trên 15.000.000', + is_current: 0, + }, + ] + return ( + + Khoảng giá + + { + dataPriceFilter.map((item, index) => + + ) + } + + + Hoặc nhập giá ở ô dưới đây + + + + + + + ) +} + +const OtherFilterList = () => { + const [openAllFilter, setOpenAllFilter] = useState(true); + const dataPriceFilter = [ + { + url: '/', + name: '1 - 2 lít', + is_current: 1, + }, + { + url: '/', + name: '2 - 3 lít', + is_current: 0, + }, + { + url: '/', + name: '3 - 4 lít', + is_current: 0, + }, + { + url: '/', + name: '4 - 9 lít', + is_current: 0, + }, + { + url: '/', + name: '9 - 12 lít', + is_current: 0, + }, + { + url: '/', + name: '12 - 15 lít', + is_current: 0, + }, + ] + return ( + + Dung tích + + { + dataPriceFilter.map((item, index) => + + ) + } + + + setOpenAllFilter(!openAllFilter)} style={styles.filterItemBoxVmButton}> + Xem thêm + + + + ) +} + +const OtherFilterListT = () => { + const [openAllFilter, setOpenAllFilter] = useState(true); + const dataPriceFilter = [ + { + url: '/', + name: '30W - 100W', + is_current: 1, + }, + { + url: '/', + name: '100W - 300W', + is_current: 0, + }, + { + url: '/', + name: '300W - 500W', + is_current: 0, + }, + { + url: '/', + name: '500W - 1000W', + is_current: 0, + }, + { + url: '/', + name: '1000W - 2000W', + is_current: 0, + }, + { + url: '/', + name: '2000W - 5000W', + is_current: 0, + }, + ] + return ( + + Công xuất + + { + dataPriceFilter.map((item, index) => + + ) + } + + + setOpenAllFilter(!openAllFilter)} style={styles.filterItemBoxVmButton}> + Xem thêm + + + + ) +} + +const FilterItem = (props: { name: string, isCurrent: number }) => { + const { name, isCurrent } = props; + return ( + 0 ? [styles.filterItem, styles.filterItemActive] : styles.filterItem} onPress={() => Alert.alert('danh muc sp')}> + {name} + { + isCurrent > 0 ? + + + + + : + } + + ); +} + +const ListCatCategory = () => { + const dataCat = [ + { + id: 1, + url: '/', + name: 'Ấm siêu tốc' + }, + { + id: 2, + url: '/', + name: 'Bàn là' + }, + { + id: 3, + url: '/', + name: 'Bếp từ' + }, + { + id: 4, + url: '/', + name: 'Bếp hồng ngoại' + }, + { + id: 5, + url: '/', + name: 'Bình thủy điện' + }, + ] + let dataCatLength = dataCat.length; + return ( + + + { + dataCat.map((item, index) => + + {item.name} + + ) + } + + + ) +} + +const ProductCategory = () => { + const navigation = useNavigation(); + return ( + + + + + + + + + + navigation.navigate('ProductDetail')}> + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + + + + + + + + Nồi áp suất inox 304 cao cấp Nagakawa NAG1452 (5L) + 1.292.000đ + + 1.634.000đ + -30% + + + *3 khuyến mãi trị giá + 500.000đ + + + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + sortAndFilter: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + position: 'relative', + borderBottomColor: '#e1e1e1', + borderBottomWidth: 1, + zIndex: 5, + }, + boxSort: { + zIndex: 1, + }, + boxSortButton: { + flexDirection: 'row', + alignItems: 'center', + height: 30, + }, + boxSortButtonTextBold: { + fontSize: 14, + fontWeight: 'bold' + }, + boxSortButtonActive: {}, + boxSortButtonIcon: { + marginLeft: 5, + }, + boxSortList: { + width: winWidth, + paddingHorizontal: 10, + position: 'absolute', + left: -10, + top: 40, + display: 'none', + }, + boxSortListActive: { + display: 'flex', + }, + boxSortItem: { + paddingVertical: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + boxSortItemActive: { + borderBottomColor: '#D8262F', + borderBottomWidth: 1, + }, + boxSortItemText: { + fontSize: 14, + }, + boxSortItemTextActive: { + color: '#D8262F' + }, + boxSortItemTextIcon: { + color: '#D8262F' + }, + boxFilter: { + width: 70, + height: 30, + alignItems: 'center', + flexDirection: 'row', + justifyContent: 'flex-end', + borderLeftWidth: 1, + borderLeftColor: '#e1e1e1' + }, + boxFilterButton: { + flexDirection: 'row', + alignItems: 'center' + }, + boxFilterIcon: { + fontSize: 18, + marginRight: 10, + }, + boxFilterText: { + fontSize: 14, + }, + filterItemContent: { + flex: 1, + justifyContent: 'flex-end', + alignItems: 'flex-end', + backgroundColor: 'rgba(0,0,0,0.5)', + position: 'relative', + zIndex: 1, + flexDirection: 'row', + }, + filterItemContentBg: { + width: winWidth - 300, + height: winHeight, + }, + headerPopFilter: { + width: '100%', + paddingTop: 30, + paddingHorizontal: 10, + flexDirection: 'row', + alignItems: 'center', + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1', + position: 'relative', + }, + filterItemListClose: { + width: 40, + height: 40, + lineHeight: 40, + fontSize: 26, + }, + headerPopFilterText: { + textAlign: 'center', + fontSize: 17, + fontWeight: 'bold', + width: '100%', + paddingRight: 40, + }, + filterItemList: { + width: 300, + height: winHeight, + backgroundColor: '#fff', + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 2.22, + shadowRadius: 2.22, + elevation: 3, + overflow: 'hidden', + position: 'relative', + zIndex: 2, + }, + listBoxFilter: { + width: '100%', + height: winHeight - 130, + }, + filterViewAll: { + width: '100%', + height: 60, + paddingHorizontal: 10, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + filterViewAllButton: { + width: '100%', + height: 40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#D8262F', + borderRadius: 5, + }, + filterViewAllButtonText: { + color: '#fff', + }, + filterItemListTitleName: { + fontWeight: 'bold', + marginBottom: 10, + }, + filterItemBoxList: { + width: '100%', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'space-between', + alignItems: 'center', + }, + filterItem: { + width: 135, + height: 40, + alignItems: 'center', + flexDirection: 'row', + justifyContent: 'center', + backgroundColor: 'rgba(0,0,0,0.2)', + borderRadius: 3, + marginBottom: 10, + borderWidth: 1, + borderColor: 'rgba(0,0,0,0.2)', + position: 'relative', + }, + filterItemActive: { + borderColor: '#D8262F' + }, + filterItemName: { + width: '100%', + textAlign: 'center' + }, + boxProductCategory: { + width: winWidth, + }, + filterItemBox: { + width: '100%', + padding: 10, + borderBottomWidth: 1, + borderBottomColor: '#e1e1e1', + }, + filterCurrent: { + backgroundColor: 'rgba(0,0,0,0)', + position: 'absolute', + right: 0, + top: 0, + }, + filterCurrentImg: { + width: 24, + height: 22, + }, + filterCurrentIcon: { + position: 'absolute', + zIndex: 1, + color: '#fff', + right: 0, + top: 0, + }, + filterItemBoxInput: { + width: '100%', + marginTop: 10, + }, + filterItemBoxInputText: { + marginBottom: 10, + }, + filterItemBoxInputCtList: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + filterItemBoxInputCt: { + width: 135, + height: 40, + paddingHorizontal: 10, + borderColor: '#e1e1e1', + borderWidth: 1, + borderRadius: 3, + }, + filterItemBoxListHeight: { + width: '100%', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'space-between', + alignItems: 'center', + maxHeight: 100, + overflow: 'hidden' + }, + filterItemBoxListHeightAuto: { + maxHeight: 'auto' + }, + filterItemBoxVm: { + width: '100%', + marginBottom: 10, + flexDirection: 'row', + justifyContent: 'center', + marginTop: 10, + }, + filterItemBoxVmButton: { + width: 128, + height: 40, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + borderWidth: 1, + borderColor: '#56C4F5', + borderRadius: 3, + }, + filterItemBoxVmButtonText: { + color: '#56C4F5', + fontSize: 14, + }, + boxCatCategory: { + padding: 10, + }, + boxCatCategoryItem: { + display: 'flex', + padding: 10, + backgroundColor: 'rgba(0,0,0,0.08)', + marginRight: 10, + }, + boxCatCategoryItemLast: { + marginRight: 0, + }, + boxCatCategoryItemText: { + fontSize: 14, + }, + pContainer: { + width: '100%', + padding: 10, + }, + pImgContent: { + width: '100%', + position: 'relative', + paddingTop: '100%', + marginBottom: 10, + }, + pNew: { + width: 24, + height: 18, + position: 'absolute', + zIndex: 6, + top: 0, + left: 0, + }, + pImg: { + width: '100%', + position: 'absolute', + zIndex: 5, + top: 0, + left: 0, + right: 0, + bottom: 0, + }, + pTraGop: { + width: 68, + height: 16, + position: 'absolute', + zIndex: 6, + bottom: 0, + left: '50%', + transform: [{ translateX: -34 }], + }, + pInfo: { + width: '100%', + }, + pName: { + width: '100%', + fontSize: 14, + marginBottom: 10, + }, + pPrice: { + width: '100%', + fontSize: 18, + marginBottom: 10, + color: '#D8262F', + fontWeight: 'bold', + }, + pAllSale: { + width: '100%', + flexDirection: 'row', + alignItems: 'center', + marginBottom: 10, + }, + pOldPrice: { + color: '#A1A1A1', + fontSize: 14, + textDecorationLine: 'line-through', + }, + pDiscount: { + paddingVertical: 5, + backgroundColor: '#D8262F', + width: 50, + textAlign: 'center', + color: '#fff', + borderRadius: 5, + overflow: 'hidden', + marginLeft: 5, + }, + pOffer: { + flexDirection: 'row', + alignItems: 'center', + }, + pOfferText: { + fontSize: 10, + color: '#A1A1A1', + }, + pOfferPrice: { + fontSize: 10, + color: '#D8262F', + }, + pItem: { + width: winWidth / 2 - 15, + marginBottom: 10, + borderRadius: 5, + overflow: 'hidden', + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.27, + shadowRadius: 4.65, + elevation: 6, + }, + boxProductCategoryList: { + width: winWidth, + padding: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + flexWrap: 'wrap', + backgroundColor: '#f2f2f2', + }, +}); diff --git a/screens/Register.tsx b/screens/Register.tsx index 0fdf8d2..45ba724 100644 --- a/screens/Register.tsx +++ b/screens/Register.tsx @@ -8,81 +8,81 @@ import { Text, View } from '../components/Themed'; import { TextInput } from 'react-native-gesture-handler'; import { useNavigation } from '@react-navigation/native'; import { Checkbox } from 'react-native-paper'; +import Person from "react-native-bootstrap-icons/icons/person"; +import Telephone from "react-native-bootstrap-icons/icons/telephone"; +import Envelope from "react-native-bootstrap-icons/icons/envelope"; +import Geoalt from "react-native-bootstrap-icons/icons/geo-alt"; +import Lock from "react-native-bootstrap-icons/icons/lock"; export default function Register() { const [checkedRegis, setCheckedRegis] = useState(false); + const [checkedRegisBaoMat, setCheckedRegisBaoMat] = useState(false); const navigation = useNavigation(); return ( Tạo tài khoản Nagakawa - - Bạn đã có tài khoản? - navigation.navigate('Login')}> - Đăng nhập - - tại đây + + + - - - Số điện thoại* - + + + + + + + + + + + + + + + + + + + + + + + setCheckedRegis(!checkedRegis)} /> - - Email đăng ký* - + Tôi muốn nhận các thông tin khuyến mãi từ Nagakawa + + + Đăng ký + + + + setCheckedRegisBaoMat(!checkedRegisBaoMat)} /> - - Địa chỉ* - - - - Mật khẩu* - - - - Nhập lại mật khẩu* - - - - Họ tên* - - - - Mã xác nhận - - - - [ Xem mã khác ] - - - - - - - setCheckedRegis(!checkedRegis)} /> - - Tôi muốn nhận các thông tin khuyến mãi từ Nagakawa - - - Đăng ký - - - Hoặc đăng nhập bằng - - - - - - - - - - + + Tôi đồng ý với các + + chính sách bảo mật Nagakawa + + + Hoặc + + + + + + + + + + + + + @@ -100,52 +100,36 @@ const styles = StyleSheet.create({ }, boxRegister: { width: winWidth, + minHeight: winHeight - 130, padding: 10, - backgroundColor: 'rgba(0,0,0,0)', + backgroundColor: '#fff', }, boxRegisterTitle: { - marginBottom: 15, - fontSize: 18, - fontWeight: 'bold', - }, - boxRegisterNote: { - marginBottom: 10, - flexDirection: 'row', - justifyContent: 'flex-end', - alignItems: 'center', - backgroundColor: 'rgba(0,0,0,0)' - }, - green: { - color: '#008445', - }, - boxRegisterList: { - width: '100%', - padding: 10, + marginBottom: 20, + textAlign: 'center', + fontWeight: '700' }, boxRegisterItem: { - width: '100%', - marginBottom: 10, - }, - boxRegisterItemText: { - fontWeight: 'bold', - marginBottom: 5, - }, - boxRegisterItemInput: { - width: '100%', - height: 40, - borderColor: '#e1e1e1', - borderWidth: 1, - borderRadius: 5, - }, - boxRegisterCapcha: { flexDirection: 'row', alignItems: 'center', + borderBottomWidth: 1, + borderBottomColor: '#ABABAB', + paddingBottom: 5, + marginBottom: 10, + }, + boxRegisterItemIcon: { + marginRight: 10, + color: '#999' + }, + boxRegisterItemInput: { + width: winWidth - 49, + height: 30, }, - boxRegisterCapchaOther: {}, checkKmRegis: { flexDirection: 'row', marginBottom: 10, marginTop: 10, + alignItems: 'center', }, checkKmRegisCheck: { width: 36, @@ -154,7 +138,9 @@ const styles = StyleSheet.create({ borderColor: '#e1e1e1', marginRight: 10, }, - checkKmRegisText: {}, + checkKmRegisText: { + width: winWidth - 66, + }, boxLoginSubmit: { width: '100%', height: 40, @@ -170,40 +156,53 @@ const styles = StyleSheet.create({ fontWeight: 'bold', color: '#fff' }, - boxLoginOther: { + colorGreen: { + color: '#008445', + }, + boxLoginLineChia: { marginBottom: 20, flexDirection: 'row', - justifyContent: 'center', - }, - boxLoginOtherText: {}, - boxLoginSocial: { - flexDirection: 'row', - justifyContent: 'center', alignItems: 'center', + justifyContent: 'center' }, - boxLoginSocialItem: { - width: 34, - height: 34, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - borderRadius: 5, + boxLoginLine: { + width: 80, + height: 1, + backgroundColor: '#e1e1e1', + }, + boxLoginLineChiaText: { marginHorizontal: 5, - backgroundColor: '#3b5998', + color: '#777', + fontWeight: '300', }, - boxLoginSocialFace: {}, - boxLoginSocialGoogle: { - backgroundColor: '#df4a32', + loginSocial: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', }, - boxLoginSocialZalo: { - backgroundColor: '#0f8edd', + loginSocialItem: { + width: 40, + height: 40, + borderRadius: 20, + backgroundColor: '#3B5998', + marginHorizontal: 8, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', }, - boxLoginSocialIcon: { - fontSize: 16, - color: '#fff', + loginSocialItemIcon: { + fontSize: 18, + color: '#fff' }, - boxLoginSocialImg: { - width: 16, - height: 16, + loginSocialItemImg: { + width: 22, + height: 24, + }, + loginSocialItemFace: {}, + loginSocialItemGoogle: { + backgroundColor: '#DF4A32', + }, + loginSocialItemZalo: { + backgroundColor: '#0F8EDD' }, }); diff --git a/screens/SettingAccount.tsx b/screens/SettingAccount.tsx new file mode 100644 index 0000000..9ffdf79 --- /dev/null +++ b/screens/SettingAccount.tsx @@ -0,0 +1,160 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native'; +import { LinearGradient } from 'expo-linear-gradient'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; +import EditScreenInfo from '../components/EditScreenInfo'; +import { Text, View } from '../components/Themed'; +import { TextInput } from 'react-native-gesture-handler'; +import { useNavigation } from '@react-navigation/native'; +import { Switch } from 'react-native-paper'; + +export default function SettingAccount() { + const navigation = useNavigation(); + return ( + + + + + + + + ); +} + +const HeaderAll = () => { + const navigation = useNavigation(); + return ( + + navigation.navigate('AccountHome')}> + + + Cài đặt + + ) +} + +const ContentSettingAccount = () => { + const [isSwitchOn, setIsSwitchOn] = useState(false); + return ( + + + + Cho phép nhận thông báo + setIsSwitchOn(!isSwitchOn)} /> + + + + + + Chính sách + + + + + Trung tâm hỗ trợ + + + + + Phản hồi + + + + + Quy chế hoạt động + + + + + Giới thiệu Nagakawa + + + + + + Đăng xuất + + + + ) +} + +const winWidth = Dimensions.get('window').width; //full width +const winHeight = Dimensions.get('window').height; //full height + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + headerAll: { + flexDirection: 'row', + alignItems: 'center', + padding: 10, + }, + goBack: { + width: 50, + height: 40, + flexDirection: 'row', + alignItems: 'center', + }, + goBackIcon: { + fontSize: 24, + }, + headerAllTitle: { + fontWeight: '700', + width: winWidth - 70, + textAlign: 'center' + }, + boxSettingAccountAll: { + width: winWidth, + height: winHeight, + paddingTop: 30, + }, + boxSettingAccount: { + width: winWidth, + backgroundColor: '#f2f2f2', + height: '100%' + }, + boxSettingAccountList: { + marginBottom: 10, + }, + boxSettingAccountListToggleItem: { + flexDirection: 'row', + alignItems: 'center', + padding: 10, + justifyContent: 'space-between', + }, + boxSettingAccountItemTextToggle: {}, + boxSettingAccountItemToggle: {}, + boxSettingAccountItem: { + width: '100%', + borderBottomWidth: 1, + borderBottomColor: '#f2f2f2', + padding: 10, + }, + boxSettingAccountItemText: {}, + boxSettingAccountListLogout: { + padding: 10, + backgroundColor: 'rgba(0,0,0,0)', + }, + boxSettingAccountLogout: { + width: '100%', + height: 40, + borderColor: '#D8262F', + borderWidth: 1, + borderRadius: 5, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#fff', + }, + boxSettingAccountLogoutText: { + fontWeight: '700', + fontSize: 14, + textTransform: 'uppercase', + color: '#D8262F', + }, +});