Mac-LU-CEM2514-Menu Item Card + Loyalty Points

src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx

@@ -8,8 +8,6 @@ export default {
     component: LimitedTimeBanner,
     args: {
         minsRemaining: 120,
-        bannerWidth: 300,
-        bannerHeight: 40,
     },
 } as Meta;
 

src/Containers/LimitedTimeBanner/LimitedTimeBanner.tsx

@@ -8,22 +8,18 @@ const MINUTES_IN_YEAR = 524160;
 
 export interface LimitedTimeBannerProps
     extends MainInterface {
-        /* minutes until time runs out */ 
-    minsRemaining: number,
-    bannerWidth?: number,
-    bannerHeight?: number,
+    /* minutes until time runs out */ 
+    minsRemaining?: number,
     }
 
 export const LimitedTimeBanner: React.FC<LimitedTimeBannerProps> = ({
     minsRemaining,
-    bannerWidth,
-    bannerHeight,
     ...props
 }): React.ReactElement => (
-    <BannerBox minsRemaining={minsRemaining} bannerWidth={bannerWidth} bannerHeight={bannerHeight} {...props}>
+    <BannerBox minsRemaining={minsRemaining} {...props}>
         <Icon />
         <BannerHeader>
-            {alterTime(minsRemaining)} Remaining
+            {alterTime(minsRemaining!)} Remaining
         </BannerHeader>
     </BannerBox>
 );
@@ -52,15 +48,13 @@ const alterTime = (value:number)  => {
 }
 
 const BannerBox = styled.div<LimitedTimeBannerProps>`
+    width: 300px;
+    height; 40px;
     ${({theme}):string => `
     font-family: ${theme.font.family};
     color: ${theme.colors.background}};
     background-color:  ${theme.colors.bannerBackgroundColor};
     `}
-    ${({ bannerWidth, bannerHeight }): string => `
-    width: ${bannerWidth}px;
-    height: ${bannerHeight}px;
-    `}
 `;
 
 const Icon = styled(Clock)`

src/Containers/LoyaltyPoints/LoyaltyPoints.stories.tsx

@@ -7,8 +7,8 @@ export default {
     title: 'Components/LoyaltyPoints',
     component: LoyaltyPoints,
     args: {
-        loyaltyamount: 10,
-        loyaltypointlimit: 100,
+        loyaltyAmount: 10,
+        loyaltyPointLimit: 100,
     }
 } as Meta;
 

src/Containers/LoyaltyPoints/LoyaltyPoints.tsx

@@ -4,21 +4,23 @@ import { Stars } from '@styled-icons/material/Stars';
 
 export interface LoyaltyPointsProps
     extends React.HTMLAttributes<HTMLDivElement> {
-    loyaltyamount: number; //the amount of loyalty points that the user gets with purchase, used to display on component.
-    loyaltypointlimit: number; //the limit of loyalty points before it says 99+ instead.
+    /* The amount of loyalty points displayed on the component */
+    loyaltyAmount: number;
+    /* Limit before loyalty amount displays only this number instead */
+    loyaltyPointLimit: number; 
 }
 
 export const LoyaltyPoints: React.FC<LoyaltyPointsProps> = ({
-    loyaltyamount,
-    loyaltypointlimit,
+    loyaltyAmount,
+    loyaltyPointLimit,
     ...props
 }): React.ReactElement => <LoyaltyPointsBox {...props}>
-    <header>+{getLoyaltyPoints(loyaltyamount, loyaltypointlimit)}<Star /></header>
+    <header>+{getLoyaltyPoints(loyaltyAmount, loyaltyPointLimit)}<Star /></header>
     </LoyaltyPointsBox>;
 
-function getLoyaltyPoints(loyaltypoints: number, loyaltypointlimit: number) {
-    if (loyaltypoints >= loyaltypointlimit) {
-        return loyaltypointlimit + "⁺";
+function getLoyaltyPoints(loyaltypoints: number, loyaltyPointLimit: number) {
+    if (loyaltypoints >= loyaltyPointLimit) {
+        return loyaltyPointLimit + "⁺";
     }
     return Math.round(loyaltypoints);
 }

src/Containers/MenuItemCard/MenuItemCard.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { MenuItemCard, MenuItemCardProps, LoyaltyPoints, LimitedTimeBanner, SaleTag } from '../../index';
+import { action } from "@storybook/addon-actions";
 
 export default {
     title: 'Components/Menu Item Card',
     component: MenuItemCard,
     subcomponents: { LoyaltyPoints, LimitedTimeBanner, SaleTag },
-    argTypes: { onClick: { action: 'This card was clicked!' } },
 } as Meta;
 
 const Template: Story<MenuItemCardProps> = (args) => <MenuItemCard  {...args}> <LoyaltyPoints {...args} />
@@ -19,29 +19,44 @@ MenuItemCardBasic.args = {
     itemPrice: 15.99,
     itemPriceLimit: 1000,
     saleAmount: 5,
-    loyaltyamount: 20,
-    loyaltypointlimit: 100,
-    bannerWidth: 280,
-    bannerHeight: 40,
-    minsRemaining: 120,
+    loyaltyAmount: 0,
+    loyaltyPointLimit: 100,
+    minsRemaining: 0,
+    cardWasClicked: action("Card was clicked and not sold out!"),
     sale: false,
     soldOut: false,
     animated: true,
     flat: false,
 };
 
-export const MenuItemCardStates = Template.bind({});
-MenuItemCardStates.args = {
+export const MenuItemCardSale = Template.bind({});
+MenuItemCardSale.args = {
+    itemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg',
+    itemName: 'Blackberry Pancakes',
+    itemPrice: 15.99,
+    itemPriceLimit: 1000,
+    saleAmount: 5,
+    loyaltyAmount: 20,
+    loyaltyPointLimit: 100,
+    minsRemaining: 120,
+    cardWasClicked: action("Card was clicked and not sold out!"),
+    sale: true,
+    soldOut: false,
+    animated: true,
+    flat: false,
+};
+
+export const MenuItemCardSoldOut = Template.bind({});
+MenuItemCardSoldOut.args = {
     itemImage: 'https://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/63/2007/09/Ricotta-cheese-pancakes-with-blackberry-butter.jpg',
     itemName: 'Blackberry Pancakes',
     itemPrice: 15.99,
     itemPriceLimit: 1000,
     saleAmount: 5,
-    loyaltyamount: 0,
-    loyaltypointlimit: 100,
-    bannerWidth: 300,
-    bannerHeight: 40,
+    loyaltyAmount: 0,
+    loyaltyPointLimit: 100,
     minsRemaining: 0,
+    cardWasClicked: action("Card was clicked and not sold out!"),
     sale: true,
     soldOut: true,
     animated: false,
@@ -55,11 +70,10 @@ MenuItemCardLongText.args = {
     itemPrice: 2560,
     itemPriceLimit: 1000,
     saleAmount: 200,
-    loyaltyamount: 1500,
-    loyaltypointlimit: 1200,
+    loyaltyAmount: 1500,
+    loyaltyPointLimit: 1200,
     minsRemaining: 24000,
-    bannerWidth: 300,
-    bannerHeight: 40,
+    cardWasClicked: action("Card was clicked and not sold out!"),
     sale: true,
     soldOut: false,
     animated: true,
@@ -73,11 +87,9 @@ MenuItemCardEmpty.args = {
     itemPrice: 0,
     itemPriceLimit: 1000,
     saleAmount: 0,
-    loyaltyamount: 0,
-    loyaltypointlimit: 100,
+    loyaltyAmount: 0,
+    loyaltyPointLimit: 100,
     minsRemaining: 0,
-    bannerWidth: 300,
-    bannerHeight: 40,
     sale: false,
     soldOut: false,
     animated: false,

src/Containers/MenuItemCard/MenuItemCard.tsx

@@ -8,11 +8,11 @@ export interface MenuItemCardProps
     extends MainInterface, ResponsiveInterface, React.HTMLAttributes<HTMLDivElement> {
     /* Loyalty points component */
     LoyaltyPoints?: React.ReactElement;
-    /* Limited time banner component*/
+    /* Limited time banner component */
     LimitedTimeBanner?: React.ReactElement;
     /* Sale tag component */
     SaleTag?: React.ReactElement;
-    /* Html link for the item, displayed as 280px x 125px*/
+    /* Html link for the item, displayed as 300px x 150px */
     itemImage: string, 
     /* Name of the product, after 30 characters '...' replaces the rest */
     itemName: string,
@@ -25,21 +25,19 @@ export interface MenuItemCardProps
     /* Controls if the item can still be sold, also removes other components from card display */
     soldOut: boolean;
     /* Number passed to LoyaltyPoints to display the loyalty points amount */
-    loyaltyamount: number,
+    loyaltyAmount: number,
     /* Limit before loyaltyPoints gets capped */
-    loyaltypointlimit: number,
+    loyaltyPointLimit: number,
     /* Amount that the item is on sale, reduced from itemPrice when sale is active */
     saleAmount: number,
     /* Minutes that the item is remaining for, if 0 then will not display */
-    minsRemaining: number,
-    /* Width of the time remaining banner */
+    minsRemaining?: number,
     /* Add box shadow when hovered over */
     animated?: boolean;
     /* Controls the border around the menu item card, animated will still display the border when hovered over */
     flat?: boolean;
-    bannerWidth?: number,
-    /* Height of the time remaining banner */
-    bannerHeight?: number,
+    /* Handles card clicks when the item is not soldout */
+    cardWasClicked?: () => void,
 }
 
 export const MenuItemCard: React.FC<MenuItemCardProps> = ({
@@ -52,11 +50,10 @@ export const MenuItemCard: React.FC<MenuItemCardProps> = ({
     itemPrice,
     itemPriceLimit,
     saleAmount,
-    loyaltyamount,
-    loyaltypointlimit,
+    loyaltyAmount,
+    loyaltyPointLimit,
     minsRemaining,
-    bannerHeight,
-    bannerWidth,
+    cardWasClicked,
     ...props
 
 }): React.ReactElement => {
@@ -71,12 +68,11 @@ export const MenuItemCard: React.FC<MenuItemCardProps> = ({
      */
     function getMenuItemStatus(sale: boolean, soldOut: boolean, itemPrice: number, itemPriceLimit: number, saleAmount: number) {
 
-        var itemSaleAmount;
+        let itemSaleAmount = 0;
+
         if (itemPrice - saleAmount > 0) {
             itemSaleAmount = itemPrice - saleAmount
-        } else {
-            itemSaleAmount = 0;
-        }
+        } 
 
         if (itemPrice >= itemPriceLimit) {
             return <PriceText1k>${roundItemValue(itemPrice, itemPriceLimit)}K+</PriceText1k>
@@ -98,13 +94,15 @@ export const MenuItemCard: React.FC<MenuItemCardProps> = ({
             } else return <MenuItemCardImage src='https://healthduel.net/healthduel/storage/app/game/GyeyqSeDD2qRmWJf8kocbK9YCtowBvgF4PZPsDlW.jpeg' alt={itemName} />
     }
     return (
-        <MenuItemCardBox {...props} bannerHeight={bannerHeight} itemImage={itemImage} itemName={itemName} itemPrice={itemPrice} animated={animated}
-            flat={flat} sale={sale} soldOut={soldOut} saleAmount={saleAmount} itemPriceLimit={itemPriceLimit}
-            loyaltyamount={loyaltyamount} minsRemaining={minsRemaining} loyaltypointlimit={loyaltypointlimit}>
+        <MenuItemCardBox {...props} itemImage={itemImage} itemName={itemName} itemPrice={itemPrice} animated={animated}
+            flat={flat} sale={sale} soldOut={soldOut} saleAmount={saleAmount} itemPriceLimit={itemPriceLimit} cardWasClicked={cardWasClicked}
+            loyaltyAmount={loyaltyAmount} minsRemaining={minsRemaining} loyaltyPointLimit={loyaltyPointLimit}>
+
+            {(!soldOut) && <CardClickableDiv onClick = {cardWasClicked}/>}
 
             <MenuItemCardAccessoryDiv>
-                {(!soldOut && !!loyaltyamount) &&
-                    <LoyaltyPoints loyaltyamount={loyaltyamount} loyaltypointlimit={loyaltypointlimit} />}
+                {(!soldOut && !!loyaltyAmount) &&
+                    <LoyaltyPoints loyaltyAmount={loyaltyAmount} loyaltyPointLimit={loyaltyPointLimit} />}
                 {(!soldOut && sale) &&
                     <SaleTag saleAmount={saleAmount} />}
             </MenuItemCardAccessoryDiv>
@@ -115,7 +113,7 @@ export const MenuItemCard: React.FC<MenuItemCardProps> = ({
             {soldOut && <SoldOutBox>Sold Out</SoldOutBox>}
 
             { (!!minsRemaining && !soldOut) &&
-                <LimitedTimeBannerPosition> <LimitedTimeBanner bannerHeight={bannerHeight} bannerWidth={bannerWidth} minsRemaining={minsRemaining} /> </LimitedTimeBannerPosition>}
+                <LimitedTimeBannerPosition> <LimitedTimeBanner minsRemaining={minsRemaining} /> </LimitedTimeBannerPosition>}
 
             {(!!itemPrice && !soldOut) && getMenuItemStatus(sale, soldOut, itemPrice, itemPriceLimit, saleAmount)}
 
@@ -139,7 +137,7 @@ function roundItemValue(itemPrice: number, itemPriceLimit: number) {
  * @param itemName
  */
 function getStringValue(itemName: string) {
-    var newString = itemName.substring(0, 30);
+    let newString = itemName.substring(0, 30);
     if (itemName.length > 30) {
         return newString + '...';
     } else
@@ -169,6 +167,11 @@ const MenuItemCardBox = styled.div<MenuItemCardProps & MainInterface & Responsiv
       opacity: 0.5;
       cursor: not-allowed; `}
 `;
+const CardClickableDiv = styled.div`
+    height: 100%;
+    width: 100%;
+    position: absolute;
+`
 const MenuItemCardImage = styled.img`
     height: 150px;
     width: 300px;