updated ui to work with filters. Tidied code naming of components

SmartTokenLabs · nicktaras · Jan 19, 2021 · Jan 19, 2021 · Jan 19, 2021 · Jan 20, 2021
commit 4edc40e583797fb2fd1014ccb2fccf328eab08aa
diff --git a/examples/sites/devcon-issuer/react-third-party-v2/src/App.js b/examples/sites/devcon-issuer/react-third-party-v2/src/App.js
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 // import { Negotiator, Authenticator } from './TokenScript';
 import LogoCard from './LogoCard';
 import RoomCard from './RoomCard';
-import TokenCard from './TokenCard';
+import TokenNotificationCard from './TokenNotificationCard';
 import Typography from '@material-ui/core/Typography';
 // import roomTypesData from './roomTypesDataMock.json';
 import './App.css';
@@ -17,6 +17,9 @@ function App() {
   // Devcon Tickets
   let [tokens, setTokens] = useState([]);
 
+  // Devcon non-discount offers
+  let [freeTaxi, setFreeTaxi] = useState(false);
+
   // Room Types Data
   let [roomTypesData, setRoomTypesData] = useState([]);
 
@@ -86,6 +89,12 @@ function App() {
     // Get tokens with applied filter
     negotiator.negotiate(tokens => {
       setTokens(tokens);
+      // apply any upfront discounts
+      tokens.map(token => {
+        if (token.ticketClass == 2n) {
+          setFreeTaxi(true);
+        }
+      });
     });
     // Get mock rooms data
     getRoomTypesData().then((data) => {
@@ -98,15 +107,16 @@ function App() {
       <LogoCard title={"Hotel Bogota"} />
       <div style={{ position: 'absolute', top: '0px', right: '20px' }}>
         {tokens.length > 0 &&
-          <TokenCard tokensNumber={tokens.length} />
+          <TokenNotificationCard tokensNumber={tokens.length} />
         }
       </div>
       <div className="roomCardsContainer">
         {roomTypesData.map((room, index) => {
           return <RoomCard key={index} room={room} applyDiscount={applyDiscount} discount={discount} tokens={tokens} book={book} />
         })}
       </div>
-      {discount.value &&
+      {
+        freeTaxi &&
         <div>
           <div className="ethScale">
             <div id="space">
@@ -122,11 +132,11 @@ function App() {
             </div>
           </div>
           <Typography className="applyDiscountCopyContainer" gutterBottom variant="body2" component="p">
-            Devcon discount of {discount.value}% has been granted towards your booking! Enjoy the event.
+            Free Taxi service available as a Devcon Ticket Class 2n holder! Enjoy the event.
           </Typography>
         </div>
       }
-    </div>
+    </div >
   );
 }
 

diff --git a/examples/sites/devcon-issuer/react-third-party-v2/src/BookingModal/BookingModal.css b/examples/sites/devcon-issuer/react-third-party-v2/src/BookingModal/BookingModal.css
@@ -0,0 +1,13 @@
+.title {
+  font-size: 0.8rem;
+  margin-bottom: 12px;
+  padding-bottom: 0;
+}
+.subTitle {
+  font-size: 1rem;
+  margin: 0px;
+  padding-top: 0;
+}
+.smallCopy {
+  font-size: 0.8rem;
+}
diff --git a/examples/sites/devcon-issuer/react-third-party-v2/src/BookingModal/index.js b/examples/sites/devcon-issuer/react-third-party-v2/src/BookingModal/index.js
@@ -6,9 +6,13 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DatePicker from './../DatePicker';
-import Card from './../Card';
+import TokenCard from './../TokenCard';
+import './BookingModal.css';
 
-export default function FormDialog({ roomType, applyDiscount, discount, price, tokens, book }) {
+// BOOKING MODAL COMPONENT
+// Booking form
+
+export default function BookingModal({ roomType, applyDiscount, discount, price, tokens, book }) {
 
   // Modal State (open boolean).
   const [open, setOpen] = React.useState(false);
@@ -57,10 +61,10 @@ export default function FormDialog({ roomType, applyDiscount, discount, price, t
         Book
       </Button>
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
-        <DialogTitle style={{ fontSize: "0.8rem", marginBottom: "12px", paddingBottom: 0 }} disableTypography={true}>
+        <DialogTitle className="title" disableTypography={true}>
           {roomType}
         </DialogTitle>
-        <DialogTitle style={{ fontSize: "1rem", margin: 0, paddingTop: 0 }} disableTypography={true}>
+        <DialogTitle className="subTitle" disableTypography={true}>
           {viewPrice} ETH per night.
         </DialogTitle>
         <DialogContent>
@@ -86,11 +90,11 @@ export default function FormDialog({ roomType, applyDiscount, discount, price, t
               handleInput={handleInput}
             />
             {tokens.length > 0 &&
-              <p style={{ fontSize: "0.8rem" }}>Select a ticket to apply discount:</p>
+              <p className="smallCopy">Select a ticket to apply discount:</p>
             }
             {tokens &&
               tokens.map((token, index) => {
-                return <Card key={index} applyDiscount={applyDiscount} tokenInstance={token} discount={discount}></Card>
+                return <TokenCard key={index} applyDiscount={applyDiscount} tokenInstance={token} discount={discount}></TokenCard>
               })
             }
           </form>

diff --git a/examples/sites/devcon-issuer/react-third-party-v2/src/Card/Card.css b/examples/sites/devcon-issuer/react-third-party-v2/src/Card/Card.css
diff --git a/examples/sites/devcon-issuer/react-third-party-v2/src/Card/index.js b/examples/sites/devcon-issuer/react-third-party-v2/src/Card/index.js
diff --git a/examples/sites/devcon-issuer/react-third-party-v2/src/DatePicker/index.js b/examples/sites/devcon-issuer/react-third-party-v2/src/DatePicker/index.js
@@ -9,7 +9,7 @@ import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/picker
 // DATE PICKER COMPONENT
 // Simply wraps the Date picker material ui component
 
-export default function MaterialUIPickers({ label, handleInput }) {
+export default function DatePicker({ label, handleInput }) {
 
   const [selectedDate, setSelectedDate] = React.useState();
 

diff --git a/examples/sites/devcon-issuer/react-third-party-v2/src/LogoCard/index.js b/examples/sites/devcon-issuer/react-third-party-v2/src/LogoCard/index.js
@@ -7,7 +7,7 @@ import './logoCard.css';
 // LOGO CARD COMPONENT
 // Simply shows the Hotel title
 
-function MediaCard({ title }) {
+function LogoCard({ title }) {
   return (
     <Card className="logoCard">
       <CardContent>
@@ -19,5 +19,5 @@ function MediaCard({ title }) {
   );
 }
 
-export default MediaCard;
+export default LogoCard;
 
diff --git a/examples/sites/devcon-issuer/react-third-party-v2/src/RoomCard/index.js b/examples/sites/devcon-issuer/react-third-party-v2/src/RoomCard/index.js
@@ -22,7 +22,7 @@ const useStyles = makeStyles({
   },
 });
 
-export default function MediaCard({ room, applyDiscount, discount, tokens, book }) {
+export default function RoomCard({ room, applyDiscount, discount, tokens, book }) {
   const classes = useStyles();
   const { type, price, image, frequency } = room;
   return (

diff --git a/examples/sites/devcon-issuer/react-third-party-v2/src/TokenCard/TokenCard.css b/examples/sites/devcon-issuer/react-third-party-v2/src/TokenCard/TokenCard.css
@@ -1,10 +1,12 @@
 .tokenCard {
-  margin: 12px;
+  margin: 24px 0;
   flex-grow: 1;
   flex-basis: 0;
-  max-width: 220px;
+  min-width: 220px;
+  max-width: 345px;
 }
 
-.tokenCard h1 {
-  font-size: 1.1rem;
-}
+.tokenCard.selected {
+  transition: all .35s;
+  background: #dcdcdc;
+}
diff --git a/examples/sites/devcon-issuer/react-third-party-v2/src/TokenCard/index.js b/examples/sites/devcon-issuer/react-third-party-v2/src/TokenCard/index.js
@@ -5,45 +5,39 @@ import CardActionArea from '@material-ui/core/CardActionArea';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
-import Zoom from '@material-ui/core/Zoom';
 import './TokenCard.css';
-// import Skeleton from '@material-ui/lab/Skeleton';
-// <Skeleton variant="rect" width={216} height={64} />
-
-// TOKEN CARD COMPONENT
-// To show a discount is available to Devcon ticket holders.
 
 const useStyles = makeStyles({
-  root: {
-    maxWidth: 345,
-  },
+  root: {},
   media: {
-    height: 3,
+    height: 5,
   },
 });
 
-function MediaCard({ tokensNumber }) {
+function TokenCard({ tokenInstance, applyDiscount, discount }) {
   const classes = useStyles();
   return (
-    <Zoom in={true} style={{ transitionDelay: true ? '500ms' : '0ms' }}>
-      <Card className="tokenCard">
-        <CardContent>
-          <Typography gutterBottom variant="h1" component="h1">
-            {tokensNumber} Devcon Tickets found
-          </Typography>
-          <Typography gutterBottom variant="body1" component="p" style={{ fontSize: '0.75rem' }}>
-            booking discounts available
-          </Typography>
-        </CardContent>
+    <Card className={discount.tokenInstance && discount.tokenInstance.ticketClass === tokenInstance.ticketClass ? 'tokenCard selected' : 'tokenCard'}>
+      <CardActionArea>
         <CardMedia
           className={classes.media}
           image="./mock.png"
           title="token"
         />
-      </Card>
-    </Zoom>
+        <CardContent onClick={e => applyDiscount(tokenInstance)}>
+          <Typography gutterBottom variant="h5" component="h2">
+            {tokenInstance.ticketClass.toString()}
+          </Typography>
+          <Typography variant="body2" color="textSecondary" component="p">
+            Ticket Id: {tokenInstance.ticketId.toString()}
+          </Typography>
+          <Typography variant="body2" color="textSecondary" component="p">
+            Devcon Id: {tokenInstance.devconId.toString()}
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card >
   );
 }
 
-export default MediaCard;
-
+export default TokenCard;
diff --git a/...es/devcon-issuer/react-third-party-v2/src/TokenNotificationCard/TokenNotificationCard.css b/...es/devcon-issuer/react-third-party-v2/src/TokenNotificationCard/TokenNotificationCard.css
@@ -0,0 +1,10 @@
+.tokenNotificationCard {
+  margin: 12px;
+  flex-grow: 1;
+  flex-basis: 0;
+  max-width: 220px;
+}
+
+.tokenNotificationCard h1 {
+  font-size: 1.1rem;
+}
diff --git a/examples/sites/devcon-issuer/react-third-party-v2/src/TokenNotificationCard/index.js b/examples/sites/devcon-issuer/react-third-party-v2/src/TokenNotificationCard/index.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Typography from '@material-ui/core/Typography';
+import Zoom from '@material-ui/core/Zoom';
+import './TokenNotificationCard.css';
+
+// TOKEN NOTIFICATION CARD COMPONENT
+// To show a discount is available to Devcon ticket holders.
+
+const useStyles = makeStyles({
+  root: {
+    maxWidth: 345,
+  },
+  media: {
+    height: 3,
+  },
+});
+
+function TokenNotificationCard({ tokensNumber }) {
+  const classes = useStyles();
+  return (
+    <Zoom in={true} style={{ transitionDelay: true ? '500ms' : '0ms' }}>
+      <Card className="tokenNotificationCard">
+        <CardContent>
+          <Typography gutterBottom variant="h1" component="h1">
+            {tokensNumber} Devcon Tickets found
+          </Typography>
+          <Typography gutterBottom variant="body1" component="p" style={{ fontSize: '0.75rem' }}>
+            booking discounts available
+          </Typography>
+        </CardContent>
+        <CardMedia
+          className={classes.media}
+          image="./mock.png"
+          title="token"
+        />
+      </Card>
+    </Zoom>
+  );
+}
+
+export default TokenNotificationCard;
+