00:00:02 Okay, now that we can search and explore different items that are available for us to order, let's actually implement the functionality to add them to

00:00:10 the cart.

00:00:11 So, within this store folder, right next to the auth store, I'll also create a second file called cart.store.ts.

00:00:21 And for this one, I'll provide you with the code down below, and I'll explain how this entire file works.

00:00:27 So, you can find it within the video kit down below, and then let's go through it together.

00:00:31 First, we import the cart customization and cart store types to keep our store strongly typed.

00:00:38 Then we import create functionality from Zustand to be able to create a global state.

00:00:44 Think of this like Redux but simpler.

00:00:47 And then I create a utility function called areCustomizationsEqual to check if two customization arrays are identical by comparing their IDs.

00:00:58 So A and B.

00:01:00 And the way in which it works is we first check whether the length differs, we then immediately know that they're not equal.

00:01:09 We then sort both of these arrays so we can reliably compare them one by one.

00:01:14 And then we check if every corresponding item has the same ID.

00:01:18 If that is the case, the customizations are equal.

00:01:21 We're going to use this later on.

00:01:22 Then we use Zestin's create hook to create a store called useCardStore.

00:01:30 It returns our entire card state and functions to updated.

00:01:34 So we start with empty item, but then we have different functions like add item, remove item, increase quantity, decrease quantity,

00:01:42 clear cart, get total items, get total price.

00:01:46 So all of these different functions are attached to this global store.

00:01:51 And all of this code is just plain JavaScript.

00:01:53 we're dealing with adding and removing different items from it and just checking whether it was added before or not to make sure that we have a robust

00:02:03 cart system.

00:02:03 Because building a cart store requires a deep understanding of how users interact with e-commerce systems.

00:02:11 The cart must be able to handle a variety of different actions like adding items, adjusting quantities, or even including optional customizations,

00:02:21 all while maintaining accurate totals.

00:02:24 So, the goal is to answer the core question, what defines a unique cart item?

00:02:30 And for a food delivery app, it is not just a menu item, because a cheeseburger with extra cheese or a cheeseburger with fries are two different things

00:02:40 because they have different customizations.

00:02:42 So, we can't just track it by a menu ID.

00:02:46 Rather, we need a combination of a menu ID plus customizations to identify an item uniquely.

00:02:53 So at the center is an items array right here that contains all of our items.

00:02:59 And here's a type of how each one of these cart item types look like.

00:03:03 We have an ID.

00:03:05 a name, a price, image URL, quantity, and then finally an array of different card customizations.

00:03:12 And they're optional because not all items need them.

00:03:17 There's a plain Coke or a Margarita pizza that doesn't have any add-ons.

00:03:21 So by making it optional, the cart works for both simple and complex options.

00:03:26 And one of the most important steps is to identify unique items, and we do that using this RCustomizationsEqual utility function.

00:03:35 As I said before, it basically combines two different arrays, sorts them, and then checks whether they're the same.

00:03:41 So, for example, it ensures that burger, fries, and coke is not treated the same as burger, extra cheese, and fries, even if both reference the same menu item.

00:03:54 Then, of course, we were on the add item.

00:03:57 And what we do here is we first check whether an item with the same ID and same customizations already exists in the cart.

00:04:05 So if it does, then we just increase the quantity, else we add it in the cart in the first place.

00:04:11 Then there are the increase and decrease quantity.

00:04:15 Once again, we do a very similar thing.

00:04:17 We check whether the customizations of that item are the same.

00:04:20 And then if they are, we increase the quantity by one, and for a decrease, we decrease the quantity by one as well.

00:04:27 Also for this one, if the quantity is lower than zero, we then just remove it from the array.

00:04:33 This logic will ensure that you're not just blindly modifying the wrong variant of the item, And similar for other functions like removeItem,

00:04:41 clearCart, getTotalItems, all of them are serving a very important part of making sure that the cart logic works.

00:04:48 But now that we have this cart logic, let's actually get it implemented within a new screen that we want to create, and that is a cart screen.

00:04:58 that screen will look something like this, where we can choose a location, and then we list out all of these different items alongside the payment summary

00:05:08 at the bottom.

00:05:09 So this one will have a very simple header, something similar to what we had on the homepage.

00:05:14 So let me just give you the code for that.

00:05:16 Since it's super similar to what we've already done, you can just create a new component within the components folder and call it custom-header.tsx.

00:05:27 and then just find the custom header within the video kit down below and paste it right here.

00:05:32 As you can see, it is just a symbol button, some title, and then an icon.

00:05:37 And now we can put this component to use within the cart screen.

00:05:41 So let's go ahead and head over into App, Tabs, and then Cart, and we can just wrap everything in a safe area view with a class name,

00:05:56 equal to bg-white and h-full.

00:06:01 And within it, I'll just render a flat list.

00:06:04 Yep, we are rendering yet another flat list so you can see just how common they are.

00:06:11 Then we can utilize the cart store that we have created by saying cons and then destructuring the items, the get total items,

00:06:23 as well as the get total And these are equal to the useCardStore that we created.

00:06:30 And then we can even call the total items and assign them to a variable by saying total items is equal to getTotalItems.

00:06:40 And in the same way, total price will be equal to getTotalPrice.

00:06:46 So now that we have those items that we want to render, we can just render them as data.

00:06:52 which is a prop within this flat list.

00:06:54 So I will simply say data is equal to items.

00:06:57 Then we can choose how we want to render a specific item.

00:07:01 For now, it'll just be a callback function where we destructure each item and automatically return a text of cart item for now static.

00:07:11 And then we can finally close this flat list right here.

00:07:15 And we can also give it a key extractor equal to item.id.

00:07:20 We can then give it a content container class name equal to padding bottom of 28, padding XL5.

00:07:29 and padding top of five as well.

00:07:31 And then a list header component, which now will be equal to a callback function where we just return this custom header component to which we can pass

00:07:43 a title of your cart.

00:07:45 So now if you head over to the cart, you can see the your cart at the top with a little search on the right and the back arrow on the left.

00:07:53 Also, in case the cart is empty, There's even a prop for that list empty component.

00:08:00 We'll just provide a callback function and we will return a piece of text that says cart empty.

00:08:07 And then finally we have what's going to take the most space right here.

00:08:11 And that'll be a list footer component, which will check if total items is greater than zero.

00:08:18 And if that is the case, it'll return a view with a class name.

00:08:25 equal to a gap of 5, and within it, another view that'll have a class name equal to margin top of 6, border, border-gray-200,

00:08:37 padding of 5, and the rounded-2xl.

00:08:45 And within this view, we can render another piece of text that'll have a class name equal to h3 bold text-dark100 and the margin bottom of five.

00:08:58 And then within it, we can just say payment summary.

00:09:02 So now if you save it and head back to the cart, you can see cart empty right now because we're not passing any items to it just yet.

00:09:11 And we can also render some information about the price items.

00:09:15 So if you head back over to the design, you can see that we have these three or four similar lines.

00:09:21 Text on the left and then the price.

00:09:23 Text, price, text, price, text, price.

00:09:26 So let's actually turn this into a new reusable component.

00:09:30 And since we'll only be using it in this page, we can actually create it above.

00:09:35 We can call it payment info stripe.

00:09:39 And what this is, is just a component that will automatically return a couple of views and some text.

00:09:46 Since we've created many of these before, I'll just provide it within the video key down below and then you can copy it and paste it here.

00:09:53 I will also make sure to indent it properly.

00:09:56 There we go.

00:09:57 And you can just pause and copy it as well, or just get it from the video kit down below.

00:10:02 And make sure to import CN from CLSX.

00:10:06 Now we can use this payment info stripe to show all of these different payment information, such as below this piece of text,

00:10:16 we can render a payment info stripe and render a label of something like total, And then we can render in parentheses total items.

00:10:30 How many items do we have?

00:10:33 And then we can also give it a value, but let me first put it into multiple lines.

00:10:38 So it's a bit easier to see what we're working with.

00:10:41 There we go.

00:10:43 Then we can also pass a value of dollar sign.

00:10:49 Total price.toFixed to.

00:10:54 Typically when you're working with currencies, you want to fix it to two fraction digits.

00:10:59 So now if you head over here, the cart is still empty.

00:11:03 But very soon as we add the ability to add different items of the cart, this one will show the total number of items.

00:11:10 And we can duplicate it below just a few times.

00:11:14 One and two should be fine for now.

00:11:18 The second one will render the label of delivery fee.

00:11:24 And for now, we can just hard code this to something like $5. So I'll just say $1.5. For the next one, we can maybe provide some kind of a discount.

00:11:37 So I'll say discount.

00:11:40 And this one, we can also maybe hard code to something like minus $1.50. And we can also enter an additional value style of exclamation mark,

00:11:55 text dash success.

00:11:58 So it's going to make it appear in green.

00:12:02 Then just below it, I'll render another view, which will act just as a line.

00:12:07 So we differentiate it from the final total that we have, which will have a class name equal to border dash T border dash gray dash 300 and the margin

00:12:19 Y of two to create some space on top and bottom, which is going to make it look like this.

00:12:23 This is the line that I'm talking about.

00:12:26 And then finally, below it, I will render one final payment info stripe.

00:12:31 So let me just copy it here and paste it just below.

00:12:35 Here, we can just say total.

00:12:38 Then the value will be total price dot two fixed.

00:12:43 And then you also need to include the other numbers, plus five minus 0.5. All of that together can be wrapped in the ToFixed,

00:12:54 not just the total price.

00:12:57 So I'll put it all in parentheses.

00:12:59 Total price plus 5 minus 0.5 dot ToFixed2.

00:13:05 And now we're showing the total price.

00:13:07 Of course, later on, you can make this dynamic.

00:13:10 Let me also render the label style.

00:13:13 of base dash bold and text dash dark 100, as well as a value style, which I'll set to base dash bold, text dash dark 100, as well as text dash right to

00:13:29 move it to the right side.

00:13:30 And finally, right below this view, I'll render a custom button.

00:13:37 that will have a title equal to order now.

00:13:41 Perfect.

00:13:42 So now, back in the cart, as soon as we fill something in, you should be able to see all of these different pieces of info.

00:13:49 So now, before I add the UI of these individual items that we can add to cart, Let's implement the add to card functionality.

00:13:58 We can do that if you head over to our menu card component, which we already created.

00:14:03 And to it, we're passing some props, such as the entire item.

00:14:06 Now, one additional prop that we can pass to it from the item is the dollar sign ID of the item we want to add.

00:14:14 And with that in our pocket, we can very easily get access to the add item functionality coming from the use card store and then we can just call it right

00:14:27 here on press when we press this touchable opacity we can call the add item and to it we need to pass a couple of props such as an object with an id pointing

00:14:38 to the dollar sign id then we have the name the price The image underscore URL, which we have to specify to the image URL,

00:14:48 which is in camel case.

00:14:51 And then finally an empty customizations array.

00:14:53 Perfect.

00:14:55 So now we have a button that will allow us to add a specific item to the cart.

00:14:59 And just before we actually go ahead and test it out, let's also head over to our cart button.

00:15:05 Remember that one that we created at the start, where right now the number of total items is hard coded.

00:15:11 Well, instead of hard coding it, we can now actually fetch the real number of total items by saying const destructure the get total items and that's going

00:15:23 to be equal to the use cart store.

00:15:26 And then we can just say total items is equal to get total items.

00:15:31 So now if you head back over to search or the home, you should be able to see that it doesn't have any kind of a number or badge on this icon right here.

00:15:40 But now if you tried adding a classic cheeseburger to the list, you can see that now that cart shines with the number one.

00:15:48 And then if you head back over to the cart, you'll see that now, you just cost yourself 30 bucks for a classic cheeseburger.

00:15:57 That's a lot.

00:15:58 But hey, let's at least visualize it so we can see what we're paying for.

00:16:01 Because right now, it's not super clear.

00:16:05 So head back over into the cart and then right here for now, we're simply rendering a text that says cart item, but we want to see it.

00:16:14 We want to know what we bought.

00:16:15 So for that reason, let's develop a new component within the components folder and let's call it a cart item dot JSX and run RNFE right within it.

00:16:30 And then we can head back over into the cart and just import it right here.

00:16:36 So instead of passing a simple piece of text, we can actually render a cart item.

00:16:43 And then to it as props, we can pass the item itself equal to the item that we're currently rendering.

00:16:49 Now, as before, this actual cart item is just a collection of different views, images, and text elements.

00:16:56 So I'll drop the full cart item right within the video kit down below.

00:17:00 Oh, and it looks like I called a file JSX.

00:17:04 It was supposed to be TSX.

00:17:06 So I'll just rename it to TSX right here.

00:17:10 There we go.

00:17:11 And now if you add this cheeseburger to the cart and head over here, you can see it.

00:17:18 You can also increase or decrease the quantity and it'll automatically be reflected within the payment summary.

00:17:24 And that's all being done by the use cart store, which manages the store of the price and the items within the cart globally.

00:17:33 And if you want to, you can also try to order some food for your friends, maybe a spicy chicken sandwich or a margarita.

00:17:42 And now we can see that it says three items at the top, right?

00:17:45 You can also head over to that cart item component, or rather the cart button, I think we called it.

00:17:53 And on press, we can actually push it to the cart component.

00:17:56 So we'll say router.

00:17:58 dot push to forward slash cart.

00:18:02 So now I don't have to use the mobile nav.

00:18:04 I can just click at the top here to see what I order.

00:18:08 And you can see all of these items right here within our cart.

00:18:11 The changes are reflected immediately.

00:18:14 You can add additional items or you can even remove entire cart items and the changes are reflected immediately.

00:18:21 Great job on implementing the cart.