Fixes for Cordova Android build 2.5.0.0

Still need to get Sign in with Twitter working Some more removal of stripe calls. Some sneak fixes Removed a listener from OrganizationModal.jsx on close. "Fixed" the missing address on the ready page for mobile devices and Cordova.
SailingSteve · Oct 15, 2024 · 52d4575 · 52d4575
1 parent c834c93
commit 52d4575
Show file tree

Hide file tree

Showing 7 changed files with 3,351 additions and 1,408 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/js/common/components/CampaignSupport/PayToPromoteProcess.jsx b/src/js/common/components/CampaignSupport/PayToPromoteProcess.jsx
@@ -2,35 +2,26 @@ import { LockOutlined } from '@mui/icons-material';
 import { Button, InputAdornment, TextField } from '@mui/material';
 import { styled as muiStyled } from '@mui/styles';
 import withStyles from '@mui/styles/withStyles';
-import { Elements } from '@stripe/react-stripe-js';
-import { loadStripe } from '@stripe/stripe-js';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import DonationListForm from '../Donation/DonationListForm';
-import InjectedCheckoutForm from '../Donation/InjectedCheckoutForm';
-import standardBoxShadow from '../Style/standardBoxShadow';
-import { OuterWrapper } from '../Style/stepDisplayStyles';
-import LoadingWheelComp from '../Widgets/LoadingWheelComp';
+import CampaignStore from '../../stores/CampaignStore';
 import DonateStore from '../../stores/DonateStore';
+import { getCampaignXValuesFromIdentifiers, retrieveCampaignXFromIdentifiersIfNeeded } from '../../utils/campaignUtils';
 import historyPush from '../../utils/historyPush';
+import initializejQuery from '../../utils/initializejQuery';
 import { renderLog } from '../../utils/logging';
+import DonationListForm from '../Donation/DonationListForm';
 import { payToPromoteProcessStyles } from '../Style/CampaignSupportStyles';
-import webAppConfig from '../../../config';
-// import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
-import CampaignStore from '../../stores/CampaignStore';
-// import VoterStore from '../../../stores/VoterStore';
-import { getCampaignXValuesFromIdentifiers, retrieveCampaignXFromIdentifiersIfNeeded } from '../../utils/campaignUtils';
-import initializejQuery from '../../utils/initializejQuery';
-import SplitIconButton from '../Widgets/SplitIconButton';
+import standardBoxShadow from '../Style/standardBoxShadow';
+import { OuterWrapper } from '../Style/stepDisplayStyles';
+import LoadingWheelComp from '../Widgets/LoadingWheelComp';
 
-const stripePromise = loadStripe(webAppConfig.STRIPE_API_KEY);
 
-const futureFeaturesDisabled = true;
-const iconButtonStyles = {
-  width: window.innerWidth < 1280 ? 250 : 300,
-  margin: '16px',
-};
+// const iconButtonStyles = {
+//   width: window.innerWidth < 1280 ? 250 : 300,
+//   margin: '16px',
+// };
 
 class PayToPromoteProcess extends Component {
   constructor (props) {
@@ -354,58 +345,58 @@ class PayToPromoteProcess extends Component {
             </ContributeGridWrapper>
           </InnerWrapper>
         </OuterWrapper>
-        <PaymentWrapper>
-          {futureFeaturesDisabled ? (
-            <PaymentCenteredWrapper show>
-              <ButtonContainer>
-                {preDonation ? (
-                  <SplitIconButton
-                    buttonText="Submit my choice"
-                    backgroundColor="#0834CD"
-                    separatorColor="#0834CD"
-                    styles={iconButtonStyles}
-                    adjustedIconWidth={40}
-                    externalUniqueId="becomeAMember"
-                    icon={<LockStyled />}
-                    id="stripeCheckOutForm"
-                    onClick={this.onDonationTempSubmit}
-                  />
-                ) : (
-                  <div>
-                    Thank you for your choice!
-                    We are still building our payment processing system, but have recorded your choice.
-                  </div>
-                )}
-              </ButtonContainer>
-            </PaymentCenteredWrapper>
-          ) : (
-            <PaymentCenteredWrapper show={preDonation}>
-              {preDonation ? (
-                <Elements stripe={stripePromise}>
-                  <InjectedCheckoutForm
-                    value={chipInPaymentOtherValue || chipInPaymentValue}
-                    classes={{}}
-                    stopShowWaiting={this.stopShowWaiting}
-                    onDonation={this.onChipIn}
-                    showWaiting={showWaiting}
-                    isChipIn
-                    campaignXWeVoteId={campaignXWeVoteId}
-                  />
-                </Elements>
-              ) : (
-                <Button
-                  id="buttonReturn"
-                  classes={{ root: classes.buttonDefault }}
-                  color="primary"
-                  variant="contained"
-                  onClick={() => historyPush(returnPath)}
-                >
-                  {`Return to the "${campaignTitle}" Campaign`}
-                </Button>
-              )}
-            </PaymentCenteredWrapper>
-          )}
-        </PaymentWrapper>
+        {/*<PaymentWrapper>*/}
+        {/*  {futureFeaturesDisabled ? (*/}
+        {/*    <PaymentCenteredWrapper show>*/}
+        {/*      <ButtonContainer>*/}
+        {/*        {preDonation ? (*/}
+        {/*          <SplitIconButton*/}
+        {/*            buttonText="Submit my choice"*/}
+        {/*            backgroundColor="#0834CD"*/}
+        {/*            separatorColor="#0834CD"*/}
+        {/*            styles={iconButtonStyles}*/}
+        {/*            adjustedIconWidth={40}*/}
+        {/*            externalUniqueId="becomeAMember"*/}
+        {/*            icon={<LockStyled />}*/}
+        {/*            id="stripeCheckOutForm"*/}
+        {/*            onClick={this.onDonationTempSubmit}*/}
+        {/*          />*/}
+        {/*        ) : (*/}
+        {/*          <div>*/}
+        {/*            Thank you for your choice!*/}
+        {/*            We are still building our payment processing system, but have recorded your choice.*/}
+        {/*          </div>*/}
+        {/*        )}*/}
+        {/*      </ButtonContainer>*/}
+        {/*    </PaymentCenteredWrapper>*/}
+        {/*  ) : (*/}
+        {/*    <PaymentCenteredWrapper show={preDonation}>*/}
+        {/*      {preDonation ? (*/}
+        {/*        <Elements stripe={stripePromise}>*/}
+        {/*          <InjectedCheckoutForm*/}
+        {/*            value={chipInPaymentOtherValue || chipInPaymentValue}*/}
+        {/*            classes={{}}*/}
+        {/*            stopShowWaiting={this.stopShowWaiting}*/}
+        {/*            onDonation={this.onChipIn}*/}
+        {/*            showWaiting={showWaiting}*/}
+        {/*            isChipIn*/}
+        {/*            campaignXWeVoteId={campaignXWeVoteId}*/}
+        {/*          />*/}
+        {/*        </Elements>*/}
+        {/*      ) : (*/}
+        {/*        <Button*/}
+        {/*          id="buttonReturn"*/}
+        {/*          classes={{ root: classes.buttonDefault }}*/}
+        {/*          color="primary"*/}
+        {/*          variant="contained"*/}
+        {/*          onClick={() => historyPush(returnPath)}*/}
+        {/*        >*/}
+        {/*          {`Return to the "${campaignTitle}" Campaign`}*/}
+        {/*        </Button>*/}
+        {/*      )}*/}
+        {/*    </PaymentCenteredWrapper>*/}
+        {/*  )}*/}
+        {/*</PaymentWrapper>*/}
         <DonationListForm isCampaign leftTabIsMembership={false} />
       </PaymentToPromoteWrapper>
     );

diff --git a/src/js/components/Ready/ViewUpcomingBallotButton.jsx b/src/js/components/Ready/ViewUpcomingBallotButton.jsx
@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
-import BaseButton from '../Buttons/BaseButton';
+import VoterActions from '../../actions/VoterActions';
+import AppObservableStore from '../../common/stores/AppObservableStore';
+import apiCalming from '../../common/utils/apiCalming';
 import daysUntil from '../../common/utils/daysUntil';
 import historyPush from '../../common/utils/historyPush';
 import { renderLog } from '../../common/utils/logging';
-import AppObservableStore from '../../common/stores/AppObservableStore';
 import BallotStore from '../../stores/BallotStore';
 import VoterStore from '../../stores/VoterStore';
-import VoterActions from '../../actions/VoterActions';
-import apiCalming from '../../common/utils/apiCalming';
+import BaseButton from '../Buttons/BaseButton';
 
 class ViewUpcomingBallotButton extends React.Component {
   constructor (props) {

diff --git a/src/js/components/Style/BallotTitleHeaderStyles.jsx b/src/js/components/Style/BallotTitleHeaderStyles.jsx
@@ -1,16 +1,17 @@
 import styled from 'styled-components';
-import { isWebApp } from '../../common/utils/isCordovaOrWebApp';
 import colors from '../../common/components/Style/Colors';
-import DesignTokenColors from '../../common/components/Style/DesignTokenColors';  // 2024-04-16 Upgrade to using this
+import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
+import { isCordova, isWebApp } from '../../common/utils/isCordovaOrWebApp';
+import isMobileScreenSize from '../../common/utils/isMobileScreenSize'; // 2024-04-16 Upgrade to using this
 
 export const BallotAddress = styled('div', {
   shouldForwardProp: (prop) => !['centerText', 'allowTextWrap'].includes(prop),
 })(({ allowTextWrap, centerText }) => (`
   margin-left: 2px;
-  font-size: 18px;
-  ${allowTextWrap ? '' : 'overflow: hidden;'}
-  ${allowTextWrap ? '' : 'text-overflow: ellipsis;'}
-  ${allowTextWrap ? '' : 'white-space: nowrap;'}
+  ${isMobileScreenSize() || isCordova() ? '' : 'font-size: 18px;'}
+  ${allowTextWrap || isMobileScreenSize() || isCordova() ? '' : 'overflow: hidden;'}
+  ${allowTextWrap || isMobileScreenSize() || isCordova() ? '' : 'text-overflow: ellipsis;'}
+  ${allowTextWrap || isMobileScreenSize() || isCordova() ? '' : 'white-space: nowrap;'}
   ${centerText ? 'text-align: center;' : ''}
 `));
 

diff --git a/src/js/components/VoterGuide/OrganizationModal.jsx b/src/js/components/VoterGuide/OrganizationModal.jsx
@@ -200,6 +200,10 @@ class OrganizationModal extends Component {
   componentWillUnmount () {
     this.candidateStoreListener.remove();
     this.measureStoreListener.remove();
+    const drawer = document.querySelector('.MuiDrawer-paper');
+    if (drawer) {
+      drawer.removeListeners();
+    }
     AppObservableStore.setScrolledDownDrawer(false);
   }
 

diff --git a/src/js/pages/More/Donate.jsx b/src/js/pages/More/Donate.jsx
@@ -1,8 +1,6 @@
 import { Launch } from '@mui/icons-material';
 import { Button, FormControl, FormControlLabel, InputAdornment, Radio, RadioGroup, TextField } from '@mui/material';
 import withStyles from '@mui/styles/withStyles';
-import { Elements } from '@stripe/react-stripe-js';
-import { loadStripe } from '@stripe/stripe-js';
 import PropTypes from 'prop-types';
 import React, { Component, Suspense } from 'react';
 import { GoogleReCaptcha, GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
@@ -12,7 +10,6 @@ import AnalyticsActions from '../../actions/AnalyticsActions';
 import DonateActions from '../../common/actions/DonateActions';
 import DonationListForm from '../../common/components/Donation/DonationListForm';
 import DonorboxEmbed from '../../common/components/Donation/DonorboxEmbed';
-import InjectedCheckoutForm from '../../common/components/Donation/InjectedCheckoutForm';
 import standardBoxShadow from '../../common/components/Style/standardBoxShadow';
 import OpenExternalWebSite from '../../common/components/Widgets/OpenExternalWebSite';
 import DonateStore from '../../common/stores/DonateStore';
@@ -24,7 +21,7 @@ import webAppConfig from '../../config';
 import VoterStore from '../../stores/VoterStore';
 import $ajax from '../../utils/service';
 
-const stripePromise = loadStripe(webAppConfig.STRIPE_API_KEY);
+// const stripePromise = loadStripe(webAppConfig.STRIPE_API_KEY);
 
 
 class Donate extends Component {
@@ -380,16 +377,16 @@ class Donate extends Component {
                           </ContributeGridSection>
                         </ContributeGridWrapper>
                         <PaymentWrapper joining={joining}>
-                          <PaymentCenteredWrapper>
-                            <Elements stripe={stripePromise}>
-                              <InjectedCheckoutForm
-                                value={value}
-                                classes={{}}
-                                isMonthly={isMonthly}
-                                showWaiting={showWaiting}
-                              />
-                            </Elements>
-                          </PaymentCenteredWrapper>
+                          {/*<PaymentCenteredWrapper>*/}
+                            {/* <Elements stripe={stripePromise}> */}
+                            {/*  <InjectedCheckoutForm */}
+                            {/*    value={value} */}
+                            {/*    classes={{}} */}
+                            {/*    isMonthly={isMonthly} */}
+                            {/*    showWaiting={showWaiting} */}
+                            {/*  /> */}
+                            {/* </Elements> */}
+                          {/* </PaymentCenteredWrapper> */}
                         </PaymentWrapper>
                       </>
                     ) : (
@@ -592,18 +589,18 @@ const DonateCaveat = styled('p')`
   font-style: italic;
 `;
 
-const PaymentCenteredWrapper  = styled('div')(({ theme }) => (`
-  width: 500px;
-  ${theme.breakpoints.down('sm')} {
-    width: 300px;
-  }
-  display: inline-block;
-  background-color: rgb(246, 244,246);
-  box-shadow: ${standardBoxShadow('medium')};
-  border: 2px solid darkgrey;
-  border-radius: 3px;
-  padding: 8px;
-`));
+// const PaymentCenteredWrapper  = styled('div')(({ theme }) => (`
+//   width: 500px;
+//   ${theme.breakpoints.down('sm')} {
+//     width: 300px;
+//   }
+//   display: inline-block;
+//   background-color: rgb(246, 244,246);
+//   box-shadow: ${standardBoxShadow('medium')};
+//   border: 2px solid darkgrey;
+//   border-radius: 3px;
+//   padding: 8px;
+// `));
 
 
 const ContributeGridWrapper = styled('div')(({ theme }) => (`

diff --git a/src/js/pages/ReadyLight.jsx b/src/js/pages/ReadyLight.jsx
@@ -9,7 +9,8 @@ import ReadyActions from '../actions/ReadyActions';
 import AppObservableStore, { messageService } from '../common/stores/AppObservableStore';
 import apiCalming from '../common/utils/apiCalming';
 import historyPush from '../common/utils/historyPush';
-import { isAndroid, isWebApp } from '../common/utils/isCordovaOrWebApp';
+import { isAndroid, isCordova, isWebApp } from '../common/utils/isCordovaOrWebApp';
+import isMobileScreenSize from '../common/utils/isMobileScreenSize';
 import { renderLog } from '../common/utils/logging';
 import ReadyFinePrint from '../components/Ready/ReadyFinePrint';
 import ReadyIntroduction from '../components/Ready/ReadyIntroduction';
@@ -126,7 +127,7 @@ class ReadyLight extends Component {
                 </Suspense>
               </ElectionCountdownInnerWrapper>
             </ElectionCountdownOuterWrapper>
-            <ViewBallotButtonWrapper className="col-12">
+            <ViewBallotButtonWrapper className="col-12" style={isCordova() || isMobileScreenSize() ? { paddingTop: '18px' } : {}}>
               <Suspense fallback={<></>}>
                 <ViewUpcomingBallotButton onClickFunction={this.goToBallot} onlyOfferViewYourBallot />
               </Suspense>