@proca/widget/src/components/ImplicitConsent.js

Proca is an open-source campaign toolkit designed to empower activists and organisations in their digital advocacy efforts. It provides a flexible and customisable platform for creating and managing online petitions, email campaigns, and other forms of di

import React from "react";
import { Grid, FormHelperText } from "@material-ui/core";

import { useTranslation } from "react-i18next";
import { useCampaignConfig } from "@hooks/useConfig";
import { useLayout } from "@hooks/useLayout";
import { ConfirmProcessing } from "@components/Consent";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  bigHelper: {
    marginLeft: theme.spacing(0),
    marginRight: theme.spacing(0),
    marginTop: theme.spacing(0),
    marginBottom: theme.spacing(0),
    fontSize: theme.typography.pxToRem(16),
    width: "100%",
    color: theme.palette.text.primary,
    padding: "4px",
    lineHeight: "1.3em",
  },
  label: {
    fontSize: theme.typography.pxToRem(13),
    color: theme.palette.text.primary,
    marginBottom: theme.spacing(0),
  },
  notice: {
    fontSize: theme.typography.pxToRem(13),
    fontWeight: "fontWeightLight",
    lineHeight: "1.3em",
    color: theme.palette.text.secondary,
    "& a": {
      color: theme.palette.text.secondary,
    },
  },
}));

const ImplicitConsent = props => {
  const { t } = useTranslation();
  const config = useCampaignConfig();
  const layout = useLayout();
  const classes = useStyles();

  return (
    <>
      <Grid item xs={12}>
        <ConfirmProcessing form={props.form} />
      </Grid>
      {config.component.consent.implicit === "opt-in" && (
        <>
          <Grid item xs={12}>
            <FormHelperText
              className={classes.bigHelper}
              margin={layout.margin}
            >
              {t("consent.implicit", {
                name: config.organisation,
                campaign: config.campaign.title,
              })}
            </FormHelperText>
          </Grid>
        </>
      )}
    </>
  );
};

export default ImplicitConsent;