Merge pull request #149 from m2mathew/dev

2.17.0
web-tfaa · Jan 20, 2023 · e91a2c4 · e91a2c4
2 parents 1a2ecc1 + dcc77fa
commit e91a2c4
Show file tree

Hide file tree

Showing 20 changed files with 1,029 additions and 506 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tmac-website",
   "description": "Website for the Texas Music Administrators Conference",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/m2mathew/tmac-website"

diff --git a/src/components/masthead/cta-button.tsx b/src/components/masthead/cta-button.tsx
@@ -1,27 +1,34 @@
 // External Dependencies
-import hex2rgba from 'hex2rgba';
-import React, { FC } from 'react';
 import { Link } from 'gatsby-theme-material-ui';
+import { Theme } from '@mui/material/styles';
 import { blue, green } from '@mui/material/colors';
+import hex2rgba from 'hex2rgba';
+import React, { FC } from 'react';
 import styled from 'styled-components';
 
 // Internal Dependencies
+import { options } from '../../utils/typography';
 import presets from '../../utils/presets';
-import { rhythm, scale, options } from '../../utils/typography';
 
 // Local Typings
 interface Props {
   buttonColor: 'blue' | 'green';
   children: React.ReactNode;
   to?: string;
 }
+interface StyledLinkProps {
+  $buttonColor: 'blue' | 'green';
+}
 
 // Local Variables
 const green500 = '#4caf50';
 
 const getButtonColor = ({
   buttonColor,
   theme
+}: {
+  buttonColor: 'blue' | 'green';
+  theme: Theme;
 }) => {
   let background: string = blue['50'];
   let hover: string = blue['800'];
@@ -40,28 +47,20 @@ const getButtonColor = ({
   };
 };
 
-const StyledLink = styled(Link)(({ $buttonColor, theme }) => {
+const StyledLink = styled(Link)<StyledLinkProps>(({ $buttonColor, theme }) => {
   const color = getButtonColor({
     buttonColor: $buttonColor,
     theme
   });
 
   return {
-    [presets.Tablet]: {
-      ...scale(2 / 5),
-      padding: `${rhythm(1 / 4)} ${rhythm(3 / 5)}`,
-    },
-    [presets.VHd]: {
-      padding: `${rhythm(1 / 2)} ${rhythm(1)}`,
-    },
+    padding: '3px 9px',
 
     // Increase specificity
     '&&': {
-      ...scale(1 / 5),
       display: 'inline-block',
       fontFamily: options.headerFontFamily.join(','),
-      padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
-      borderRadius: presets.radiusLg,
+      borderRadius: theme.shape.borderRadius,
       backgroundColor: color.background,
       boxShadow: 'none',
       border: `2px solid ${color.primary}`,

diff --git a/src/components/register/paypal/paypal-button-wrapper.tsx b/src/components/register/paypal/paypal-button-wrapper.tsx
@@ -34,6 +34,7 @@ export interface PaypalPaymentCancel {
 
 interface Props {
   amount: number;
+  noMargin?: boolean;
   onSuccessfulPayment: (payment: PaypalPayment) => void;
 }
 
@@ -57,18 +58,26 @@ const ENV = process.env.NODE_ENV === 'production'
 // Component Definition
 const PaypalButtonWrapper: FC<Props> = ({
   amount,
+  noMargin,
   onSuccessfulPayment,
 }) => {
   const [
     paymentError,
     setPaymentError,
   ] = useState<ReactElement | null>(null);
 
+  if (!amount) {
+    return null;
+  }
+
   const errorText = (
     <>
       There was an issue using PayPal. Please try clicking the{' '}
       <StyledSpan>"Pay with PayPal"</StyledSpan>{' '}
-      button again or print an invoice and send payment to the TMAC Treasurer.
+      button again.
+      <br />
+      You can also print an invoice and
+      send payment to the TMAC Treasurer.
     </>
   );
 
@@ -89,9 +98,13 @@ const PaypalButtonWrapper: FC<Props> = ({
   };
 
   return (
-    <>
+    <Box
+      alignItems={noMargin ? 'flex-end' : 'inherit'}
+      display="flex"
+      flexDirection="column"
+    >
       <Collapse in={Boolean(amount)}>
-        <Box mt={2}>
+        <Box mt={noMargin ? 0 : 2}>
           <PaypalButton
             client={CLIENT}
             env={ENV}
@@ -110,7 +123,7 @@ const PaypalButtonWrapper: FC<Props> = ({
           </EnhancedAlert>
         </Box>
       </Collapse>
-    </>
+    </Box>
   );
 };
 

diff --git a/src/components/register/paypal/paypal-button.tsx b/src/components/register/paypal/paypal-button.tsx
@@ -137,7 +137,12 @@ const PaypalButton: FC<Props> = ({
       onCancel={onCancel}
       onError={onError}
       payment={payment}
-      style={{ label: 'pay', tagline: 'false', size: 'medium' }}
+      style={{
+        label: 'paypal',
+        shape: 'rect',
+        size: 'medium',
+        tagline: 'false',
+      }}
     />
   );
 };

diff --git a/src/components/register/register-button.js b/src/components/register/register-button.js
@@ -2,12 +2,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import hex2rgba from 'hex2rgba';
-import { green, red } from '@mui/material/colors';
 import styled from 'styled-components';
+import { green, red } from '@mui/material/colors';
 
 // Internal Dependencies
+import { options } from '../../utils/typography';
 import presets from '../../utils/presets';
-import { rhythm, scale, options } from '../../utils/typography';
 
 // Local Variables
 const propTypes = {
@@ -29,20 +29,12 @@ const defaultProps = {
 };
 
 const StyledButton = styled.button(({ $isDisabled, $isRed, theme }) => ({
-  [presets.Tablet]: {
-    ...scale(2 / 5),
-    padding: `${rhythm(1 / 4)} ${rhythm(3 / 5)}`,
-  },
-  [presets.VHd]: {
-    padding: `${rhythm(1 / 2)} ${rhythm(1)}`,
-  },
-
-  ...scale(1 / 5),
   border: `1px solid ${$isRed ? texasFlagRed : green500}`,
-  borderRadius: presets.radius,
+  borderRadius: theme.shape.borderRadius,
   display: 'inline-block',
   fontFamily: options.headerFontFamily.join(','),
-  padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
+  padding: '3px 9px',
+
   // Increase specificity
   '&&': {
     backgroundColor: $isRed || $isDisabled ? red['50'] : green['50'],

diff --git a/src/components/register/register-member-payment.tsx b/src/components/register/register-member-payment.tsx
@@ -23,7 +23,9 @@ import {
   doUpdateEntry,
   doUpdateInvoiceId as updateFirestoreInvoiceId,
   doUpdateReceiptId as updateFirestoreReceiptId,
+  FIRESTORE_MEMBER_COLLECTION,
 } from '../../firebase/db';
+import { currentDate } from '../../utils/dateHelpers';
 import { currentSchoolYearLong } from '../../utils/helpers';
 import {
   HandleCompleteMemberStepType,
@@ -76,11 +78,6 @@ const StyledRoot = styled.section(({ theme }) => ({
   },
 }));
 
-const currentDate = format(new Date(), 'M/d/yyyy');
-
-// This will tell the Firestore database action where to put the new record
-const FIRESTORE_MEMBER_COLLECTION = 'registration';
-
 // Component Definition
 const RegisterMemberPayment: FC<Props> = ({
   authenticatedUserId,
@@ -357,6 +354,13 @@ const RegisterMemberPayment: FC<Props> = ({
             </RadioGroup>
           </FormControl>
 
+          <Typography
+            sx={{ marginTop: 1.5 }}
+            variant="body2"
+          >
+            Click on the PayPal button below to pay with credit card.
+          </Typography>
+
           <PaypalButtonWrapper
             amount={amount}
             onSuccessfulPayment={handleUpdateCompletedStep}

diff --git a/src/firebase/db.js b/src/firebase/db.js
@@ -7,6 +7,9 @@ import { logError } from '../utils/logError';
 const getFirebaseCollectionName = (collection) =>
   `${collection}_${currentSchoolYearShort}`;
 
+// This will tell the Firestore database action where to put the new record
+export const FIRESTORE_MEMBER_COLLECTION = 'registration';
+
 // Create/Update user entry in Firestore
 export const doCreateEntry = (
   form,
@@ -16,7 +19,7 @@ export const doCreateEntry = (
 ) => {
   const collectionName = getFirebaseCollectionName(collection);
 
-  console.log('doCreateEntry : creating...', `${collection}_${currentSchoolYearShort}`);
+  console.log('creating data...', `${collection}_${currentSchoolYearShort}`);
 
   return db
     .collection(collectionName)
@@ -41,7 +44,7 @@ export const doUpdateEntry = (
 ) => {
   const collectionName = getFirebaseCollectionName(collection);
 
-  console.log('doUpdateEntry : updating...', collectionName);
+  console.log('updating data...', collectionName);
 
   return db
     .collection(collectionName)
@@ -62,9 +65,10 @@ export const doUpdateEntry = (
 export const doGetUsers = (collection, userList, callback) => {
   const collectionName = getFirebaseCollectionName(collection);
 
-  console.log('doGetUsers : getting...', collectionName);
+  console.log('getting data...', collectionName);
 
   const updatedUserList = userList;
+
   return db
     .collection(collectionName)
     .get()