@propel-nsl/propel-react-native-sdk 1.0.0

package/src/screens/Faq/Faq.constants.ts

@@ -0,0 +1,164 @@
+export interface FAQItem {
+    id: number;
+    question: string;
+    answer: string;
+  }
+  
+  export const faqData: FAQItem[] = [
+    // Q1. What are NSL Points?
+    {
+      id: 1,
+      question: "What are NSL Points?",
+      answer: "NSL Points are digital reward points you earn as part of your organization's rewards and recognition program. These can be redeemed on the Propel platform for a wide range of brand vouchers and products.",
+    },
+    // Q2. Do NSL Points expire?
+    {
+      id: 2,
+      question: "Do NSL Points expire?",
+      answer: "Yes. NSL Points are typically valid for 1 year from the date of credit, unless specified differently by your organization.",
+    },
+    // Q3. I haven't received the points I expected. What should I do?
+    {
+      id: 3,
+      question: "I haven't received the points I expected. What should I do?",
+      answer: "Please contact your Program Administrator or raise a support ticket through your dashboard to get this resolved.",
+    },
+    // Q4. Can I transfer or gift my NSL Points to another user?
+    {
+      id: 4,
+      question: "Can I transfer or gift my NSL Points to another user?",
+      answer: "No. NSL Points are non-transferable and can be used only by the account holder to whom they are credited.",
+    },
+    // Q5. Can I convert NSL Points to cash?
+    {
+      id: 5,
+      question: "Can I convert NSL Points to cash?",
+      answer: "No. NSL Points cannot be encashed and are valid only for redemption on the platform.",
+    },
+    // Q6. How do I redeem my NSL Points?
+    {
+      id: 6,
+      question: "How do I redeem my NSL Points?",
+      answer: "1. Open the NSL Gold Club App and go to 'Redeem'\n2. Browse the available categories (e.g., E-Gift Vouchers)\n3. Select the item, enter quantity, and provide shipping details (if needed)\n4. Select NSL Points as payment method\n5. Confirm your order",
+    },
+    // Q7. What are the available redemption options?
+    {
+      id: 7,
+      question: "What are the available redemption options?",
+      answer: "You can redeem NSL Points for:\n• E-Gift Vouchers from brands like Amazon, Myntra, Flipkart, etc.",
+    },
+    // Q8. Can I make part-payment using both NSL Points and another payment method?
+    {
+      id: 8,
+      question: "Can I make part-payment using both NSL Points and another payment method?",
+      answer: "No. Orders must be paid entirely using NSL Points. Combining with other payment methods like UPI, Netbanking, or Cards is not supported.",
+    },
+    // Q9. Can my organization restrict certain brands from redemption?
+    {
+      id: 9,
+      question: "Can my organization restrict certain brands from redemption?",
+      answer: "Yes. Your organization may choose to restrict or promote specific categories or brands. Only approved items will be visible to you.",
+    },
+    // Q10. Can I cancel my order after placing it?
+    {
+      id: 10,
+      question: "Can I cancel my order after placing it?",
+      answer: "Orders can be cancelled only if they are still in 'Pending' status. Once processed or completed, orders cannot be cancelled.",
+    },
+    // Q11. I redeemed points for the wrong product. Can I change it?
+    {
+      id: 11,
+      question: "I redeemed points for the wrong product. Can I change it?",
+      answer: "No. Once an order is confirmed, it cannot be modified or exchanged. Please review your order carefully before confirming.",
+    },
+    // Q12. I redeemed for an e-voucher but haven't received it yet. What should I do?
+    {
+      id: 12,
+      question: "I redeemed for an e-voucher but haven't received it yet. What should I do?",
+      answer: "E-vouchers are usually delivered within minutes to your registered email and also appear in 'My Orders'. If not received within 24 hours, contact support.",
+    },
+    // Q13. I applied a voucher code but it didn't work. What should I do?
+    {
+      id: 13,
+      question: "I applied a voucher code but it didn't work. What should I do?",
+      answer: "1. Check the expiry date and applicable platform/category\n2. If the issue persists, contact support via email/call/WhatsApp",
+    },
+    // Q14. What is the refund policy for cancelled orders?
+    {
+      id: 14,
+      question: "What is the refund policy for cancelled orders?",
+      answer: "If your cancellation request is accepted, the redeemed NSL Points will be refunded back to your account.",
+    },
+    // Q15. How can I track my order status?
+    {
+      id: 15,
+      question: "How can I track my order status?",
+      answer: "Go to 'My Orders' in the NSL Gold Club App to view live order status, voucher codes, and download options.",
+    },
+    // Q16. Can I see the full history of my past redemptions?
+    {
+      id: 16,
+      question: "Can I see the full history of my past redemptions?",
+      answer: "Yes. Your complete redemption history, including order details and status, is available under 'My Orders'.",
+    },
+    // Q17. Will I get a GST invoice or tax receipt for my redemption?
+    {
+      id: 17,
+      question: "Will I get a GST invoice or tax receipt for my redemption?",
+      answer: "No. GST invoices are not issued for point-based redemptions.",
+    },
+    // Q18. I can't log in to my account. What should I do?
+    {
+      id: 18,
+      question: "I can't log in to my account. What should I do?",
+      answer: "Make sure you're using the correct mobile number registered with your organization. If the issue persists, contact support.",
+    },
+    // Q19. How can I update my mobile number or email ID?
+    {
+      id: 19,
+      question: "How can I update my mobile number or email ID?",
+      answer: "Please reach out to your NSL Program Administrator or contact our support team to update your contact details.",
+    },
+    // Q20. Can I delete my account or data from the system?
+    {
+      id: 20,
+      question: "Can I delete my account or data from the system?",
+      answer: "Yes, but only through your organization's administrator. Please raise a request with them.",
+    },
+    // Q21. Are my personal details secure on the platform?
+    {
+      id: 21,
+      question: "Are my personal details secure on the platform?",
+      answer: "Yes. Your data is protected with enterprise-grade security protocols and is used only for program-related activities.",
+    },
+    // Q22. Can I have multiple accounts on the platform?
+    {
+      id: 22,
+      question: "Can I have multiple accounts on the platform?",
+      answer: "No. Each user can have only one registered account linked to their organization profile.",
+    },
+    // Q23. How can I contact Propel Support?
+    {
+      id: 23,
+      question: "How can I contact Propel Support?",
+      answer: "Email: team@zaggle.in\nCall: 1860-500-3748 (Mon–Fri, 10 AM–7 PM)\nWhatsApp: +91 83677 23456 (Mon–Fri, 10 AM–7 PM)",
+    },
+    // Q24. What information should I share when contacting support?
+    {
+      id: 24,
+      question: "What information should I share when contacting support?",
+      answer: "Please include:\n• Your registered mobile number\n• Order ID (if related to a redemption)\n• Description or screenshot of the issue",
+    },
+    // Q25. Where can I find announcements or policy updates related to NSL Points?
+    {
+      id: 25,
+      question: "Where can I find announcements or policy updates related to NSL Points?",
+      answer: "All important updates are shared via email, app notifications, or through your organization's internal communication.",
+    },
+  ];
+  
+  export const HARDWARE_BACK_PRESS = "hardwareBackPress";
+
+  export const FAQS = "FAQ's"
+
+  export const All_FAQs = "All FAQ's"

package/src/screens/Faq/index.tsx

@@ -0,0 +1,114 @@
+import React, {useState } from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+} from "react-native";
+import styles from "./styles";
+import { CustomImage } from "../../../src-app/components";
+import Images from "../../../src-app/constants/Images";
+import MobileHeader from "../../../src-app/components/MobileHeader";
+import { RouteProp, useRoute } from "@react-navigation/native";
+import { AppStackParamList } from "../../../src-app/types/navigation";
+import { All_FAQs, faqData, FAQS} from "./Faq.constants";
+import { ROUTES } from "../../../src-app/constants/Routes";
+import { handleCustomGoBack } from "../../../src-app/utils/navigationUtils";
+import { useHardwareBack } from "../../../src-app/utils/useHardwareBack";
+
+interface FAQProps {
+  navigation?: any;
+}
+
+type FAQRouteProp = RouteProp<AppStackParamList, "FAQ">;
+
+const FAQ: React.FC<FAQProps> = ({ navigation }) => {
+  const route = useRoute<FAQRouteProp>();
+  const [expandedItems, setExpandedItems] = useState<number[]>([1]);
+
+  const toggleExpanded = (itemId: number) => {
+    setExpandedItems((prev) => {
+      if (prev.includes(itemId)) {
+        return prev.filter((id) => id !== itemId);
+      } else {
+        return [...prev, itemId];
+      }
+    });
+  };
+
+  const handleGoBack = () =>
+    handleCustomGoBack(navigation, route, {
+      map: {
+        [ROUTES.FAQ]: ROUTES.PROFILE,
+        [ROUTES.PROFILE]: ROUTES.DASHBOARD,
+      },
+      fallback: ROUTES.DASHBOARD,
+    });
+  
+  useHardwareBack(handleGoBack)
+
+  return (
+    <View style={styles.container}>
+      <MobileHeader
+        title={FAQS}
+        showBack
+        onBack={() => handleGoBack()}
+      />
+
+      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+
+        <Text style={styles.sectionTitle}>{All_FAQs}</Text>
+
+        <View style={styles.faqContainer}>
+          {faqData.map((item) => {
+            const isExpanded = expandedItems.includes(item?.id);
+            return (
+              <View key={item?.id} style={styles.faqItem}>
+                <TouchableOpacity
+                  activeOpacity={0.7}
+                  style={[
+                    styles.faqHeader,
+                    isExpanded && styles.expandedHeader,
+                  ]}
+                  onPress={() => toggleExpanded(item?.id)}
+                >
+                  <Text style={styles.faqQuestion}>{item?.question}</Text>
+                  <View style={styles.iconContainer}>
+                    {isExpanded ? (
+                      <CustomImage
+                        source={Images?.minusIcon}
+                        imgStyle={styles.icon}
+                      />
+                    ) : (
+                      <CustomImage
+                        source={Images?.plusIcon}
+                        imgStyle={styles.icon}
+                      />
+                    )}
+                  </View>
+                </TouchableOpacity>
+
+                {isExpanded && (
+                  <View style={styles.faqAnswerContainer}>
+                    <View style={styles.separator} />
+                    <Text style={styles.faqAnswer}>{item?.answer}</Text>
+                  </View>
+                )}
+              </View>
+            );
+          })}
+        </View>
+
+        <View style={styles.contactContainer}>
+          <Text style={styles.contactTitle}>FAQ'S</Text>
+          <Text style={styles.contactText}>
+            If your questions doesn't figure here, just ask us at
+          </Text>
+          <Text style={styles.contactEmail}>team@zaggle.in</Text>
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default FAQ;

package/src/screens/Faq/styles.ts

@@ -0,0 +1,131 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../../src-app/constants/Fonts';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  header: {
+    height: 110,
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingTop: 54,
+    paddingHorizontal: 20,
+    paddingBottom: 16,
+  },
+  backButton: {
+    padding: 8,
+    marginRight: 8,
+  },
+  headerTitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 18,
+    fontWeight: '400',
+    color: '#1F2937',
+    flex: 1,
+    textAlign: 'center',
+    marginRight: 32,
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+  },
+  sectionTitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '400',
+    color: '#1F2937',
+    marginBottom: 13,
+  },
+  faqContainer: {
+    gap: 14,
+    marginBottom: 100,
+  },
+  faqItem: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    backgroundColor: '#FFFFFF',
+    overflow: 'hidden',
+  },
+  faqHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 16,
+    minHeight: 50,
+  },
+  expandedHeader: {
+    paddingBottom: 0,
+  },
+  faqQuestion: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '400',
+    color: '#1F2937',
+    lineHeight: 18,
+    letterSpacing: -0.165,
+    flex: 1,
+    marginRight: 12,
+  },
+  iconContainer: {
+    width: 16,
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  faqAnswerContainer: {
+    paddingHorizontal: 12,
+    paddingBottom: 16,
+  },
+  separator: {
+    height: 1,
+    backgroundColor: '#D1D5DB',
+    marginBottom: 12,
+    marginTop: 12,
+  },
+  faqAnswer: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '400',
+    color: '#6B7280',
+    lineHeight: 21,
+    letterSpacing: -0.165,
+  },
+  icon: {
+    height: 24,
+    width: 24,
+  },
+  contactContainer: {
+    alignItems: 'center',
+    marginTop: 20,
+    marginBottom: 40,
+  },
+  contactTitle: {
+    fontFamily: FontFamily.LEXEND_BOLD,
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#1F2937',
+    marginBottom: 8,
+  },
+  contactText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '400',
+    color: '#6B7280',
+    textAlign: 'center',
+    marginBottom: 4,
+  },
+  contactEmail: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '400',
+    color: '#3B82F6',
+    textAlign: 'center',
+  },
+});
+
+export default styles;

package/src/screens/Help/index.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Linking,
+} from 'react-native';
+import styles from './styles';
+import { CustomImage } from '../../../src-app/components';
+import Images from '../../../src-app/constants/Images';
+import {
+  HELP_CENTER_TITLE,
+  HELP_CALL_TITLE,
+  HELP_CALL_SUBTITLE,
+  HELP_CHAT_TITLE,
+  HELP_CHAT_SUBTITLE,
+  HELP_MAIL_TITLE,
+  HELP_MAIL_SUBTITLE,
+  HELP_NOTE_TITLE,
+  HELP_NOTE_TEXT,
+} from '../../../src-app/constants/Messages';
+
+const Help: React.FC = () => {
+  const handleCallPress = () => {
+    Linking.openURL('tel:18605003748');
+  };
+
+  const handleChatPress = () => {
+    Linking.openURL('https://wa.me/+918367723456');
+  };
+
+  const handleMailPress = () => {
+    Linking.openURL('mailto:team@zaggle.in');
+  };
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>{HELP_CENTER_TITLE}</Text>
+      </View>
+
+      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+        {/* Contact Options */}
+        <View style={styles.contactSection}>
+          {/* Call Option */}
+          <TouchableOpacity
+            style={styles.contactItem}
+            onPress={handleCallPress}
+          >
+            <View style={styles.contactInfo}>
+              <CustomImage source={Images.call} imgStyle={styles.icon} />
+
+              <View style={styles.contactText}>
+                <Text style={styles.contactTitle}>{HELP_CALL_TITLE}</Text>
+                <Text style={styles.contactSubtitle}>
+                  {HELP_CALL_SUBTITLE}
+                </Text>
+              </View>
+            </View>
+            <CustomImage
+              source={Images.arrowright}
+              imgStyle={styles.rightIcon}
+            />
+          </TouchableOpacity>
+
+          <View style={styles.separator} />
+
+          {/* Chat Option */}
+          <TouchableOpacity
+            style={styles.contactItem}
+            onPress={handleChatPress}
+          >
+            <View style={styles.contactInfo}>
+              <CustomImage source={Images.chat} imgStyle={styles.icon} />
+              <View style={styles.contactText}>
+                <Text style={styles.contactTitle}>{HELP_CHAT_TITLE}</Text>
+                <Text style={styles.contactSubtitle}>
+                  {HELP_CHAT_SUBTITLE}
+                </Text>
+              </View>
+            </View>
+            <CustomImage
+              source={Images.arrowright}
+              imgStyle={styles.rightIcon}
+            />
+          </TouchableOpacity>
+
+          <View style={styles.separator} />
+
+          {/* Mail Option */}
+          <TouchableOpacity
+            style={styles.contactItem}
+            onPress={handleMailPress}
+          >
+            <View style={styles.contactInfo}>
+              <CustomImage source={Images.email} imgStyle={styles.icon} />
+              <View style={styles.contactText}>
+                <Text style={styles.contactTitle}>{HELP_MAIL_TITLE}</Text>
+                <Text style={styles.contactSubtitle}>
+                  {HELP_MAIL_SUBTITLE}
+                </Text>
+              </View>
+            </View>
+            <CustomImage
+              source={Images.arrowright}
+              imgStyle={styles.rightIcon}
+            />
+          </TouchableOpacity>
+
+          <View style={styles.separator} />
+        </View>
+
+        {/* Note Section */}
+        <View style={styles.noteSection}>
+        <Text style={styles.noteTitle}>{HELP_NOTE_TITLE}</Text>
+        <View style={styles.bulletRow}>
+          <Text style={styles.bulletSymbol}>•</Text>
+          <Text style={styles.noteText}>{HELP_NOTE_TEXT}</Text>
+        </View>
+      </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default Help;

package/src/screens/Help/styles.ts

@@ -0,0 +1,121 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../../src-app/constants/Fonts';
+import { colors } from '../../../src-app/styles/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  header: {
+    height: 118,
+    backgroundColor: colors.background,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingBottom: 18,
+    paddingTop: 54,
+  },
+  headerTitle: {
+    fontFamily: FontFamily.LEXEND_SEMIBOLD,
+    fontSize: 18,
+    fontWeight: '600',
+    color: colors.timeText,
+    lineHeight: 28,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 32,
+  },
+  contactSection: {
+    marginTop: 12,
+    width: 329,
+  },
+  contactItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 16,
+    width:'100%'
+  },
+  contactInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex:1,
+    gap: 12,
+  },
+  contactText: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    gap: 4,
+  },
+  contactTitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '400',
+    color: colors.pointsValue,
+    lineHeight: 14,
+  },
+  contactSubtitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    lineHeight: 15,
+  },
+  separator: {
+    width: 329,
+    height: 1.2,
+    backgroundColor: colors.variantBackground,
+  },
+  noteSection: {
+    marginTop: 28,
+    marginHorizontal: -12,
+    padding: 16,
+    borderRadius: 12,
+    backgroundColor: colors.surfaceVariant,
+    gap: 8,
+  },
+  noteTitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '400',
+    color: colors.black,
+    lineHeight: 12,
+  },
+  bulletRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginTop: 3,
+  },
+  bulletSymbol: {
+    fontSize: 16,
+    lineHeight: 18,
+    marginRight: 6,
+    color: colors.onSurfaceVariant,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+  noteText: {
+    flex: 1,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    lineHeight: 18,
+    letterSpacing: -0.165,
+    marginBottom: 5,
+  },
+  icon: {
+    height: 20,
+    width: 20,
+    resizeMode:'contain'
+  },
+  rightIcon: {
+    height: 10,
+    width: 10,
+    resizeMode:'contain'
+  },
+});
+
+export default styles;