From fa9ecfe83a18ea9ec437e59f2063262f546032e0 Mon Sep 17 00:00:00 2001
From: Leander Furumo <leander@furumo.eu>
Date: Tue, 20 Aug 2024 00:55:45 +0200
Subject: [PATCH] replace radio buttons with custom implementation

---
 src/components/RadioButton.tsx   | 46 ++++++++++++++++++++++++++++++++
 src/modules/membership/Proof.tsx | 41 ++++++++++++++--------------
 2 files changed, 67 insertions(+), 20 deletions(-)
 create mode 100644 src/components/RadioButton.tsx

diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx
new file mode 100644
index 0000000..a2bd352
--- /dev/null
+++ b/src/components/RadioButton.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Text, Pressable, StyleSheet } from 'react-native';
+
+import theme from 'src/theme';
+
+export default function RadioButton({ data, onSelect, defaultValue }) {
+  const [userOption, setUserOption] = useState(defaultValue.value);
+
+  const selectHandler = (value) => {
+    onSelect(value);
+    setUserOption(value);
+  };
+
+  return (
+    <>
+      {data.map((item) => {
+        return (
+          <Pressable
+            key={item.value}
+            style={[styles.box, item.value === userOption ? styles.selected : styles.unselected]}
+            onPress={() => selectHandler(item.value)}
+          >
+            <Text style={styles.text}>{item.label}</Text>
+          </Pressable>
+        );
+      })}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    padding: 12,
+    margin: 4,
+    borderRadius: 12,
+  },
+  selected: {
+    backgroundColor: theme.colors.neufOrange,
+  },
+  unselected: {
+    backgroundColor: theme.colors.gray1,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
diff --git a/src/modules/membership/Proof.tsx b/src/modules/membership/Proof.tsx
index dbaaee8..405f51b 100644
--- a/src/modules/membership/Proof.tsx
+++ b/src/modules/membership/Proof.tsx
@@ -12,9 +12,9 @@ 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 RadioButton from 'src/components/RadioButton';
 import theme from 'src/theme';
 import type { UserType } from 'src/types/data';
 
@@ -88,34 +88,30 @@ const PurchaseButton = ({
   membershipPrice,
   setMembershipTypeSlug,
 }: PurchaseButtonProps) => {
-  if (user.is_member) {
-    return null;
-  }
-
   const options = [
     { label: 'Student', value: 'student' },
     { label: 'Ordinær', value: 'regular' },
     { label: 'Støtte', value: 'support' },
   ];
 
+  const defaultValue = options[1];
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => onSelect(defaultValue.value), []);
+
   const onSelect = (value: string) => {
     setMembershipTypeSlug(value);
   };
 
+  if (user.is_member) {
+    return null;
+  }
+
   return (
     <View>
-      <RadioForm
-        radio_props={options}
-        initial={1}
-        formHorizontal={true}
-        labelHorizontal={false}
-        buttonColor={theme.colors.neufOrange}
-        // @ts-expect-error No overload matches this call. We ignore since we need to style the button
-        selectedButtonColor={theme.colors.neufOrange}
-        animation={false}
-        onPress={onSelect}
-        style={styles.radioForm}
-      />
+      <Text style={[theme.text, styles.selectText]}>Velg medlemskapstype</Text>
+      <View style={styles.radioForm}>
+        <RadioButton data={options} onSelect={onSelect} defaultValue={defaultValue} style={styles.radioForm} />
+      </View>
       {paymentLoading && <ActivityIndicator color={theme.colors.neufOrange} />}
       <Button
         onPress={onPurchasePress}
@@ -321,6 +317,7 @@ const styles = StyleSheet.create({
   },
   purchaseText: {
     alignItems: 'center',
+    marginBottom: 20,
   },
   purchaseTextInner: {
     fontStyle: 'italic',
@@ -341,9 +338,13 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   radioForm: {
-    alignSelf: 'center',
+    marginTop: 4,
+    marginBottom: 20,
+  },
+  selectText: {
     textAlign: 'center',
-    marginTop: 20,
-    gap: 12,
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginTop: 30,
   },
 });