From d5651702a46c7cb576ab0676f109b191f64682a5 Mon Sep 17 00:00:00 2001
From: syneffort <syneffort@gmail.com>
Date: Wed, 13 Mar 2024 14:08:04 +0900
Subject: [PATCH] checkout page refactoring

---
 .../BlazingPizza/Pages/Checkout.razor         |  21 ++-----
 .../BlazingPizza/Shared/AddressEditor.razor   |  53 ++++++++++++++++++
 .../BlazingPizza/Shared/OrderReview.razor     |  21 +++++++
 MyFirstBlazor/BlazingPizza/pizza.db           | Bin 53248 -> 53248 bytes
 MyFirstBlazor/BlazingPizza/pizza.db-shm       | Bin 32768 -> 32768 bytes
 MyFirstBlazor/BlazingPizza/pizza.db-wal       | Bin 57712 -> 28872 bytes
 6 files changed, 79 insertions(+), 16 deletions(-)
 create mode 100644 MyFirstBlazor/BlazingPizza/Shared/AddressEditor.razor
 create mode 100644 MyFirstBlazor/BlazingPizza/Shared/OrderReview.razor

diff --git a/MyFirstBlazor/BlazingPizza/Pages/Checkout.razor b/MyFirstBlazor/BlazingPizza/Pages/Checkout.razor
index ca0fae0..df63b8f 100644
--- a/MyFirstBlazor/BlazingPizza/Pages/Checkout.razor
+++ b/MyFirstBlazor/BlazingPizza/Pages/Checkout.razor
@@ -9,23 +9,12 @@
     <div class="checkout-cols">
         <div class="checkout-order-details">
             <h4>Review order</h4>
-            @foreach (var pizza in Order.Pizzas)
-            {
-                <p>
-                    <string>
-                        @(pizza.Size)"
-                        @pizza.Special.Name
-                        (£@pizza.GetFormattedTotalPrice())
-                    </string>
-                </p>
-            }
+            <OrderReview Order="Order"/>
+        </div>
 
-            <p>
-                <string>
-                    Total price:
-                    £@Order.GetFormattedTotalPrice()
-                </string>
-            </p>
+        <div class="checkout-delivery-address">
+            <h4>Deliver to...</h4>
+            <AddressEditor Address="Order.DeliveryAddress"/>
         </div>
     </div>
 
diff --git a/MyFirstBlazor/BlazingPizza/Shared/AddressEditor.razor b/MyFirstBlazor/BlazingPizza/Shared/AddressEditor.razor
new file mode 100644
index 0000000..006bbed
--- /dev/null
+++ b/MyFirstBlazor/BlazingPizza/Shared/AddressEditor.razor
@@ -0,0 +1,53 @@
+<div class="form-field">
+    <label>Name:</label>
+    <div>
+        <input @ref="startName" @bind="Address.Name" />
+    </div>
+</div>
+
+<div class="form-field">
+    <label>Line 1:</label>
+    <div>
+        <input @bind="Address.Line1" />
+    </div>
+</div>
+
+<div class="form-field">
+    <label>Line 2:</label>
+    <div>
+        <input @bind="Address.Line2" />
+    </div>
+</div>
+
+<div class="form-field">
+    <label>City:</label>
+    <div>
+        <input @bind="Address.City" />
+    </div>
+</div>
+
+<div class="form-field">
+    <label>Region:</label>
+    <div>
+        <input @bind="Address.Region" />
+    </div>
+</div>
+
+<div class="form-field">
+    <label>Postal code:</label>
+    <div>
+        <input @bind="Address.PostalCode" />
+    </div>
+</div>
+
+@code {
+    [Parameter] public Address Address { get; set; }
+
+    private ElementReference startName;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await startName.FocusAsync();
+    }
+}
diff --git a/MyFirstBlazor/BlazingPizza/Shared/OrderReview.razor b/MyFirstBlazor/BlazingPizza/Shared/OrderReview.razor
new file mode 100644
index 0000000..0d76000
--- /dev/null
+++ b/MyFirstBlazor/BlazingPizza/Shared/OrderReview.razor
@@ -0,0 +1,21 @@
+@foreach (var pizza in Order.Pizzas)
+{
+    <p>
+        <strong>
+            @(pizza.Size)"
+            @pizza.Special.Name
+            (£@pizza.GetFormattedTotalPrice())
+        </strong>
+    </p>
+}
+
+<p>
+    <strong>
+        Total price:
+        (£@Order.GetFormattedTotalPrice())
+    </strong>
+</p>
+
+@code {
+    [Parameter] public Order Order { get; set; }
+}
diff --git a/MyFirstBlazor/BlazingPizza/pizza.db b/MyFirstBlazor/BlazingPizza/pizza.db
index b3f91f184ed95f71d2e5db585cedaaaa818b22c2..7480915960f2b84a5b843694c659cffa315a3213 100644
GIT binary patch
delta 354
zcmZ9HJxc>Y5QcZN7k2Y???%&DhzW>YK5oyCOBxliR`Lf_P=b}1V3R^pr;}^a83+Uf
z(ZlT`Vk4Fo0U=ciu?m7>VP)aQSUJTo%sf2I+i0^!n+29k2?PXRc*6?@c)|mE2y{la
zkPt$UNeM3W-CR=6i>SqB==Nc~zE_jx7K?0E_YbPIC^PHHDD-E3DxDJch+v3Yv~Yql
z@<`YtqwU+984)IAgQ|jB%og0N<E9<A<f>Akm~)g@T=qPX<_1~+hp3g3qjJhqOOD6=
z{LV9zsQ7$$*1|C=#=VMZA;W}HDnfA%Geszm>-tgCyn{Z$x5@c|5njz>1N3!rt%rD+
z8D5M#=l<|~!C1RKZyW0+y2g6?hsa+9{>^pSmgtPbUEm#$=x94QLu`BwNsC1&^woV?
F{s5wTQg8qO

delta 189
zcmZozz}&Eac>{}p02}`i2L5mSZ}=ba-{3#Te`K?u!Uq1$N94H#RM@y!m?aqlGOMZ*
zi}@HB7`Qq8i&9dHin*A9!Vo6g=1=-U3P3~j8Tjw<@8+MuU&<fEufJJQK$?HDe*9Ht
zKK`o7><O|!fiV8fRry^Ywf7kK{{XH0!2gQ>3IDy#f)1znC*PZ|22{IgGW!CM+CKit
fo7M+$@$s(%8T+39*k+*(6Zt0w@NZtXKS%%oDy}^K

diff --git a/MyFirstBlazor/BlazingPizza/pizza.db-shm b/MyFirstBlazor/BlazingPizza/pizza.db-shm
index 67f4617c8b67dd7cc6ee717c7313c540aec0de08..de5ec21dece7d7190b033715375ccdd13885a3b9 100644
GIT binary patch
delta 189
zcmZo@U}|V!s+V}A%K!t63=9J7Kn^buFKP`ii`YD4^Q5mztK(<Pn!jOpNua6Z9z9ak
z!^{Sm`yUBF#hDn`CpIc?JYeHG@q!E^<Hm!3nHZTi9{kC{$P8w)fZ42IHXE2^-*`}5
F1^`-3J`?}|

delta 198
zcmZo@U}|V!s+V}A%K!pQK+MR%AixKtd4c$U{i4}z-#!@0o;>@l>)hMqgyYiB56no&
zB~?ApC@=t-`yUBFg@M*iY*gOZ5#h?r$iT62;cq5pCI-%p3%_$PGc$03`78|FAU-4O
W#`%AlnAsS3!J_O8d>a>v$^ZZn<U#%b

diff --git a/MyFirstBlazor/BlazingPizza/pizza.db-wal b/MyFirstBlazor/BlazingPizza/pizza.db-wal
index 409763932332ccfd0116742339cf4fe591266d33..ab20c49432cc597807e4f48f5f08366088b9ef8c 100644
GIT binary patch
delta 584
zcmexxi21}r#vt>0wk8JMM-mJS0t_H9>8sM}_!+b2H*o$~dc7xOB~XY7S$tpZt?M-h
zmvr$01v&Za8Th~Pzu|wxe}n%V{}KLO{2Tb|HwLEi8|rg%Fer*j%1Vo-q!lNoq$QUb
z85tQH0%2NWadKjDN^%*HFf=kWE>1~HOH4MNJfR^%0A~4@eR0Pa@@_V54iGrUpTfz-
z!Ys)ckXcogSS$pzmYdVRC?&P1n2Q-G3}JHeFfz+B1{b6zXC~$pa{v{wAv=2aw++|(
zu1@C$JDTq}1OGk#-TX87OZkKN_4#@EUhy5@7`T>CS&@^Kfx(&4$iT=%*T7iU&{)CH
z#LB?f%Fsa1(8Ao<(9nW&^RM}GjN&kN=5PqTJM>=H5M-_pfAD1eg^DcvvHZas1J(IO
zID}Xk7#SHkIe0h(AuLv&$^9D^YQc01sa(ss5pT7O3#glu{|p2FA7Eg9;D5#c1n9mS
z{FnI8Y~JXwiGOlI01F2vCo3}}BL@eNV*t0lRCMw&hm9W#Kn4i$&zc;65NQ1Z{#hFX
z^PswfK)N^uC;z*UWCOF-ETDDK<{6tKAiAc50%Ilrd;Vkmi}_yyEj_^h6=?Yx{w@6L
j_~-IJ=Kl?h)#)1pv%x0v0X+pYkyQ{xG6_sBEC>eximke?

delta 774
zcmX@{knzJIW<T?Kwk8JMM-mJS0t_G^d-CkJu5)jbPj5M6@Vu)i9w@|wEdFOvwnOIo
zo2tA(L3aLK4E*2t-|#=;zrlZw{|NuC&4~g__$Pnj_Y;7b)AHl&=Y6|Q7H$p@ILDvB
z&c(tk$rzAXRh3xG4>W<B)4wPswWyej87K^4vhy%9%Q6NRq$X!3<`i=P6|o`Pzw)hO
zdB^H~vmy5LGVtHy-_1XRzmz|SU!R|MW8!zd$))<g#bMUVysMXLUf*a1QqIp`IJw<G
zeq*9H|KyMM)74;V{_Xmu@w8*j1umc(cK#a-{C|L+`oRB+{|V6W8$d5@<eyj|IJqFe
z0B-Ed_5aU(+nmk~(!$TbX7cs`d7!#B{>d>3F=jAxJ=$-3zw~^O2~o5X<kXe?@A;4M
zzvREfe}MlhFwoBMZ{c6Z|Cs+bIOv-BCl?lk8vxBj3GzS(>jTSJ1w281;NahY7UcXJ
zfHu$IpZtP90v_mTf$J_`*)07O9Oy|LNP!NDWGsQsfj`i1FVD%nq<=#O>;k@5Xo1f6
zYGdLhzRf}Ua*Xf*5-eUCs?Bis6-b8we>yPS6*nf@^G|+mzfc1fKKpzUp06!PI}8dR
z4*pAM;m&^v8uFZz;|o|P=LZ<V4L`)$FJe%~aT%mhfPWb<^c8_>>-fP6qZ4A`3TH2>
b|8Ml+TN^~-;>qU|WLRN=UClo^yC4<-&_^pA