Skip to content

Commit

Permalink
Merge pull request #74 from andreidimaano/andreidimaano/modal
Browse files Browse the repository at this point in the history 
Andreidimaano/modal
  • Loading branch information
@alfredzhuang
alfredzhuang authored Feb 15, 2021
2 parents 1ad6720 + bff1aeb commit 4c91f9d
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 15 deletions.
1 change: 1 addition & 0 deletions frontend/bobaful/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"@chakra-ui/react": "^1.0.0",
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
"formik": "^2.2.6",
"framer-motion": "^2.9.4",
"next": "latest",
"react": "^17.0.1",
Expand Down
81 changes: 71 additions & 10 deletions frontend/bobaful/src/components/menu-components/modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,50 @@
import { Flex, Box, Heading, Stat, StatNumber, Modal, ModalOverlay, ModalContent, ModalCloseButton, ModalHeader, ModalBody, ModalFooter, Button, Text, useDisclosure } from '@chakra-ui/react';
import Image from 'next/image'
import React from 'react'
import { Box, Button, Divider, Flex, FormControl, FormLabel, Heading, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Radio, RadioGroup, Stack, Stat, StatNumber, Text, useDisclosure } from '@chakra-ui/react';
import Image from 'next/image';
import React, { useState } from 'react';

interface modalProps {
price: string
priceString: string
}

export const MenuItemModal: React.FC<modalProps> = ({price}) => {
export const MenuItemModal: React.FC<modalProps> = ({priceString}) => {
const {isOpen, onOpen, onClose} = useDisclosure();
// let price = parseInt(priceString);
let width = (360 / 539 * 300).toString();

let [price, setPrice] = useState(parseInt(priceString));
let [state, setQuantity] = useState({quantity: 1, totalPrice: (price / 100).toFixed(2)});
let [isDecDisabled, setDecDisabled] = useState(true);
let [isIncDisabled, setIncDisabled] = useState(false);

let changePrice = (value: string) => {
let newPrice = parseInt(value);
setPrice(newPrice);
setQuantity({quantity: state.quantity, totalPrice: (newPrice * state.quantity / 100).toFixed(2)})
}

let decreaseQuantity = () => {
let newQuantity = state.quantity - 1;
if(isIncDisabled) {
setIncDisabled(!isIncDisabled);
}
if(state.quantity <= 2) {
setDecDisabled(!isDecDisabled);
}
setQuantity({quantity: newQuantity, totalPrice: (price * newQuantity / 100).toFixed(2)});
}

let increaseQuantity = () => {
let newQuantity = state.quantity + 1;
if(isDecDisabled) {
setDecDisabled(!isDecDisabled);
}
if(state.quantity + 1 === 6) {
setIncDisabled(!isIncDisabled);
}
setQuantity({quantity: newQuantity, totalPrice: (price * newQuantity / 100).toFixed(2)});
}


return (
<>
<Flex as="button" width={"100%"} onClick={onOpen} justify="space-between" align="center" p={4}>
Expand All @@ -17,7 +53,7 @@ export const MenuItemModal: React.FC<modalProps> = ({price}) => {
<Heading size="md" >Thai Oat</Heading>
<Text>A healthier version of the original thai tea paired with our house oat milk. A definite fan favorite</Text>
<Stat>
<StatNumber>${price}</StatNumber>
<StatNumber>${(parseInt(priceString) / 100).toFixed(2)}</StatNumber>
</Stat>
</Box>
</Flex>
Expand All @@ -40,12 +76,37 @@ export const MenuItemModal: React.FC<modalProps> = ({price}) => {
<Image src="/images/red_boba.png" alt={"boba picture"} object-fit={"cover"} width={width} height="300"/>
</Box>
<Text textAlign="left">A healthier version of the original thai tea paired with our house oat milk. A definite fan favorite</Text>
<FormControl id="size" my={4}>
<FormLabel as="legend">Select Size</FormLabel>
<RadioGroup onChange={(value: string) => {changePrice(value)}} value={price.toString()} defaultValue={price.toString()}>
<Stack>
<Flex justifyContent="space-between" >
<Radio value="1350">Small (32oz)</Radio>
</Flex>
<Divider/>
<Flex justifyContent="space-between" >
<Radio value="2600">Medium 64oz</Radio>
<Text>$26.00</Text>
</Flex>
<Divider/>
<Flex justifyContent="space-between" >
<Radio value="4500">Large 128oz</Radio>
<Text>$45.00</Text>
</Flex>
</Stack>
</RadioGroup>
</FormControl>
</ModalBody>
<ModalFooter>
<Button colorScheme="red" mr={3} onClick={onClose}>
<Text fontWeight={"bold"} >Add to Cart - </Text>
<Text fontWeight={"bold"} >${price}</Text>
</Button>
<Flex direction="row" justifyContent="flex-end" align="center">
<Button isDisabled={isDecDisabled} onClick={decreaseQuantity} mr={2}>-</Button>
<Input type={"number"} value={state.quantity} textAlign="center" maxW="52px" isReadOnly={true}/>
<Button isDisabled={isIncDisabled} onClick={increaseQuantity} ml={2}>+</Button>
<Button ml={8} colorScheme="red" mr={2} onClick={onClose}>
<Text fontWeight={"bold"} mr={1}>Add to Cart - </Text>
<Text fontWeight={"bold"} >${state.totalPrice}</Text>
</Button>
</Flex>
</ModalFooter>
</ModalContent>
</Modal>
Expand Down
6 changes: 3 additions & 3 deletions frontend/bobaful/src/pages/menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ const Menu: React.FC<menuProps> = ({}) => {
<>
<Navbar />
<Box>
<MenuItemModal price={"10.23"}/>
<MenuItemModal priceString={"1350"}/>
<Divider />
<MenuItemModal price={"12.00"}/>
<MenuItemModal priceString={"1350"}/>
<Divider />
<MenuItemModal price={"14.00"}/>
<MenuItemModal priceString={"1350"}/>
<Divider />
</Box>
</>
Expand Down
47 changes: 45 additions & 2 deletions frontend/bobaful/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -846,6 +846,11 @@
dependencies:
tslib "^2.0.0"

"@types/dinero.js@^1.6.5":
version "1.6.5"
resolved "https://registry.yarnpkg.com/@types/dinero.js/-/dinero.js-1.6.5.tgz#bde1cb8384f52d73a8bb951d2b66d8a5b59c50df"
integrity sha512-mDpUUr/PA68nrtb+ZnOa7kIPkbPVa7yCfB0EsFIWwcZrKYGlbp1F8roAHyQSehYNuaByjiBKU6B9iqPeRgUyiA==

"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
version "7.0.6"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
Expand Down Expand Up @@ -1995,6 +2000,11 @@ deep-extend@^0.6.0:
resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==

deepmerge@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==

define-property@^0.2.5:
version "0.2.5"
resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
Expand Down Expand Up @@ -2059,6 +2069,11 @@ diffie-hellman@^5.0.0:
miller-rabin "^4.0.0"
randombytes "^2.0.0"

dinero.js@^1.8.1:
version "1.8.1"
resolved "https://registry.yarnpkg.com/dinero.js/-/dinero.js-1.8.1.tgz#775a647629b4195af9d02f46e9b7fa1fd81e906d"
integrity sha512-AQ09MDKonkGUrhBZZFx4tPTVcVJuHJ0VEA73LvcBoBB2eQSi1DbapeXj4wnUUpx1hVnPdyev1xPNnNMGy/Au0g==

[email protected]:
version "1.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.1.0.tgz#5f7c828f1bfc44887dc2a315ab5c45691d544b58"
Expand Down Expand Up @@ -2433,6 +2448,19 @@ for-in@^1.0.2:
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=

formik@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.6.tgz#378a4bafe4b95caf6acf6db01f81f3fe5147559d"
integrity sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==
dependencies:
deepmerge "^2.1.1"
hoist-non-react-statics "^3.3.0"
lodash "^4.17.14"
lodash-es "^4.17.14"
react-fast-compare "^2.0.1"
tiny-warning "^1.0.2"
tslib "^1.10.0"

fragment-cache@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
Expand Down Expand Up @@ -2666,7 +2694,7 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"

hoist-non-react-statics@^3.3.1:
hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
Expand Down Expand Up @@ -3091,6 +3119,11 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"

lodash-es@^4.17.14:
version "4.17.20"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.20.tgz#29f6332eefc60e849f869c264bc71126ad61e8f7"
integrity sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA==

[email protected]:
version "4.6.2"
resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
Expand All @@ -3101,7 +3134,7 @@ lodash.sortby@^4.7.0:
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=

lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.19:
lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.19:
version "4.17.20"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
Expand Down Expand Up @@ -3981,6 +4014,11 @@ [email protected]:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==

react-fast-compare@^2.0.1:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==

[email protected]:
version "2.4.1"
resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.4.1.tgz#e842cc93da736b5c5d331799012544295cbcee4f"
Expand Down Expand Up @@ -4732,6 +4770,11 @@ tiny-invariant@^1.0.6:
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==

tiny-warning@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==

[email protected]:
version "1.4.2"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
Expand Down

0 comments on commit 4c91f9d

Please sign in to comment.