Arch changes and feature flags

frontend/src/components/FeatureFlagStatus.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useFeatureFlags } from '../contexts/FeatureFlagContext';
+
+const FeatureFlagStatus: React.FC = () => {
+  const { flags, loading, error, reloadFlags } = useFeatureFlags();
+
+  if (loading) {
+    return <div style={{ fontSize: '14px', color: '#666' }}>Loading feature flags...</div>;
+  }
+
+  if (error) {
+    return <div style={{ fontSize: '14px', color: '#d32f2f' }}>Error loading feature flags</div>;
+  }
+
+  if (!flags) {
+    return null;
+  }
+
+  const handleReload = async () => {
+    try {
+      await reloadFlags();
+      console.log('Feature flags reloaded');
+    } catch (error) {
+      console.error('Failed to reload feature flags:', error);
+    }
+  };
+
+  return (
+    <div className="card" style={{ marginBottom: '20px' }}>
+      <h4 style={{ marginBottom: '16px' }}>Feature Flags Status</h4>
+      
+      <div style={{ display: 'grid', gap: '8px', marginBottom: '16px' }}>
+        {Object.entries(flags.flags).map(([name, value]) => (
+          <div
+            key={name}
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: '8px 12px',
+              backgroundColor: '#f5f5f5',
+              borderRadius: '4px',
+              fontSize: '14px'
+            }}
+          >
+            <span style={{ fontWeight: '500' }}>
+              {name.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
+            </span>
+            <span
+              style={{
+                padding: '2px 8px',
+                borderRadius: '12px',
+                fontSize: '12px',
+                fontWeight: '500',
+                backgroundColor: value ? '#4CAF50' : '#f44336',
+                color: 'white'
+              }}
+            >
+              {String(value)}
+            </span>
+          </div>
+        ))}
+      </div>
+      
+      <button
+        className="btn btn-secondary"
+        onClick={handleReload}
+        style={{ fontSize: '12px', padding: '6px 12px' }}
+      >
+        Reload Flags
+      </button>
+      
+      <p style={{ fontSize: '12px', color: '#666', marginTop: '12px', marginBottom: 0 }}>
+        Feature flags are loaded from environment variables. Changes require updating the .env file and reloading.
+      </p>
+    </div>
+  );
+};
+
+export default FeatureFlagStatus;

frontend/src/components/MembershipSetup.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { membershipService, paymentService, MembershipTier, MembershipCreateData, PaymentCreateData } from '../services/membershipService';
+import { useFeatureFlags } from '../contexts/FeatureFlagContext';
 import SquarePayment from './SquarePayment';
 
 interface MembershipSetupProps {
@@ -15,6 +16,8 @@ const MembershipSetup: React.FC<MembershipSetupProps> = ({ onMembershipCreated,
   const [paymentMethod, setPaymentMethod] = useState<'square' | 'cash' | null>(null);
   const [error, setError] = useState('');
   const [createdMembershipId, setCreatedMembershipId] = useState<number | null>(null);
+  
+  const { isEnabled } = useFeatureFlags();
 
   useEffect(() => {
     loadTiers();
@@ -202,26 +205,28 @@ const MembershipSetup: React.FC<MembershipSetupProps> = ({ onMembershipCreated,
                 <span>→</span>
               </button>
 
-              <button
-                className="btn btn-secondary"
-                onClick={() => handlePaymentMethodSelect('cash')}
-                disabled={loading}
-                style={{
-                  padding: '16px',
-                  textAlign: 'left',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
-                }}
-              >
-                <div>
-                  <strong>Cash Payment</strong>
-                  <div style={{ fontSize: '14px', marginTop: '4px', opacity: 0.8 }}>
-                    Pay in person or by check
+              {isEnabled('CASH_PAYMENT_ENABLED') && (
+                <button
+                  className="btn btn-secondary"
+                  onClick={() => handlePaymentMethodSelect('cash')}
+                  disabled={loading}
+                  style={{
+                    padding: '16px',
+                    textAlign: 'left',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center'
+                  }}
+                >
+                  <div>
+                    <strong>Cash Payment</strong>
+                    <div style={{ fontSize: '14px', marginTop: '4px', opacity: 0.8 }}>
+                      Pay in person or by check
+                    </div>
                   </div>
-                </div>
-                <span>→</span>
-              </button>
+                  <span>→</span>
+                </button>
+              )}
             </div>
 
             <div style={{ marginTop: '20px', textAlign: 'center' }}>

frontend/src/components/ProfileMenu.tsx

@@ -285,19 +285,33 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({ onClose }) =>
             </div>
           )}
 
-          <div className="modal-buttons">
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '16px' }}>
             <button
               type="button"
               onClick={onClose}
               disabled={loading}
-              className="modal-btn-cancel"
+              style={{
+                padding: '10px 20px',
+                backgroundColor: '#6c757d',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer'
+              }}
             >
               Cancel
             </button>
             <button
               type="submit"
               disabled={loading}
-              className="modal-btn-primary"
+              style={{
+                padding: '10px 20px',
+                backgroundColor: '#28a745',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer'
+              }}
             >
               {loading ? 'Changing...' : 'Change Password'}
             </button>