{"version":3,"file":"PreviewCard-DmCBXYre.js","sources":["../../../app/javascript/entrypoints/Questionnaire/images/qr-code.png","../../../app/javascript/entrypoints/Questionnaire/images/sleeve.svg","../../../app/javascript/entrypoints/Questionnaire/images/thumb-guide.png","../../../app/javascript/entrypoints/Questionnaire/PreviewCard.jsx"],"sourcesContent":["export default \"__VITE_ASSET__CMWOJCHq__\"","export default \"data:image/svg+xml,%3csvg%20width='463'%20height='435'%20viewBox='0%200%20463%20435'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='246'%20cy='217.693'%20r='217'%20fill='%23EFC067'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M420.072%204.69247L0.112549%2010.5076L5.92765%20430.467L425.887%20424.652L423.391%20244.375C421.946%20244.589%20420.47%20244.71%20418.969%20244.731C400.773%20244.983%20385.817%20230.436%20385.566%20212.239C385.314%20194.043%20399.86%20179.087%20418.057%20178.835C419.558%20178.815%20421.037%20178.895%20422.487%20179.069L420.072%204.69247Z'%20fill='%23112334'/%3e%3c/svg%3e\"","export default \"__VITE_ASSET__CU5nLRuv__\"","import React from \"react\";\nimport { Button, Typography, Box, TextField, Grid, Paper } from \"@mui/material\";\nimport { colors } from \"../lib/theme\";\nimport qrCodeImage from \"./images/qr-code.png\";\nimport sleeveImage from \"./images/sleeve.svg\";\nimport thumbGuideImage from \"./images/thumb-guide.png\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useAuth } from \"../../shared/useAuth\";\n\nconst PreviewCard = ({\n  cardTitle,\n  setCardTitle,\n  cardMessage,\n  setCardMessage,\n  senderClosing,\n  setSenderClosing,\n  uploadedImage,\n  setUploadedImage,\n  handlePrevious,\n  generatedQuestions,\n  additionalDetails,\n  hobbiesInterests,\n  favoriteMemory,\n  location,\n  relationship,\n}) => {\n  const navigate = useNavigate();\n  const { user, loading } = useAuth();\n\n  window.scrollTo(0, 0);\n\n  const gatherData = () => {\n    return {\n      cardTitle,\n      cardMessage,\n      senderClosing:\n        senderClosing ||\n        \"With the Golden Record App, you can record your memories, stories, and wisdom for generations to come. I can't wait to hear all the adventures and experiences that have made you the amazing person you are.\",\n      additionalDetails,\n      uploadedImage: uploadedImage || null,\n      generatedQuestions,\n      hobbiesInterests,\n      favoriteMemory,\n      location,\n      relationship,\n    };\n  };\n\n  const handleImageUpload = (event) => {\n    const file = event.target.files[0];\n    if (file) {\n      const reader = new FileReader();\n      reader.onloadend = () => {\n        setUploadedImage(reader.result);\n      };\n      reader.readAsDataURL(file);\n    }\n  };\n\n  const handleAddToCart = () => {\n    const data = gatherData();\n    localStorage.setItem(\"questionnaireData\", JSON.stringify(data));\n    navigate(user ? \"/checkout\" : \"/login?from=questionnaire\");\n  };\n\n  return (\n    <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 2 }}>\n      <Typography variant=\"h3\" sx={{ color: colors.gold, mb: 0 }}>\n        Customize and Preview Your Gift Email\n      </Typography>\n      <Typography variant=\"body1\" sx={{ color: colors.white, mb: 1, fontSize: \"1.3rem\" }}>\n        Customize the cover image, title, and message of your gift email. Not to worry, you can add or change your cover photo later.\n      </Typography>\n      <Paper\n        sx={{\n          padding: 5,\n          background: colors.darkerNavy,\n        }}\n      >\n        <Grid container>\n          <Grid\n            item\n            xs={12}\n            md={5}\n            sx={{\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              backgroundColor: colors.lightYellow,\n              position: \"relative\",\n            }}\n          >\n            {uploadedImage ? (\n              <Box\n                component=\"img\"\n                sx={{\n                  width: 350,\n                  height: 350,\n                  transform: \"rotate(-5deg)\",\n                  boxShadow: \"0 0 10px 0 rgba(0, 0, 0, 0.5)\",\n                  zIndex: 2,\n                }}\n                alt=\"Uploaded\"\n                src={uploadedImage}\n              />\n            ) : (\n              <Button\n                variant=\"contained\"\n                component=\"label\"\n                sx={{\n                  width: 350,\n                  height: 350,\n                  display: \"flex\",\n                  justifyContent: \"center\",\n                  alignItems: \"center\",\n                  backgroundColor: colors.navy,\n                  transform: \"rotate(-5deg)\",\n                  boxShadow: \"0 0 10px 0 rgba(0, 0, 0, 0.5)\",\n                  zIndex: 2,\n                  border: 0,\n                }}\n              >\n                Upload Album Cover\n                <input\n                  type=\"file\"\n                  accept=\"image/*\"\n                  hidden\n                  onChange={handleImageUpload}\n                />\n              </Button>\n            )}\n            <Box\n              sx={{\n                display: { xs: \"none\", md: \"block\" }, // Hide on small screens\n                position: \"absolute\",\n                top: \"120px\",\n                left: \"50px\",\n              }}\n            >\n              <img\n                src={sleeveImage}\n                alt=\"Sleeve\"\n                style={{\n                  transform: \"rotate(-5deg)\",\n                  zIndex: 1,\n                  width: 400,\n                  height: 400,\n                }}\n              />\n            </Box>\n          </Grid>\n\n          <Grid item xs={12} md={7}>\n            <Box\n              sx={{\n                p: 3,\n                backgroundColor: colors.navy,\n                backgroundImage: `url(${thumbGuideImage})`,\n                backgroundPosition: \"100% 50%\",\n                backgroundRepeat: \"no-repeat\",\n                backgroundSize: \"40px 90px\",\n                color: \"white\",\n                height: \"100%\",\n              }}\n            >\n              <Typography\n                variant=\"h3\"\n                gutterBottom\n                sx={{ color: colors.black }}\n              >\n                <TextField\n                  onChange={(e) => setCardTitle(e.target.value)}\n                  value={cardTitle}\n                  variant=\"outlined\"\n                  fullWidth\n                  sx={{ mt: 1, width: \"100%\", maxWidth: \"100%\" }}\n                />\n              </Typography>\n              <Typography\n                variant=\"body1\"\n                paragraph\n                sx={{ color: colors.black }}\n              >\n                <TextField\n                  multiline\n                  rows={3}\n                  fullWidth\n                  value={cardMessage}\n                  variant=\"outlined\"\n                  onChange={(e) => setCardMessage(e.target.value)}\n                  sx={{ width: \"100%\", maxWidth: \"100%\" }}\n                />\n              </Typography>\n\n              <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n                <img\n                  src={qrCodeImage}\n                  alt=\"QR Code\"\n                  style={{ display: \"block\", width: \"100%\", maxWidth: \"250px\" }}\n                />\n                <Typography\n                  variant=\"body2\"\n                  sx={{ color: \"white\", flex: 1, fontSize: \"1.1rem\" }}\n                >\n                  <ul\n                    style={{\n                      listStyleType: \"none\",\n                      padding: \"0 20px 0 0\",\n                      margin: 0,\n                    }}\n                  >\n                    {generatedQuestions.slice(0, 3).map((item, index) => (\n                      <li\n                        key={item.id}\n                        style={{\n                          display: \"flex\",\n                          alignItems: \"flex-start\",\n                          marginBottom: \"10px\",\n                        }}\n                      >\n                        <div\n                          style={{\n                            minWidth: \"24px\",\n                            height: \"24px\",\n                            borderRadius: \"50%\",\n                            backgroundColor: \"white\",\n                            color: colors.navy,\n                            display: \"flex\",\n                            justifyContent: \"center\",\n                            alignItems: \"center\",\n                            marginRight: \"10px\",\n                            marginTop: \"2px\",\n                            fontWeight: \"bold\",\n                            fontSize: \"14px\",\n                          }}\n                        >\n                          {index + 1}\n                        </div>\n                        <span>{item.text}</span>\n                      </li>\n                    ))}\n                    <li>\n                      <span style={{ color: \"#ccc\" }}>More questions in the album!</span>\n                    </li>\n                  </ul>\n                </Typography>\n              </Box>\n\n              <TextField\n                fullWidth\n                multiline\n                rows={3}\n                onChange={(e) => setSenderClosing(e.target.value)}\n                placeholder=\"Your name here\"\n                variant=\"outlined\"\n                sx={{ mt: 1, width: \"100%\", maxWidth: \"100%\" }}\n                value={\n                  senderClosing ||\n                  \"With the Golden Record App, you can record your memories, stories, and wisdom for generations to come. I can't wait to hear all the adventures and experiences that have made you the amazing person you are.\"\n                }\n              />\n            </Box>\n          </Grid>\n        </Grid>\n      </Paper>\n      <Box sx={{ display: \"flex\", justifyContent: \"space-between\", mt: 2 }}>\n        <Button\n          onClick={handlePrevious}\n          variant=\"text\"\n          sx={{ mt: 2, border: 0, color: colors.lightGray }}\n        >\n          Previous\n        </Button>\n        <Button variant=\"secondary\" onClick={handleAddToCart} sx={{ mt: 2 }}>\n          Add to Cart\n        </Button>\n      </Box>\n    </Box>\n  );\n};\n\nexport default PreviewCard;\n"],"names":["qrCodeImage","sleeveImage","thumbGuideImage","PreviewCard","cardTitle","setCardTitle","cardMessage","setCardMessage","senderClosing","setSenderClosing","uploadedImage","setUploadedImage","handlePrevious","generatedQuestions","additionalDetails","hobbiesInterests","favoriteMemory","location","relationship","navigate","useNavigate","user","loading","useAuth","gatherData","handleImageUpload","event","file","reader","handleAddToCart","data","Box","Typography","colors","React","Paper","Grid","Button","TextField","e","item","index"],"mappings":"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"}