@plusscommunities/pluss-core-app 6.1.7 → 6.1.8-auth.0

package/src/components/ConfirmPopup.js

@@ -1,120 +1,151 @@
-import React, { PureComponent } from 'react';
-import { Text, View } from 'react-native';
-import _ from 'lodash';
-import { connect } from 'react-redux';
-import { getMainBrandingColourFromState, TEXT_DARK } from '../colours';
-import { Spinner } from './Spinner';
-import { InlineButton } from './InlineButton';
-import { MiddlePopup } from './MiddlePopup';
+import React, { PureComponent } from "react";
+import { View } from "react-native";
+import { Text } from "./Text";
+import _ from "lodash";
+import { connect } from "react-redux";
+import { getMainBrandingColourFromState, TEXT_DARK } from "../colours";
+import { Spinner } from "./Spinner";
+import { InlineButton } from "./InlineButton";
+import { MiddlePopup } from "./MiddlePopup";
 
 class ConfirmPopup extends PureComponent {
-  render() {
-    return (
-      <MiddlePopup
-        visible={this.props.visible}
-        onClose={this.props.onClose}
-        style={[styles.popup, this.props.headerContent && { paddingTop: 16 }]}
-      >
-        {this.props.headerContent && <View style={{ width: 350, marginBottom: 16 }}>{this.props.headerContent}</View>}
-        {!_.isEmpty(this.props.text) && (
-          <Text style={[styles.text, this.props.textAlignLeft && styles.textAlignLeft]}>{this.props.text}</Text>
-        )}
-        {!_.isEmpty(this.props.subtext) && (
-          <Text style={[styles.subtext, this.props.textAlignLeft && styles.textAlignLeft]}>{this.props.subtext}</Text>
-        )}
-        {this.props.extraContent && <View style={{ width: 350, marginTop: 16 }}>{this.props.extraContent}</View>}
-        {this.props.children}
-        <View style={[styles.buttonsContainer, this.props.verticalButtons && styles.verticalButtons]}>
-          {this.props.buttonsLoading && (
-            <View style={styles.loadingContainer}>
-              <Spinner />
-            </View>
-          )}
-          {!this.props.hideNo && !this.props.buttonsLoading && (
-            <InlineButton
-              onPress={this.props.onCancel}
-              color="#fff"
-              style={[
-                styles.button,
-                styles.noButton,
-                this.props.verticalButtons && styles.buttonVertical,
-                { borderColor: this.props.colourBrandingMain },
-              ]}
-              textStyle={{ color: this.props.colourBrandingMain }}
-              large
-            >
-              {this.props.noText || 'No'}
-            </InlineButton>
-          )}
-          {!this.props.hideYes && !this.props.buttonsLoading && (
-            <InlineButton
-              onPress={this.props.onConfirm}
-              color={this.props.colourBrandingMain}
-              style={[styles.button, this.props.verticalButtons && styles.buttonVertical]}
-              large
-            >
-              {this.props.yesText || 'Yes'}
-            </InlineButton>
-          )}
-        </View>
-      </MiddlePopup>
-    );
-  }
+	render() {
+		return (
+			<MiddlePopup
+				visible={this.props.visible}
+				onClose={this.props.onClose}
+				style={[styles.popup, this.props.headerContent && { paddingTop: 16 }]}
+			>
+				{this.props.headerContent && (
+					<View style={{ width: 350, marginBottom: 16 }}>
+						{this.props.headerContent}
+					</View>
+				)}
+				{!_.isEmpty(this.props.text) && (
+					<Text
+						style={[
+							styles.text,
+							this.props.textAlignLeft && styles.textAlignLeft,
+						]}
+					>
+						{this.props.text}
+					</Text>
+				)}
+				{!_.isEmpty(this.props.subtext) && (
+					<Text
+						style={[
+							styles.subtext,
+							this.props.textAlignLeft && styles.textAlignLeft,
+						]}
+					>
+						{this.props.subtext}
+					</Text>
+				)}
+				{this.props.extraContent && (
+					<View style={{ width: 350, marginTop: 16 }}>
+						{this.props.extraContent}
+					</View>
+				)}
+				{this.props.children}
+				<View
+					style={[
+						styles.buttonsContainer,
+						this.props.verticalButtons && styles.verticalButtons,
+					]}
+				>
+					{this.props.buttonsLoading && (
+						<View style={styles.loadingContainer}>
+							<Spinner />
+						</View>
+					)}
+					{!this.props.hideNo && !this.props.buttonsLoading && (
+						<InlineButton
+							onPress={this.props.onCancel}
+							color="#fff"
+							style={[
+								styles.button,
+								styles.noButton,
+								this.props.verticalButtons && styles.buttonVertical,
+								{ borderColor: this.props.colourBrandingMain },
+							]}
+							textStyle={{ color: this.props.colourBrandingMain }}
+							large
+						>
+							{this.props.noText || "No"}
+						</InlineButton>
+					)}
+					{!this.props.hideYes && !this.props.buttonsLoading && (
+						<InlineButton
+							onPress={this.props.onConfirm}
+							color={this.props.colourBrandingMain}
+							style={[
+								styles.button,
+								this.props.verticalButtons && styles.buttonVertical,
+							]}
+							large
+						>
+							{this.props.yesText || "Yes"}
+						</InlineButton>
+					)}
+				</View>
+			</MiddlePopup>
+		);
+	}
 }
 
 const styles = {
-  popup: {
-    padding: 24,
-    margin: 16,
-    maxWidth: 350,
-  },
-  text: {
-    fontFamily: 'sf-bold',
-    fontSize: 20,
-    color: TEXT_DARK,
-    textAlign: 'center',
-  },
-  subtext: {
-    fontFamily: 'sf-regular',
-    fontSize: 17,
-    color: TEXT_DARK,
-    textAlign: 'center',
-  },
-  textAlignLeft: {
-    textAlign: 'left',
-  },
-  buttonsContainer: {
-    flexDirection: 'row',
-    marginTop: 24,
-  },
-  loadingContainer: {
-    height: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    width: 120,
-    paddingHorizontal: 2,
-  },
-  noButton: {
-    borderWidth: 1,
-    marginRight: 16,
-  },
-  buttonVertical: {
-    width: '100%',
-    marginTop: 16,
-    marginRight: 0,
-    paddingHorizontal: 8,
-  },
-  verticalButtons: {
-    flexDirection: 'column-reverse',
-  },
+	popup: {
+		padding: 24,
+		margin: 16,
+		maxWidth: 350,
+	},
+	text: {
+		fontFamily: "sf-bold",
+		fontSize: 20,
+		color: TEXT_DARK,
+		textAlign: "center",
+	},
+	subtext: {
+		fontFamily: "sf-regular",
+		fontSize: 17,
+		color: TEXT_DARK,
+		textAlign: "center",
+	},
+	textAlignLeft: {
+		textAlign: "left",
+	},
+	buttonsContainer: {
+		flexDirection: "row",
+		marginTop: 24,
+	},
+	loadingContainer: {
+		height: 40,
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	button: {
+		width: 120,
+		paddingHorizontal: 2,
+	},
+	noButton: {
+		borderWidth: 1,
+		marginRight: 16,
+	},
+	buttonVertical: {
+		width: "100%",
+		marginTop: 16,
+		marginRight: 0,
+		paddingHorizontal: 8,
+	},
+	verticalButtons: {
+		flexDirection: "column-reverse",
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const confirmPopup = connect(mapStateToProps, {})(ConfirmPopup);

package/src/components/ConfirmationPopup.js

@@ -1,79 +1,90 @@
-import React, { PureComponent } from 'react';
-import { Text } from 'react-native';
-import { connect } from 'react-redux';
-import { Pl60Icon } from '../fonts';
-import { COLOUR_GREEN, TEXT_DARK, getMainBrandingColourFromState } from '../colours';
-import { MiddlePopup } from './MiddlePopup';
-import { InlineButton } from './InlineButton';
+import React, { PureComponent } from "react";
+import { Text } from "./Text";
+import { connect } from "react-redux";
+import { FontAwesome } from "./Icon";
+import {
+	COLOUR_GREEN,
+	TEXT_DARK,
+	getMainBrandingColourFromState,
+} from "../colours";
+import { MiddlePopup } from "./MiddlePopup";
+import { InlineButton } from "./InlineButton";
 
 class ConfirmationPopup extends PureComponent {
-  render() {
-    return (
-      <MiddlePopup visible={this.props.visible} onClose={this.props.onClose} style={[styles.popup, this.props.style]}>
-        <Pl60Icon style={styles.icon} name="circleoutlined" />
-        <Text style={styles.text}>{this.props.confirmText}</Text>
-        {this.props.onPressAction && (
-          <InlineButton
-            onPress={this.props.onPressAction}
-            color={this.props.colourBrandingMain}
-            style={[styles.button, this.props.largeButtons && styles.largeButton]}
-            large={this.props.largeButtons}
-          >
-            {this.props.repeatText}
-          </InlineButton>
-        )}
-        <InlineButton
-          onPress={this.props.onClose}
-          color="#fff"
-          style={[
-            styles.button,
-            styles.closeButton,
-            this.props.largeButtons && styles.largeButton,
-            { borderColor: this.props.colourBrandingMain },
-          ]}
-          textStyle={{ color: this.props.colourBrandingMain }}
-          large={this.props.largeButtons}
-        >
-          Close
-        </InlineButton>
-      </MiddlePopup>
-    );
-  }
+	render() {
+		return (
+			<MiddlePopup
+				visible={this.props.visible}
+				onClose={this.props.onClose}
+				style={[styles.popup, this.props.style]}
+			>
+				<FontAwesome style={styles.icon} name="check-circle" />
+				<Text style={styles.text}>{this.props.confirmText}</Text>
+				{this.props.onPressAction && (
+					<InlineButton
+						onPress={this.props.onPressAction}
+						color={this.props.colourBrandingMain}
+						style={[
+							styles.button,
+							this.props.largeButtons && styles.largeButton,
+						]}
+						large={this.props.largeButtons}
+					>
+						{this.props.repeatText}
+					</InlineButton>
+				)}
+				<InlineButton
+					onPress={this.props.onClose}
+					color="#fff"
+					style={[
+						styles.button,
+						styles.closeButton,
+						this.props.largeButtons && styles.largeButton,
+						{ borderColor: this.props.colourBrandingMain },
+					]}
+					textStyle={{ color: this.props.colourBrandingMain }}
+					large={this.props.largeButtons}
+				>
+					Close
+				</InlineButton>
+			</MiddlePopup>
+		);
+	}
 }
 
 const styles = {
-  popup: {
-    width: 280,
-    paddingVertical: 40,
-  },
-  icon: {
-    fontSize: 52,
-    color: COLOUR_GREEN,
-  },
-  text: {
-    fontFamily: 'sf-bold',
-    fontSize: 24,
-    lineHeight: 24,
-    color: TEXT_DARK,
-    textAlign: 'center',
-    marginTop: 8,
-  },
-  button: {
-    width: 150,
-    marginTop: 20,
-  },
-  closeButton: {
-    borderWidth: 1,
-  },
-  largeButton: {
-    width: 250,
-  },
+	popup: {
+		width: 280,
+		paddingVertical: 40,
+	},
+	icon: {
+		fontSize: 52,
+		color: COLOUR_GREEN,
+	},
+	text: {
+		fontFamily: "sf-bold",
+		fontSize: 24,
+		lineHeight: 24,
+		color: TEXT_DARK,
+		textAlign: "center",
+		marginTop: 8,
+	},
+	button: {
+		width: 150,
+		marginTop: 20,
+	},
+	closeButton: {
+		borderWidth: 1,
+	},
+	largeButton: {
+		width: 250,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const confirmationPopup = connect(mapStateToProps, {})(ConfirmationPopup);

package/src/components/DocumentUploader.js

@@ -0,0 +1,255 @@
+import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import {
+	View,
+	TouchableOpacity,
+	StyleSheet,
+	ActivityIndicator,
+} from "react-native";
+import { Icon } from "@rneui/themed";
+import * as DocumentPicker from "expo-document-picker";
+import { connect } from "react-redux";
+import Config from "../config";
+import { fileActions } from "../apis";
+import { getValueOrDefault } from "../helper";
+import { TEXT_DARK, getMainBrandingColourFromState } from "../colours";
+
+const DEFAULT_DOCUMENT_NAME = "document";
+
+class DocumentUploader extends Component {
+	static defaultProps = {
+		allowedTypes: ["application/pdf"],
+		buttonTitle: "Upload Document",
+		buttonStyle: {},
+		buttonTextStyle: {},
+		onUploadStarted: () => {},
+		onUploadSuccess: () => {},
+		onUploadFailed: () => {},
+		onUploadProgress: null,
+		userId: null,
+		fileName: null,
+		disabled: false,
+	};
+
+	state = {
+		isUploading: false,
+		uploadProgress: 0,
+	};
+
+	pickDocument = async () => {
+		const { allowedTypes, multiple } = this.props;
+
+		try {
+			const result = await DocumentPicker.getDocumentAsync({
+				type: allowedTypes,
+				copyToCacheDirectory: true,
+				multiple: multiple || false,
+			});
+			// console.log('pickDocument', JSON.stringify(result, null, 2));
+
+			if (!result.canceled) {
+				await this.handleDocumentPicked(result);
+			}
+		} catch (error) {
+			console.log("Document picker error:", error);
+			this.props.onUploadFailed(null, error.message);
+		}
+	};
+
+	handleDocumentPicked = async (documentResult) => {
+		const { assets } = documentResult;
+		const { userId } = this.props;
+
+		try {
+			this.setState({ isUploading: true, uploadProgress: 0 });
+
+			// Process each asset in parallel
+			const uploadPromises = assets.map(async (asset) => {
+				const { name, uri, mimeType } = asset;
+
+				let file, fileExt;
+				if (name && name.includes(".")) {
+					const lastDotIndex = name.lastIndexOf(".");
+					file = name.substring(0, lastDotIndex);
+					fileExt = name.substring(lastDotIndex + 1);
+				} else {
+					// Fallback: extract extension from mimeType
+					file = name || "document";
+					if (mimeType) {
+						const mimeTypeParts = mimeType.split("/");
+						// Handle specific MIME type mappings
+						if (mimeType === "application/pdf") fileExt = "pdf";
+						else if (mimeType.startsWith("image/")) fileExt = mimeTypeParts[1];
+						else if (mimeType.startsWith("text/")) fileExt = "txt";
+						else fileExt = mimeTypeParts[1] || "pdf";
+					} else {
+						fileExt = "pdf";
+					}
+				}
+
+				// Generate a unique filename if not provided
+				const fileName = `${getValueOrDefault(this.props.fileName, DEFAULT_DOCUMENT_NAME)}.${fileExt}`;
+				const uploadUri = fileActions.getUploadUrl(userId, fileName);
+				// console.log('handleDocumentPicked', JSON.stringify({ uploadUri, uri, name, fileName, mimeType, file, fileExt }, null, 2));
+
+				try {
+					// Notify parent component that upload has started for this file
+					this.props.onUploadStarted(
+						uploadUri,
+						uri,
+						file,
+						fileExt.toUpperCase(),
+					);
+
+					const res = await fileActions.uploadUserMediaWithProgress(
+						uri,
+						uploadUri,
+						(progress) => {
+							if (this.props.onUploadProgress)
+								this.props.onUploadProgress(progress);
+						},
+					);
+
+					const fileUrl = Config.env.baseUploadsUrl + res.key;
+					this.props.onUploadSuccess(fileUrl, uploadUri);
+					console.log("Upload success", fileUrl);
+					return { success: true, url: fileUrl, uploadUri };
+				} catch (error) {
+					console.error(`Upload failed for ${name}:`, error);
+					this.props.onUploadFailed(uploadUri, error.message);
+					return { success: false, error, uploadUri };
+				}
+			});
+
+			// Wait for all uploads to complete
+			const results = await Promise.all(uploadPromises);
+			return results;
+		} catch (error) {
+			console.error("Document upload error:", error);
+			return [];
+		} finally {
+			this.setState({ isUploading: false, uploadProgress: 0 });
+		}
+	};
+
+	renderUploadButton = () => {
+		const { buttonTitle, buttonStyle, buttonTextStyle, disabled } = this.props;
+		const { isUploading } = this.state;
+		const mainColor = getMainBrandingColourFromState(this.props);
+
+		return (
+			<TouchableOpacity
+				style={[styles.uploadButton, { borderColor: mainColor }, buttonStyle]}
+				onPress={this.pickDocument}
+				disabled={isUploading || disabled}
+				activeOpacity={0.7}
+			>
+				<View style={styles.buttonContent}>
+					{isUploading ? (
+						<ActivityIndicator color={mainColor} />
+					) : (
+						<Icon
+							name="attachment"
+							type="entypo"
+							color={mainColor}
+							size={18}
+							style={styles.icon}
+						/>
+					)}
+					<Text
+						style={[styles.buttonText, { color: mainColor }, buttonTextStyle]}
+					>
+						{buttonTitle}
+					</Text>
+				</View>
+			</TouchableOpacity>
+		);
+	};
+
+	renderProgress = () => {
+		const { uploadProgress } = this.state;
+		if (uploadProgress <= 0 || uploadProgress >= 1) return null;
+
+		return (
+			<View style={styles.progressContainer}>
+				<View style={styles.progressBar}>
+					<View
+						style={[styles.progressFill, { width: `${uploadProgress * 100}%` }]}
+					/>
+				</View>
+				<Text style={styles.progressText}>
+					{Math.round(uploadProgress * 100)}%
+				</Text>
+			</View>
+		);
+	};
+
+	render() {
+		return (
+			<View style={styles.container}>
+				{this.renderUploadButton()}
+				{this.renderProgress()}
+			</View>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	container: {
+		marginVertical: 10,
+	},
+	uploadButton: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		paddingVertical: 8,
+		paddingHorizontal: 16,
+		borderRadius: 6,
+		backgroundColor: "#fff",
+		borderWidth: 1,
+		borderColor: "#007AFF",
+	},
+	buttonContent: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	buttonText: {
+		color: "#fff",
+		fontSize: 16,
+		fontWeight: "500",
+		marginLeft: 8,
+	},
+	icon: {
+		marginRight: 8,
+	},
+	progressContainer: {
+		marginTop: 8,
+		alignItems: "center",
+	},
+	progressBar: {
+		height: 4,
+		width: "100%",
+		backgroundColor: "#E0E0E0",
+		borderRadius: 2,
+		overflow: "hidden",
+	},
+	progressFill: {
+		height: "100%",
+		backgroundColor: "#4CAF50",
+	},
+	progressText: {
+		marginTop: 4,
+		fontSize: 12,
+		color: TEXT_DARK,
+	},
+});
+
+const mapStateToProps = (state) => {
+	const { user } = state;
+	return {
+		user,
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
+};
+
+export default connect(mapStateToProps)(DocumentUploader);