1
00:00:00,330 --> 00:00:04,210
Nice work, we're done with feature products, we can display them nicely.

2
00:00:04,590 --> 00:00:10,080
Now let's talk about these funny looking numbers, why the price is in cents.

3
00:00:10,230 --> 00:00:11,580
And there's two reasons for that.

4
00:00:11,760 --> 00:00:19,920
First, when we talk about payment processors, they will be looking for the smallest unit of currency.

5
00:00:20,550 --> 00:00:27,720
For example, if I'm selling in dollars, they will be looking for a price in cents, for example.

6
00:00:28,770 --> 00:00:31,270
So we'll have to convert it at the end of the day anyway.

7
00:00:31,650 --> 00:00:32,700
That's number one.

8
00:00:33,090 --> 00:00:40,560
Number two, we also need to keep in mind that in our application we've got a card and in that card

9
00:00:40,980 --> 00:00:43,140
we have a bunch of calculations.

10
00:00:43,650 --> 00:00:49,800
And the tricky thing about JavaScript, when we talk about decimals, we need to understand that once

11
00:00:49,800 --> 00:00:51,870
in a while we get some weird bugs.

12
00:00:52,590 --> 00:00:57,550
And the last thing you want with real money is to have some kind of bug.

13
00:00:58,260 --> 00:01:02,110
So it is much more easier if everything is incents.

14
00:01:02,580 --> 00:01:09,330
So we have whole numbers and then we for sure know that all the questions we're doing are going to be

15
00:01:09,330 --> 00:01:16,560
exactly like we wanted to, because trust me, when it comes to real money, you rather take precaution

16
00:01:16,590 --> 00:01:17,750
because it's not a strength.

17
00:01:18,120 --> 00:01:21,620
If I have some error with the title, I can live with that.

18
00:01:22,080 --> 00:01:27,300
But one dot, left or right, makes a whole lot of difference.

19
00:01:27,540 --> 00:01:34,200
OK, so that's why when you talk about money, you want to set up your prices in that smallest unit

20
00:01:34,500 --> 00:01:36,680
because the payment processor is going to be looking for that.

21
00:01:37,080 --> 00:01:44,580
And because with JavaScript, you know that you can sleep good at night since you know that they're

22
00:01:44,580 --> 00:01:47,070
not going to be any weird bugs.

23
00:01:47,550 --> 00:01:53,550
Now, of course, the downside of that is that everywhere where you want to display, you'll have to

24
00:01:53,550 --> 00:01:54,690
do a little bit of work.

25
00:01:55,200 --> 00:01:57,660
Now, to me, that is a small price to pay.

26
00:01:58,080 --> 00:02:02,970
I rather deal with some kind of format, function or just format manually each and every time.

27
00:02:03,390 --> 00:02:11,220
But at least I know that once the application is ready to go, I'm not going to get a angry email that

28
00:02:11,220 --> 00:02:16,440
says that, hey, listen, you know, now we send out the product for, I don't know, forty dollars.

29
00:02:16,440 --> 00:02:18,940
And actually they cost four thousand.

30
00:02:19,050 --> 00:02:21,060
So how does that work?

31
00:02:21,090 --> 00:02:23,640
Well, the simple solution would be like this.

32
00:02:23,640 --> 00:02:27,890
We know that one dollar is one hundred percent correct.

33
00:02:28,320 --> 00:02:31,900
And what we simply can do is just divide by one hundred.

34
00:02:32,430 --> 00:02:40,290
So of course now my price is in cents and I just simply divide my price by 100 and I'll get the dollar

35
00:02:40,290 --> 00:02:40,680
value.

36
00:02:41,140 --> 00:02:46,260
For example, this very stable cost, one thousand two hundred nine dollars.

37
00:02:46,650 --> 00:02:48,570
And technically it works.

38
00:02:48,570 --> 00:02:56,640
But there's a better solution because in JavaScript there is a built in method and the method name is

39
00:02:56,640 --> 00:02:58,960
international number format.

40
00:02:59,190 --> 00:03:05,490
That's why if you take a look at the imports, we've got this format price and it's coming from utils

41
00:03:05,490 --> 00:03:12,580
and of course the filename is helper's, so why don't we navigate there and work on this function?

42
00:03:12,900 --> 00:03:18,570
So first I'll start by removing the dollar sign because you'll see how it nicely adds it by default

43
00:03:18,960 --> 00:03:22,490
and I'll just pass in the price in the format price.

44
00:03:22,830 --> 00:03:29,880
So set up a function that we'll use all throughout our project every time we want to display the price

45
00:03:29,880 --> 00:03:31,740
nicely to the user.

46
00:03:31,980 --> 00:03:33,630
So we've got format price.

47
00:03:33,640 --> 00:03:39,510
That's the name of the function and we pass in the price again the moment nothing is coming back.

48
00:03:39,540 --> 00:03:40,860
That's why we don't see anything.

49
00:03:41,260 --> 00:03:46,270
So now let's navigate to utils and then we have helper's an hour.

50
00:03:46,560 --> 00:03:47,430
That's my function.

51
00:03:47,670 --> 00:03:52,800
Now of course we just need to set up the functionality so I know I'll be passing in some kind of number.

52
00:03:53,010 --> 00:03:54,160
That is going to be my price.

53
00:03:54,160 --> 00:03:54,870
So I'm saying here.

54
00:03:54,870 --> 00:03:55,140
Yeah.

55
00:03:55,920 --> 00:03:58,410
Price in the parameter then.

56
00:03:58,410 --> 00:03:59,480
As far as the return.

57
00:04:00,300 --> 00:04:06,050
Well I guess let's start with simply returning a number and let's do a little bit of console logging

58
00:04:06,060 --> 00:04:08,150
just so we all are on the same page.

59
00:04:08,520 --> 00:04:11,880
Like I said, the object is international.

60
00:04:12,210 --> 00:04:17,460
And the property or the method I guess we're looking for is no format.

61
00:04:17,850 --> 00:04:22,560
So for now, I'm just going to say const and then new number.

62
00:04:22,800 --> 00:04:26,850
And that one will be equal to, like I said, international plus one.

63
00:04:27,180 --> 00:04:31,730
And then we've got a dot and then no format.

64
00:04:32,040 --> 00:04:35,520
And in this method, the first argument is the locale.

65
00:04:35,940 --> 00:04:41,850
And of course I'm going to go with English and then U.S. So if you have different locale, just check

66
00:04:42,180 --> 00:04:48,210
for appropriate values and then we pass in the object where will say style.

67
00:04:48,400 --> 00:04:50,940
And in this case it is going to be a currency.

68
00:04:51,830 --> 00:04:58,700
And the next thing is, what is the actual currency and in my case, it's going to be USD, so we pass

69
00:04:58,700 --> 00:05:05,200
here USD and then once we set up this object, we get back a format function.

70
00:05:05,540 --> 00:05:10,940
Now, in this case, we'll still have to divide this by a hundred, because if we simply pass format

71
00:05:10,940 --> 00:05:16,610
and the number now, of course, I'll change my mind and I'll say that I would want to return a new

72
00:05:16,610 --> 00:05:17,780
number from the function.

73
00:05:18,110 --> 00:05:22,930
We're still not taking into account the fact that the price is incents.

74
00:05:23,120 --> 00:05:29,140
That's why these numbers are so gigantic and we simply need to divide it by one hundred.

75
00:05:29,420 --> 00:05:34,550
And of course, we have a proper value and notice how we nicely format.

76
00:05:34,670 --> 00:05:41,230
Again, this is just to showcase to the user, well, what is the price?

77
00:05:41,540 --> 00:05:45,680
I noticed it right away as the dollar signs and all that good stuff.

78
00:05:45,980 --> 00:05:53,870
Now, when we talk about increasing, decreasing the items in a cart, as well as actually calculating

79
00:05:53,870 --> 00:05:58,870
the totals, all of that is going to be happening in a sense, because those are round numbers.

80
00:05:58,880 --> 00:05:59,870
Those are not decimals.

81
00:06:00,210 --> 00:06:05,560
Like I just said, the reason why we're doing that is because we don't want some weird box.

82
00:06:05,570 --> 00:06:13,100
But everywhere in our project where we would want to display the price, we'll use this form and function

83
00:06:13,770 --> 00:06:20,090
for Matt Price and then we just return our price, whatever is nicely formatted.

84
00:06:20,360 --> 00:06:27,700
And of course, we can do a bit of a shortcut where I can just say return on whatever value I'm returning

85
00:06:28,070 --> 00:06:30,320
so I don't need to create this new variable.

86
00:06:31,310 --> 00:06:36,470
Now, one thing that you want to do probably is just add new, and that's just going to make sure that

87
00:06:36,620 --> 00:06:38,330
you follow the proper syntax.

88
00:06:38,660 --> 00:06:44,060
So we create the new format and we naturally display whatever the price is.