gistfile1.txt

import {colors} from "@irati-native/ui-kit/styles"
import {StyleSheet} from "react-native"

export const styles = StyleSheet.create({
  modal: {
    justifyContent: "flex-end",
    margin: 0
  },

  wrapper: {
    backgroundColor: colors.greys.white,
    borderTopLeftRadius: 22,
    borderTopRightRadius: 22,
    padding: 16,
    maxHeight: "95%"
  },

  innerContent: {
    flexGrow: 0
  },

  closeButton: {
    width: "100%",
    alignItems: "flex-end",
    marginBottom: 4
  },

  closeIcon: {
    width: 24,
    height: 24,
    color: colors.greys.black
  },

  sectionHeading: {
    textAlign: "center",
    marginVertical: 24
  },

  sectionTitle: {
    textAlign: "center",
    marginVertical: 12
  },

  card: {
    borderRadius: 14,
    padding: 14,
    backgroundColor: colors.greys.grey03,
    marginBottom: 12,
    alignItems: "center"
  },

  cardIcon: {
    width: 48,
    height: 48,
    borderRadius: 12,
    backgroundColor: colors.primary1,
    justifyContent: "center",
    alignItems: "center"
  },

  cardTitle: {
    marginVertical: 8
  },

  cardContent: {
    textAlign: "center"
  },

  alertView: {
    marginVertical: 24
  },

  actionButtons: {
    width: "100%",
    alignItems: "center",
    marginTop: 4
  },

  secondaryButton: {
    marginVertical: 10
  },

  modalTitle: {
    textAlign: "center"
  },

  modalDescription: {
    textAlign: "center",
    marginTop: 12
  },

  closeText: {
    marginTop: 8
  }
})

export const iconStyle = {
  width: 24,
  height: 24
}



import React, {FC, useState} from "react"
import {View, ScrollView, TouchableOpacity} from "react-native"
import {FormattedMessage} from "react-intl"

import Modal from "@irati-native/ui-components/Modal"
import Alert, {AlertTypes} from "@irati-native/ui-components/Alert"
import PdfReader from "@irati-native/ui-components/PdfReader"

import {Body, Button, H2, H5, Icon} from "@irati-native/ui-kit"
import {colors} from "@irati-native/ui-kit/styles"

import {msAssignmentFill, msCalendarMonthFill} from "@material-symbols-react-native/outlined-400"
import {MsIcon} from "material-symbols-react-native"

import {styles, iconStyle} from "./style"

interface InformationModalProps {
  isVisible: boolean
  onClose: () => void
  onViewProducts: () => void
  faqUrl?: string
}

const InformationModal: FC<InformationModalProps> = ({
  isVisible,
  onClose,
  faqUrl,
  onViewProducts
}) => {
  const [showFAQs, setShowFAQs] = useState(false)
  const [pdfLink, setPdfLink] = useState("")

  const onClickLink = () => {
    setShowFAQs(true)
    setPdfLink(faqUrl ?? "")
  }

  const cardData = [
    {
      icon: <Icon icon="arrowPointer" style={iconStyle} />,
      title: "platform.payrollPay.howNetPayWork.sectionOne.heading.text",
      content: "platform.payrollPay.howNetPayWork.sectionOne.content.text"
    },
    {
      icon: <MsIcon icon={msAssignmentFill} size={24} color={colors.greys.white} />,
      title: "platform.payrollPay.howNetPayWork.sectionTwo.heading.text",
      content: "platform.payrollPay.howNetPayWork.sectionTwo.content.text"
    },
    {
      icon: <MsIcon icon={msCalendarMonthFill} size={24} color={colors.greys.white} />,
      title: "platform.payrollPay.howNetPayWork.sectionThree.heading.text",
      content: "platform.payrollPay.howNetPayWork.sectionThree.content.text"
    }
  ]

  const highlights = [
    "platform.payrollPay.whyNetPayGreat.One.text",
    "platform.payrollPay.whyNetPayGreat.two.text",
    "platform.payrollPay.whyNetPayGreat.three.text",
    "platform.payrollPay.whyNetPayGreat.four.text"
  ]

  return (
    <>
      <Modal isVisible={isVisible} onClose={onClose} style={styles.modal}>
        <View style={styles.wrapper}>
          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
            <Icon icon="close" style={styles.closeIcon} />
          </TouchableOpacity>

          <ScrollView
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.innerContent}>
            <H2 style={styles.modalTitle}>
              platform.payrollPay.howNetPayWork.title.text
            </H2>

            <Body small style={styles.modalDescription}>
              platform.payrollPay.howNetPayWork.content.text
            </Body>

            {/* Section 1 */}
            <View>
              <H2 style={styles.sectionHeading}>
                platform.payrollPay.howNetPayWork.heading.text
              </H2>

              {cardData.map(({icon, title, content}) => (
                <View style={styles.card} key={title}>
                  <View style={styles.cardIcon}>{icon}</View>

                  <H5 style={styles.cardTitle}>{title}</H5>

                  <Body small style={styles.cardContent}>
                    {content}
                  </Body>
                </View>
              ))}
            </View>

            {/* Section 2 */}
            <View>
              <H2 style={styles.sectionTitle}>
                platform.payrollPay.whyNetPayGreat.title.text
              </H2>

              {highlights.map((v, index) => (
                <Body
                  small
                  style={{marginBottom: index !== 3 ? 12 : 0}}
                  key={v}>
                  {"\u2705"} &nbsp;
                  <FormattedMessage id={v} />
                </Body>
              ))}
            </View>

            {/* Alert */}
            <View style={styles.alertView}>
              <Alert
                type={AlertTypes.info}
                title={"platform.payrollPay.netPay.example.title.text"}
                text={
                  <Body small style={{paddingRight: 8}}>
                    <FormattedMessage
                      id="platform.payrollPay.netPay.exmple.content.text"
                      values={{
                        text: (
                          <H5>
                            platform.payrollPay.netPay.exmple.calculation.text
                          </H5>
                        )
                      }}
                    />
                  </Body>
                }
              />
            </View>
          </ScrollView>

          {/* Action Buttons */}
          <View style={styles.actionButtons}>
            <Button type="secondary" fullWidth onPress={onClickLink}>
              platform.otp.footer.button
            </Button>

            <Button
              fullWidth
              onPress={onViewProducts}
              style={styles.secondaryButton}>
              platform.payrollPay.netPay.popUp.button.text
            </Button>

            <Body style={styles.closeText} onPress={onClose}>
              platform.payrollBenfits.orderLimit.secondaryButton.text
            </Body>
          </View>
        </View>

        <PdfReader
          pdfViewVisible={showFAQs}
          onClose={() => {
            setShowFAQs(false)
            setPdfLink("")
          }}
          pdfLink={pdfLink}
        />
      </Modal>
    </>
  )
}

export {InformationModal}