{"version":3,"file":"component---src-pages-card-js-d811a0cb3da0364a47d3.js","mappings":"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","sources":["webpack://pintuna/./src/components/routes/CardDetails/SelectGiftCardImage.js","webpack://pintuna/./src/pages/card.js"],"sourcesContent":["/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React, { useEffect, useRef, useState } from 'react';\nimport {\n  Grid,\n  Typography,\n  Box,\n  MenuItem,\n  Divider,\n  Button,\n  CircularProgress,\n  Container,\n  useMediaQuery,\n  useTheme,\n} from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport { makeStyles } from '@material-ui/core/styles';\nimport * as Yup from 'yup';\n\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useTranslation } from 'react-i18next';\n\nimport { Field, Form, Formik } from 'formik';\nimport { TextField as FormikTextField } from 'formik-material-ui';\nimport { navigate } from 'gatsby';\nimport { isEmpty } from 'lodash/fp';\nimport { useParams } from '@reach/router';\nimport { businesses, checkout } from '../../../state';\nimport { CustomImgCard } from '../../custom';\nimport SEO from '../../seo';\nimport { BusinessFooter, BusinessHeader, Header } from '../../layouts';\n\nconst SelectGiftCardImage = () => {\n  const business = useSelector(businesses.selectors.selectBusiness);\n  const useStyles = makeStyles((theme) => ({\n    formControl: {\n      border: '1px solid #d0d7de',\n      marginLeft: 20,\n      // boxShadow: '1px 1px 1px 1px #848484',\n      // borderRadius: 10,\n    },\n    option: {\n      padding: 5,\n      marginLeft: 24,\n    },\n    fsBackground: {\n      background: business?.brandColors?.backgroundColor || '#e4f9fc',\n      minHeight: '80px',\n      maxHeight: '80px',\n      width: '100%',\n      position: 'absolute',\n      left: 0,\n      // zIndex: -1,\n    },\n    checkBalance: {\n      position: 'absolute',\n      right: '5.7%',\n      top: '50%',\n      width: '250px',\n      color: 'blue',\n      cursor: 'pointer',\n      textDecoration: 'underline',\n      transform: 'translateY(-50%)',\n      '&:hover': {\n        textDecoration: 'none',\n      },\n      [theme.breakpoints.down('sm')]: {\n        top: 'auto',\n        right: 0,\n        fontSize: '13px',\n      },\n    },\n    checkBalanceWrapper: {\n      position: 'absolute',\n      width: '100%',\n      top: '65px',\n      left: 0,\n      height: '170px',\n      textAlign: 'right',\n      [theme.breakpoints.down('sm')]: {\n        top: 'auto',\n        height: 'auto',\n        position: 'relative',\n        paddingTop: '25px',\n      },\n    },\n    textColor: {\n      '& *:not(.Mui-error):not(button):not(button span)': {\n        color: business.brandColors?.textColor,\n      },\n    },\n  }));\n  const classes = useStyles();\n  const { t } = useTranslation();\n  const isLoading = useSelector(businesses.selectors.selectIsLoading);\n  const { name, isWhitelabel, logoUrl, website, occasions, id } = business;\n  const [filteredOccasions, setFilteredOccasions] = useState(occasions);\n  const theme = useTheme();\n  const xs = useMediaQuery(theme.breakpoints.down('xs'));\n  const dispatch = useDispatch();\n  const updateBusiness = (payload) =>\n    dispatch(businesses.actions.updateBusiness(payload));\n  const fetchBusiness = (payload) =>\n    dispatch(businesses.actions.fetchBusiness(payload));\n  const setFormData = (payload) =>\n    dispatch(checkout.actions.setFormData(payload));\n  const formikRef = useRef();\n  const { id: routeId } = useParams();\n  useEffect(() => {\n    (async () => {\n      if (routeId === business.id) return;\n      await fetchBusiness(routeId).then(({ error }) => {\n        if (!isEmpty(error)) {\n          navigate('/');\n        }\n      });\n    })();\n  }, []);\n  useEffect(() => {\n    if (occasions) {\n      setFilteredOccasions(\n        occasions\n          .map((o) => ({\n            ...o,\n            images: o.images.filter((i) => i.status === 0),\n          }))\n          .filter((o) => o.status === 0)\n      );\n    }\n  }, [business]);\n\n  useEffect(() => {\n    if (filteredOccasions && filteredOccasions.length === 1) {\n      if (filteredOccasions[0].images.length === 1) {\n        navigate(`/card/${id}`);\n      } else {\n        formikRef?.current?.setFieldValue(\n          'occasionId',\n          filteredOccasions[0].id\n        );\n\n        formikRef?.current?.setFieldValue('occasion', filteredOccasions[0]);\n        formikRef?.current?.setFieldValue(\n          'languageId',\n          filteredOccasions[0]?.languageId\n        );\n      }\n    }\n  }, [filteredOccasions]);\n\n  const merchantPintunaUrl = `/card/${id}`;\n  return (\n    <Box className={classes.textColor}>\n      <SEO title={`${name}`} />\n      {isWhitelabel ? (\n        <BusinessHeader\n          logoUrl={logoUrl}\n          merchantUrl={website}\n          merchantPintunaUrl={merchantPintunaUrl}\n          bgcolor={business.brandColors?.headerColor}\n        />\n      ) : (\n        <Header logo bgcolor={business.brandColors?.headerColor} />\n      )}\n      <Divider />\n      <Box bgcolor={business.brandColors?.formColor}>\n        <Container\n          style={{ minHeight: !isWhitelabel && 'calc(100vh - 64px - 196px)' }}\n        >\n          <>\n            <div className={classes.fsBackground} />\n            <Grid\n              container\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              style={{ height: '60px', marginBottom: '50px' }}\n            >\n              <Grid\n                container\n                item\n                xs={12}\n                md={6}\n                direction=\"row\"\n                justifyContent=\"center\"\n                alignItems=\"center\"\n                style={{ zIndex: 2 }}\n              >\n                <Box pt={2} display=\"block\" align=\"center\">\n                  <Typography variant=\"h5\" color=\"primary\">\n                    {isLoading ? <Skeleton width=\"190px\" /> : name}\n                  </Typography>\n                </Box>\n              </Grid>\n            </Grid>\n            <Grid\n              container\n              direction=\"row\"\n              justifyContent=\"center\"\n              alignItems=\"center\"\n            >\n              <Grid item xs={12} md={12}>\n                <Formik\n                  innerRef={formikRef}\n                  enableReinitialize\n                  validationSchema={Yup.object({\n                    occasionId: Yup.string().required(t('validation.required')),\n                    giftCardImageId: Yup.string().required(\n                      t('validation.required')\n                    ),\n                  })}\n                  initialValues={{\n                    ...business,\n                    occasion: {},\n                  }}\n                  onSubmit={async (values) => {\n                    console.log(values);\n                    await updateBusiness(values);\n                    await setFormData(values);\n                    if (\n                      values.giftCardImageId &&\n                      values.occasionId &&\n                      values.imageUrl\n                    ) {\n                      navigate(`/card/${id}`);\n                    }\n                  }}\n                >\n                  {({ setFieldValue, values, isSubmitting, handleSubmit }) => {\n                    return (\n                      <Form>\n                        <Grid\n                          container\n                          // alignItems=\"center\"\n                          justifyContent=\"center\"\n                          style={{ marginBottom: 20 }}\n                        >\n                          <Typography>GIFT CARD BY OCCASION</Typography>\n\n                          <Field\n                            component={FormikTextField}\n                            select\n                            multiple\n                            native\n                            name=\"occasion\"\n                            variant=\"outlined\"\n                            style={{ minWidth: 200, marginLeft: 20 }}\n                            InputLabelProps={{ shrink: true }}\n                          >\n                            {filteredOccasions &&\n                              filteredOccasions.map((occasion) => (\n                                <MenuItem\n                                  key={occasion.id}\n                                  value={occasion}\n                                  onClick={() =>\n                                    setFieldValue('occasionId', occasion.id)\n                                  }\n                                >\n                                  {occasion.name}\n                                </MenuItem>\n                              ))}\n                          </Field>\n                        </Grid>\n\n                        {values.occasion &&\n                        values.occasion.images &&\n                        values.occasion.images.length ? (\n                          <>\n                            <Typography style={{ marginLeft: 4 }}>\n                              Select your gift card:\n                            </Typography>\n                            <Divider />\n                            <Grid\n                              container\n                              direction=\"row\"\n                              justifyContent={xs ? 'center' : 'flex-start'}\n                              alignItems=\"center\"\n                              spacing={4}\n                            >\n                              {values.occasion.images.map((image) => (\n                                <Grid\n                                  key={image.id}\n                                  item\n                                  onClick={() => {\n                                    setFieldValue('giftCardImageId', image.id);\n                                    setFieldValue('imageUrl', image.url);\n                                  }}\n                                >\n                                  <Box\n                                    mt={2}\n                                    style={{ boxSizing: 'border-box' }}\n                                    border={\n                                      image.id === values.giftCardImageId\n                                        ? 1\n                                        : 0\n                                    }\n                                  >\n                                    <CustomImgCard\n                                      isLoading={isLoading}\n                                      name={name}\n                                      width=\"215px\"\n                                      imageUrl={image.url}\n                                    />\n                                  </Box>\n                                </Grid>\n                              ))}\n                            </Grid>\n                            <Box mt={2} mb={3}>\n                              <Grid container justifyContent=\"center\">\n                                <Grid item xs={12} md={6}>\n                                  <Button\n                                    fullWidth\n                                    type=\"submit\"\n                                    variant=\"contained\"\n                                    color=\"primary\"\n                                    onClick={handleSubmit}\n                                    size=\"large\"\n                                  >\n                                    {isSubmitting ? (\n                                      <CircularProgress size={24} />\n                                    ) : (\n                                      t('continue')\n                                    )}\n                                  </Button>\n                                </Grid>\n                              </Grid>\n                            </Box>\n                          </>\n                        ) : (\n                          values.occasion &&\n                          values.occasion.images &&\n                          !values.occasion.images.length && (\n                            <>\n                              <Typography\n                                variant=\"h5\"\n                                style={{ marginLeft: 4 }}\n                              >\n                                There is no available gift card images for this\n                                occasion\n                              </Typography>\n                            </>\n                          )\n                        )}\n                      </Form>\n                    );\n                  }}\n                </Formik>\n              </Grid>\n            </Grid>\n          </>\n        </Container>\n      </Box>\n      <BusinessFooter bgcolor={business.brandColors?.footerColor} />\n    </Box>\n  );\n};\n\nexport default SelectGiftCardImage;\n","import React from 'react';\nimport { Router } from '@reach/router';\nimport { useBeforeUnload } from 'react-use';\nimport {\n  TicketCheckout,\n  CardDetails,\n  Confirmation,\n  CardRedemptionDemo,\n} from '../components/routes';\nimport SelectGiftCardImage from '../components/routes/CardDetails/SelectGiftCardImage';\n// import NotFound from './404';\n\nconst CardPage = () => {\n  useBeforeUnload('Enable', 'You have unsaved changes, are you sure?');\n  return (\n    <Router basepath=\"card\">\n      <CardDetails path=\":id\" />\n      <TicketCheckout path=\":id/checkout\" />\n      <SelectGiftCardImage path=\":id/image\" />\n      <Confirmation path=\":id/confirmation\" />\n      <CardRedemptionDemo path=\"redemption-demo/:id\" />\n      {/* <NotFound default /> */}\n    </Router>\n  );\n};\n\nexport default CardPage;\n"],"names":["business","useSelector","businesses","useStyles","makeStyles","formControl","border","marginLeft","option","padding","fsBackground","background","minHeight","maxHeight","width","position","left","checkBalance","right","top","color","cursor","textDecoration","transform","theme","fontSize","checkBalanceWrapper","height","textAlign","paddingTop","textColor","classes","t","useTranslation","isLoading","name","isWhitelabel","logoUrl","website","occasions","id","useState","filteredOccasions","setFilteredOccasions","useTheme","xs","useMediaQuery","dispatch","useDispatch","setFormData","payload","checkout","formikRef","useRef","routeId","useParams","useEffect","error","navigate","images","o","i","merchantPintunaUrl","className","title","merchantUrl","bgcolor","headerColor","logo","formColor","style","container","justifyContent","alignItems","marginBottom","item","md","direction","zIndex","pt","display","align","variant","innerRef","enableReinitialize","validationSchema","occasionId","Yup","giftCardImageId","initialValues","occasion","onSubmit","console","values","setFieldValue","isSubmitting","handleSubmit","component","select","multiple","native","minWidth","InputLabelProps","shrink","key","value","onClick","spacing","image","mt","boxSizing","imageUrl","url","mb","fullWidth","type","size","footerColor","useBeforeUnload","basepath","path"],"sourceRoot":""}