diff --git a/package-lock.json b/package-lock.json
index 4290b7f..e9b547b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "^3.31.1",
+ "react-native-simple-radio-button": "^2.7.4",
"react-native-svg": "^15.2.0",
"react-native-ui-lib": "^7.26.2",
"react-redux": "^8.1.2",
@@ -49,6 +50,7 @@
"@types/jest": "^29.5.12",
"@types/react": "18.2",
"@types/react-native-confetti": "^0.1.4",
+ "@types/react-native-simple-radio-button": "^2.7.7",
"eslint": "^8.57.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^18.0.0",
@@ -7011,6 +7013,17 @@
"@types/react": "*"
}
},
+ "node_modules/@types/react-native-simple-radio-button": {
+ "version": "2.7.7",
+ "resolved": "https://registry.npmjs.org/@types/react-native-simple-radio-button/-/react-native-simple-radio-button-2.7.7.tgz",
+ "integrity": "sha512-cDDpMb+MyYDrZmQX/phRdpbW4SJynTv165MWkwjqa39jbuSkMAxuvBdiTCTBTiugikPRvQRFBG1wPRF/+0Lprw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@types/react": "*",
+ "react-native": "*"
+ }
+ },
"node_modules/@types/semver": {
"version": "7.5.8",
"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
@@ -16205,6 +16218,12 @@
"react-native": "*"
}
},
+ "node_modules/react-native-simple-radio-button": {
+ "version": "2.7.4",
+ "resolved": "https://registry.npmjs.org/react-native-simple-radio-button/-/react-native-simple-radio-button-2.7.4.tgz",
+ "integrity": "sha512-QOZNmJUn0ViBGU+at7wAG/uGzd5PfXi0kMHr9lfTCLXknW/f9f2fOVjxjdHvOCdf/zA/eMJBjGjtusSDzQf1+w==",
+ "license": "MIT"
+ },
"node_modules/react-native-svg": {
"version": "15.2.0",
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.2.0.tgz",
diff --git a/package.json b/package.json
index be7cb1b..b17bc65 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "^3.31.1",
+ "react-native-simple-radio-button": "^2.7.4",
"react-native-svg": "^15.2.0",
"react-native-ui-lib": "^7.26.2",
"react-redux": "^8.1.2",
@@ -54,6 +55,7 @@
"@types/jest": "^29.5.12",
"@types/react": "18.2",
"@types/react-native-confetti": "^0.1.4",
+ "@types/react-native-simple-radio-button": "^2.7.7",
"eslint": "^8.57.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^18.0.0",
diff --git a/src/modules/membership/Proof.tsx b/src/modules/membership/Proof.tsx
index bb8c8be..12eefce 100644
--- a/src/modules/membership/Proof.tsx
+++ b/src/modules/membership/Proof.tsx
@@ -12,6 +12,7 @@ import {
GestureResponderEvent,
} from 'react-native';
import Confetti from 'react-native-confetti';
+import RadioForm from 'react-native-simple-radio-button';
import { Button, Incubator } from 'react-native-ui-lib';
import theme from 'src/theme';
@@ -76,6 +77,7 @@ interface PurchaseButtonProps {
isLoadingMembershipType: boolean;
membershipPrice: number;
onPurchasePress: () => void;
+ setMembershipTypeSlug: (value: string) => void;
}
const PurchaseButton = ({
@@ -84,13 +86,36 @@ const PurchaseButton = ({
isLoadingMembershipType,
onPurchasePress,
membershipPrice,
+ setMembershipTypeSlug,
}: PurchaseButtonProps) => {
if (user.is_member) {
return null;
}
+ const options = [
+ { label: 'Student', value: 'student' },
+ { label: 'Ordinær', value: 'standard' },
+ { label: 'Støtte', value: 'support' },
+ ];
+
+ const onSelect = (value: string) => {
+ setMembershipTypeSlug(value);
+ };
+
return (
+
{paymentLoading && }
@@ -273,7 +306,7 @@ const styles = StyleSheet.create({
fontSize: 18,
},
purchaseButton: {
- marginTop: 16,
+ marginTop: 8,
},
logoutButton: {
alignSelf: 'center',
@@ -308,4 +341,10 @@ const styles = StyleSheet.create({
width: Dimensions.get('window').width * 0.8, // 80% of screen width
alignSelf: 'center',
},
+ radioForm: {
+ alignSelf: 'center',
+ textAlign: 'center',
+ marginTop: 20,
+ gap: 12,
+ },
});
diff --git a/src/modules/membership/useProof.tsx b/src/modules/membership/useProof.tsx
index b7b102b..2cf3d22 100644
--- a/src/modules/membership/useProof.tsx
+++ b/src/modules/membership/useProof.tsx
@@ -9,7 +9,7 @@ import { ToastProps } from 'src/types/toast';
const PROOF_QUERY = gql`
{
- membershipTypes(isDefault: true) {
+ membershipTypes {
slug
price
}
@@ -26,7 +26,8 @@ const useProof = ({ fetchUser }: UseProofProps) => {
const { data, loading } = useQuery(PROOF_QUERY);
const { initPaymentSheet, presentPaymentSheet } = useStripe();
const [paymentLoading, setPaymentLoading] = useState(false);
- const membershipTypeSlug = data?.membershipTypes?.[0]?.slug ?? 'standard';
+ const [membershipTypeSlug, setMembershipTypeSlug] = useState('standard');
+ const [membershipPrice, setMembershipPrice] = useState(25000); // WARNING: Hardcoded due to state not being loaded initially. Should probably be fixed.
const [toast, setToast] = useState(null);
const openPaymentSheet = async () => {
@@ -77,7 +78,15 @@ const useProof = ({ fetchUser }: UseProofProps) => {
}
}, [fetchUser, user?.last_membership]);
- const membershipPrice = data?.membershipTypes?.[0]?.price;
+ useEffect(() => {
+ // eslint-disable-next-line no-restricted-syntax
+ for (const membershipType of data?.membershipTypes ?? []) {
+ if (membershipType.slug === membershipTypeSlug) {
+ setMembershipPrice(membershipType.price);
+ }
+ }
+ }, [membershipTypeSlug, data?.membershipTypes]);
+
return {
isLoadingMembershipType: loading,
membershipPrice: membershipPrice ? membershipPrice / 100 : 0,
@@ -86,6 +95,7 @@ const useProof = ({ fetchUser }: UseProofProps) => {
toast,
setToast,
user,
+ setMembershipTypeSlug,
};
};