41 | Your Cart
42 |
43 | ({cartSize} {cartSize === 1 ? 'item' : 'items'})
44 |
45 |
46 |
65 | );
66 | };
67 |
68 | export default Cart;
69 |
--------------------------------------------------------------------------------
/src/Store/CartContext.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2022 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import React from 'react';
18 |
19 | import { CartItemDetails } from '../interfaces/CartItemDetails';
20 |
21 | // Create an empty cart
22 | let cart: CartItemDetails[] = [];
23 |
24 | // Add the empty cart to the current context
25 | const CartContext = React.createContext({
26 | cart,
27 | setCart(cart: CartItemDetails[]) {
28 | this.cart = cart;
29 | }
30 | });
31 |
32 | export { CartContext };
33 |
--------------------------------------------------------------------------------
/src/Store/CartItem.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2022 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import React, { useContext } from 'react';
18 | import { Link } from 'react-router-dom';
19 | import { Card, CardContent, IconButton, InputLabel, MenuItem, Select, Typography } from '@mui/material';
20 | import { Close } from '@mui/icons-material';
21 |
22 | import { CartContext } from './CartContext';
23 | import { CartItemDetails } from '../interfaces/CartItemDetails';
24 |
25 | import './List.css';
26 |
27 | /**Properties for the CartItem component */
28 | interface Props {
29 | cartItem: CartItemDetails;
30 | }
31 |
32 | /**CartItem React component
33 | *
34 | * @param {Props} props The details of the item in the cart
35 | */
36 | const CartItem: React.FC
47 | {cart.map((item, index) => (
48 |
51 |
52 |
53 | Total:
54 |
55 | ${cart.reduce((total, cartItem) => total + cartItem.quantity * cartItem.item.price, 0).toFixed(2)}
56 |
57 |
58 |
59 |
60 |
63 |
64 |
94 |
95 |
96 | {props.cartItem.item.title}
97 |
98 |
99 |
100 |
102 |
103 |
104 |
105 | Qty
106 |
107 |
119 | Size
120 | {props.cartItem.size}
121 |
122 | ${(props.cartItem.quantity * props.cartItem.item.price).toFixed(2)}
123 |
124 |
125 |
83 |
84 |
85 |
86 | Automatic checkout
87 |
88 |
106 |
107 |
108 | Guest checkout
109 |
110 |
233 |
234 |
235 | );
236 | };
237 |
238 | export default Checkout;
239 |
--------------------------------------------------------------------------------
/src/Store/Confirmation.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2022 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import React from 'react';
18 | import { useNavigate } from 'react-router-dom';
19 | import { Button, Typography } from '@mui/material';
20 |
21 | import './Status.css';
22 |
23 | /**Properties for the Confirmation component */
24 | interface Props {}
25 |
26 | /**Confirmation React component
27 | *
28 | * @param {Props} props The details of the order confirmation
29 | */
30 | const Confirmation: React.FC
89 |
90 | Skip the forms and check out with Google Pay!
91 |
92 |
93 |
104 |
105 |
94 | console.error(error)}
100 | onPaymentDataChanged={paymentData => getUpdatedPaymentData(paymentRequest, paymentData)}
101 | />
102 |
103 |
111 |
112 | Shipping address
113 |
114 |
115 |
116 |
125 |
126 |
135 |
136 |
145 |
146 |
154 |
155 |
164 |
165 |
167 |
168 |
177 |
178 |
187 |
188 |
193 |
194 |
195 |
196 |
197 | Payment method
198 |
199 |
200 |
201 |
203 |
204 |
206 |
207 |
209 |
210 |
219 |
220 |
225 |
226 |
227 |
228 |
231 |
232 |
36 |
51 | );
52 | };
53 |
54 | export default Confirmation;
55 |
--------------------------------------------------------------------------------
/src/Store/GooglePay.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2022 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { paymentRequest } from '../config/GooglePay';
18 | import { shippingOptions } from '../config/ShippingOptions';
19 |
20 | /**Calculate and return the total price
21 | *
22 | * @param {google.payments.api.DisplayItem[]} displayItems The items in the user's cart
23 | * @returns {number} The total price
24 | */
25 | function calculateTotalPrice(displayItems: google.payments.api.DisplayItem[]): number {
26 | return displayItems.reduce((total, item) => total + Number(item.price), 0);
27 | }
28 |
29 | /**Build the Google Pay payment request
30 | *
31 | * @param {google.payments.api.DisplayItem[]} displayItems The items in the user's cart
32 | * @returns {google.payments.api.PaymentDataRequest} The payment data request
33 | */
34 | function buildPaymentRequest(displayItems: google.payments.api.DisplayItem[]): google.payments.api.PaymentDataRequest {
35 | return {
36 | ...paymentRequest,
37 | transactionInfo: {
38 | ...paymentRequest.transactionInfo,
39 | displayItems: [...displayItems],
40 | totalPrice: calculateTotalPrice(displayItems).toFixed(2)
41 | }
42 | };
43 | }
44 |
45 | /**Get the updated payment data from the payment request
46 | *
47 | * @param {google.payments.api.PaymentDataRequest} paymentRequest The original payment request
48 | * @param {google.payments.api.IntermediatePaymentData} paymentData The new intermediate payment data
49 | * @returns {google.payments.api.PaymentDataRequestUpdate} The updated payment request
50 | */
51 | function getUpdatedPaymentData(
52 | paymentRequest: google.payments.api.PaymentDataRequest,
53 | paymentData: google.payments.api.IntermediatePaymentData
54 | ): google.payments.api.PaymentDataRequestUpdate {
55 | // Check if a shipping option was chosen
56 | if (paymentData.shippingOptionData?.id) {
57 | // Get the shipping option from the available choices
58 | const shippingOption = shippingOptions.find(option => option.id === paymentData.shippingOptionData!.id);
59 |
60 | if (shippingOption) {
61 | // Update the shopping cart with the chosen shipping option
62 | const displayItems: google.payments.api.DisplayItem[] = [
63 | ...(paymentRequest.transactionInfo.displayItems || []),
64 | {
65 | label: shippingOption.label,
66 | price: shippingOption.price.toFixed(2),
67 | type: 'SHIPPING_OPTION'
68 | }
69 | ];
70 |
71 | // Return the updated transaction info and display items
72 | return {
73 | newTransactionInfo: {
74 | ...paymentRequest.transactionInfo,
75 | totalPrice: calculateTotalPrice(displayItems).toFixed(2),
76 | displayItems
77 | }
78 | };
79 | }
80 | }
81 |
82 | // The shipping option didn't change...return no changes
83 | // In a real-world scenario, this should also check for shopping cart updates,
84 | // promotion codes being added, and other use-cases
85 | return {};
86 | }
87 |
88 | export { buildPaymentRequest, getUpdatedPaymentData };
89 |
--------------------------------------------------------------------------------
/src/Store/Header.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2022 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https: //www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | .App .Header {
18 | background-color: #fff;
19 | color: #000;
20 | }
21 |
--------------------------------------------------------------------------------
/src/Store/Header.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2022 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import React, { useContext, useEffect, useMemo, useState } from 'react';
18 | import { Link, useNavigate } from 'react-router-dom';
19 | import { AppBar, Badge, IconButton, Menu, MenuItem, Toolbar, Typography } from '@mui/material';
20 | import { Menu as MenuIcon, ShoppingCart } from '@mui/icons-material';
21 |
22 | import { CartContext } from './CartContext';
23 | import { CategoryDetails } from '../interfaces/CategoryDetails';
24 | import { StoreData } from './StoreData';
25 |
26 | import './Header.css';
27 |
28 | /**Header React component */
29 | export default function Header() {
30 | const navigate = useNavigate();
31 |
32 | // Manages store items, categories, etc.
33 | const storeData = useMemo(() => new StoreData(), []);
34 |
35 | // Current shopping cart from context
36 | const { cart } = useContext(CartContext);
37 |
38 | // Get the anchor element from the current state
39 | const [anchorEl, setAnchorEl] = useState
37 | Success
38 |
39 | Congratulations, on your purchase. The order has been received and is being processed.
40 |
41 |
42 | This is for demo purposes only. You have not been charged, the order is not being processed.
43 |
44 |
50 |
45 |
48 |
49 |
38 | {props.categories.map(cat => (
39 |
42 | );
43 | };
44 |
45 | export default Home;
46 |
--------------------------------------------------------------------------------
/src/Store/ItemDetails.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2022 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | .ItemDetails {
18 | text-align: left;
19 | margin: 20px;
20 | }
21 |
22 | .ItemDetails .container {
23 | max-width: 1000px;
24 | margin: auto;
25 | }
26 |
27 | .ItemDetails .content {
28 | margin-top: 10px;
29 | }
30 |
31 | .image-container {
32 | position: relative;
33 | padding-bottom: 100%;
34 | height: 0;
35 | overflow: hidden;
36 | }
37 |
38 | .item-details-image {
39 | position: absolute;
40 | top: 0;
41 | left: 0;
42 | width: 100%;
43 | height: 100%;
44 | display: block;
45 | }
46 |
47 | .ItemDetails .pickers {
48 | display: flex;
49 | flex-direction: column;
50 | padding: 10px 0;
51 | }
52 |
53 | .ItemDetails .pickers .field-set {
54 | display: flex;
55 | flex-direction: row;
56 | padding: 10px 0;
57 | }
58 |
59 | .ItemDetails .pickers .field-set .label {
60 | margin-top: 6px;
61 | width: 40%;
62 | }
63 |
64 | .ItemDetails .pickers .field-set .input {
65 | flex-grow: 1;
66 | }
67 |
68 | .ItemDetails .description {
69 | margin-bottom: 30px;
70 | }
71 |
72 | .ItemDetails .description h6 {
73 | margin-bottom: 10px;
74 | }
75 |
76 | .ItemDetails .buttons>* {
77 | width: 100%;
78 | margin: 4px 0;
79 | }
80 |
81 | .ItemDetails .snackbar-info {
82 | color: #000;
83 | background-color: #fff;
84 | }
85 |
--------------------------------------------------------------------------------
/src/Store/ItemDetails.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2022 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import { useContext, useEffect, useMemo, useState } from 'react';
18 | import { Button, Grid, InputLabel, MenuItem, Select, Snackbar, Typography } from '@mui/material';
19 | import { useNavigate, useParams } from 'react-router-dom';
20 | import qs from 'querystring';
21 |
22 | import GooglePayButton from '@google-pay/button-react';
23 |
24 | import { buildPaymentRequest, getUpdatedPaymentData } from './GooglePay';
25 | import { CartContext } from './CartContext';
26 | import { ItemDetails } from '../interfaces/ItemDetails';
27 | import { StoreData } from './StoreData';
28 |
29 | import './ItemDetails.css';
30 |
31 | /**Unescape HTML content */
32 | function unescapeHtml(text: string) {
33 | const elem = document.createElement('textarea');
34 | elem.innerHTML = text;
35 | return elem.textContent || '';
36 | }
37 |
38 | /**ItemDetails React component */
39 | export default function ItemDetails() {
40 | const navigate = useNavigate();
41 |
42 | // Manages store items, categories, etc.
43 | const storeData = useMemo(() => new StoreData(), []);
44 |
45 | // Parse querystring params
46 | const query = qs.parse(window.location.search.replace(/^\?/, ''));
47 |
48 | // Dynamic URL parameters
49 | const params = useParams
129 | {item && (
130 | <>
131 |
132 |
133 |
137 |
138 | {item.title}
139 |
140 | ${item.price.toFixed(2)}
141 |
142 |
198 |
199 |
210 |
211 |
212 |
213 |
214 | }
215 | />
216 |
217 | )}
218 |
219 | );
220 | }
221 |
--------------------------------------------------------------------------------
/src/Store/List.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2022 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https: //www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | .List {
18 | margin: 10px auto;
19 | display: flex;
20 | flex-direction: row;
21 | flex-wrap: wrap;
22 | justify-content: center;
23 | max-width: 1000px;
24 | }
25 |
26 | .list-item-link {
27 | text-decoration: none;
28 | display: flex;
29 | flex-direction: column;
30 | }
31 |
32 | .list-item-card {
33 | margin: 5px;
34 | width: 175px;
35 | flex-grow: 1;
36 | display: flex;
37 | flex-direction: column;
38 | justify-content: center;
39 | }
40 |
41 | .list-item-image {
42 | height: 175px;
43 | margin-top: 10px;
44 | }
45 |
46 | .list-item-card .list-item-content {
47 | padding: 10px;
48 | display: flex;
49 | flex-direction: column;
50 | }
51 |
52 | .list-item-card .list-item-content:last-child {
53 | padding-bottom: 10px;
54 | }
55 |
56 | .list-item-card .list-item-content .title {
57 | font-size: 13px;
58 | }
59 |
--------------------------------------------------------------------------------
/src/Store/List.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2022 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import React, { useEffect, useMemo, useState } from 'react';
18 | import { useParams } from 'react-router-dom';
19 |
20 | import ListItem from './ListItem';
21 |
22 | import { CategoryDetails } from '../interfaces/CategoryDetails';
23 | import { ItemDetails } from '../interfaces/ItemDetails';
24 | import { StoreData } from './StoreData';
25 |
26 | /**Properties for the List component */
27 | interface Props {
28 | categories: CategoryDetails[];
29 | }
30 |
31 | /**List React component
32 | *
33 | * @param {Props} props The details of the item categories
34 | */
35 | const List: React.FC
134 | 
135 |
136 |
143 |
178 |
144 |
145 | Size
146 |
147 |
159 |
160 |
161 |
162 | Quantity
163 |
164 |
176 |
177 |
179 | Description
180 |
181 |
182 |
183 |
184 |
185 | console.error(error)}
191 | onPaymentDataChanged={paymentData => getUpdatedPaymentData(paymentRequest, paymentData)}
192 | />
193 |
196 |
197 |
62 | {items.map(item => (
63 |
66 | );
67 | };
68 |
69 | export default List;
70 |
--------------------------------------------------------------------------------
/src/Store/ListItem.tsx:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2022 Google LLC
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * https://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | import './List.css';
18 | import { Card, CardContent, CardMedia, Typography } from '@mui/material';
19 | import { Link, useParams } from 'react-router-dom';
20 | import { ItemDetails } from '../interfaces/ItemDetails';
21 | import React from 'react';
22 |
23 | interface Props {
24 | item: ItemDetails;
25 | }
26 |
27 | const ListItem: React.FC