\n {imageSrc ? (\n \n \n ) : (\n \n )}\n
\n );\n};\n\nfunction readFile(file) {\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.addEventListener(\"load\", () => resolve(reader.result), false);\n reader.readAsDataURL(file);\n });\n}\n\nconst StyledDemo = withStyles(styles)(Demo);\n\nexport default StyledDemo;\n","import React from \"react\";\n\nimport StyledDemo from \"./index\";\n\nimport {\n MDBContainer,\n MDBIcon,\n MDBBtn,\n MDBModal,\n MDBModalBody,\n MDBModalFooter\n} from \"mdbreact\";\n\n\n\n\n\nclass UploadLogo extends React.Component {\n state = {\n modal: false\n };\n\n toggle = () => {\n this.setState({\n modal: !this.state.modal\n });\n };\n\n render() {\n return (\n \n
\n \n \n Save\n \n
\n {/* \n \n Zoom\n \n setZoom(zoom)}\n />\n
\n \n \n Rotation\n \n setRotation(rotation)}\n />\n
\n \n {imageSrc ? (\n \n \n ) : (\n \n )}\n
\n );\n};\n\nfunction readFile(file) {\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.addEventListener(\"load\", () => resolve(reader.result), false);\n reader.readAsDataURL(file);\n });\n}\n\nconst StyledDemo = withStyles(styles)(Demo);\n\nexport default StyledDemo;\n","export const styles = theme => ({\n cropContainer: {\n position: 'relative',\n width: '100%',\n height: 200,\n background: 'white',\n [theme.breakpoints.up('sm')]: {\n height: 400,\n },\n },\n cropButton: {\n flexShrink: 0,\n marginLeft: 16,\n },\n controls: {\n padding: 16,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'stretch',\n [theme.breakpoints.up('sm')]: {\n flexDirection: 'row',\n alignItems: 'center',\n },\n },\n sliderContainer: {\n display: 'flex',\n flex: '1',\n alignItems: 'center',\n },\n sliderLabel: {\n [theme.breakpoints.down('xs')]: {\n minWidth: 65,\n },\n },\n slider: {\n padding: '22px 0px',\n marginLeft: 16,\n [theme.breakpoints.up('sm')]: {\n flexDirection: 'row',\n alignItems: 'center',\n margin: '0 16px',\n },\n },\n})\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport firebase from \"../../utils/firebase/firebase.utils\";\nimport StyledDemo from \"./index\";\nimport ReactQr from \"react-awesome-qr\";\nimport {\n MDBContainer,\n MDBBtn,\n MDBModal,\n MDBModalBody,\n MDBModalFooter,\n MDBIcon\n} from \"mdbreact\";\n\nimport cardBack from \"./assets/card-back.png\";\n\nimport { fetchDesigns } from \"../../redux/designImages/designImages.actions\";\n\nclass CustomGoogleQr extends React.Component {\n state = {\n modal: false\n };\n\n toggle = () => {\n var db = firebase.firestore();\n this.props.fetchDesigns();\n\n this.setState({\n modal: !this.state.modal\n });\n db.collection(\"users\").doc(`${this.props.userId}`).update({\n customLogo: firebase.firestore.FieldValue.delete()\n });\n // .then(()=>{\n // db.collection(\"users\").doc(`${this.props.userId}`).update({\n // customQrImgPreview: firebase.firestore.FieldValue.delete()\n // })\n // })\n };\n\n generateQr() {\n var db = firebase.firestore();\n var database = firebase.database();\n\n const thing = (\n \n
\n \n \n Save\n \n
\n {/* \n \n Zoom\n \n setZoom(zoom)}\n />\n
\n \n \n Rotation\n \n setRotation(rotation)}\n />\n
\n \n \n // localStorage.setItem('customQrImg',data)\n db\n .collection(\"users\")\n .doc(`${this.props.userId}`)\n .update({\n customQrImgPreview: `${data}`\n })\n }\n />\n\n 4\n ? this.props.MyTapReviewCardURL\n : ''\n }\n correctLevel={3}\n size={700}\n dotScale={0.7}\n margin={0}\n bgSrc={this.props.customLogo}\n callback={\n (data) =>\n db\n .collection(\"users\")\n .doc(`${this.props.userId}`)\n .update({\n customGoogleQrImg: `${data}`\n })\n }\n />\n
\n );\n\n return thing;\n }\n\n render() {\n return (\n \n
\n ) : null}\n \n \n Single Link Card\n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n {this.props.MyTapReviewCardURL && this.props.MyTapReviewCardURL.length > 10 ?\n \n \n \n \n ) : null}\n \n \n \n \n \n \n \n \n {({ stripe, elements }) => (\n {\n this.setState({ loading: true });\n e.preventDefault();\n this.generateAndBuy();\n if (!currentUser.stripeCustomerId) {\n return await createStripeCustomer(\n currentUser\n ).then(async () => {\n const session = await createSession(\n \"MyTap SL Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n });\n } else {\n const session = await createSession(\n \"MyTap SL Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n }}\n >\n \n \n \n\n \n )}\n \n \n \n \n \n \n
\n \n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n // console.log('dddddd',this.props.user.id)\n // console.log('bbbbbb',this.props.currentUser)\n // console.log('selectedUser',state.selectedUser.currentUser?.uid)\n\n return {\n reviewCardUploadedLogo:\n state.user.currentUser?.reviewCardUploadedLogo,\n MyTapReviewCardURL: state.user.currentUser?.MyTapReviewCardURL,\n GoogleQrImg: state.user.currentUser?.GoogleQrImg,\n customGoogleQrImg: state.user.currentUser?.customGoogleQrImg,\n reviewCardImage: state.user.currentUser?.reviewCardImage,\n shortUrl: state.user.currentUser?.shortUrl,\n orderPlaced: state.user.currentUser?.orderPlaced,\n user: state.user,\n userId: state.user.currentUser?.uid,\n currentUser: state.user?.currentUser,\n \n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n updateUser: (payload) => {\n dispatch(updateUser(payload));\n },\n defaultRedirect: () => {\n dispatch(defaultRedirect());\n },\n fetchDesigns: (payload) => {\n dispatch(fetchDesigns(payload));\n }\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(GoogleReview);\n","import store from \"../../redux/store\";\nimport firebase from \"../../utils/firebase/firebase.utils\";\n\nconst createImage = (url) =>\n new Promise((resolve, reject) => {\n const image = new Image();\n image.addEventListener(\"load\", () => resolve(image));\n image.addEventListener(\"error\", (error) => reject(error));\n image.setAttribute(\"crossOrigin\", \"anonymous\"); // needed to avoid cross-origin issues on CodeSandbox\n image.src = url;\n });\n\nfunction getRadianAngle(degreeValue) {\n return (degreeValue * Math.PI) / 180;\n}\n\n/**\n * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop\n * @param {File} image - Image File url\n * @param {Object} pixelCrop - pixelCrop Object provided by react-easy-crop\n * @param {number} rotation - optional rotation parameter\n */\nexport async function getCroppedImg(imageSrc, pixelCrop, rotation = 0) {\n const image = await createImage(imageSrc);\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n // image.width = image.width / 2;\n // image.height = image.height / 2;\n\n // const safeArea = Math.max(image.width, image.height) * 2\n\n const maxSize = Math.max(image.width, image.height);\n const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));\n\n // set each dimensions to double largest dimension to allow for a safe area for the\n // image to rotate in without being clipped by canvas context\n canvas.width = safeArea;\n canvas.height = safeArea;\n\n // translate canvas context to a central location on image to allow rotating around the center.\n ctx.translate(safeArea / 2, safeArea / 2);\n ctx.rotate(getRadianAngle(rotation));\n ctx.translate(-safeArea / 2, -safeArea / 2);\n\n ctx.fillStyle = \"white\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // draw rotated image and store data.\n ctx.drawImage(\n image,\n safeArea / 2 - image.width * 0.5,\n safeArea / 2 - image.height * 0.5\n );\n const data = ctx.getImageData(0, 0, safeArea, safeArea);\n\n // set canvas width to final desired crop size - this will clear existing context\n canvas.width = pixelCrop.width;\n canvas.height = pixelCrop.height;\n\n // paste generated rotate image with correct offsets for x,y crop values.\n ctx.putImageData(\n data,\n Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),\n Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)\n );\n\n // As Base64 string\n // return canvas.toDataURL('image/jpeg');\n\n const base64Image = canvas.toDataURL(\"image/jpeg\");\n // const baseString = base64Image.substr(base64Image.indexOf(\",\") + 1);\n // localStorage.setItem('customLogo',base64Image)\n\n var userId = store.getState().user.currentUser.id;\n var db = firebase.firestore();\n db.collection(\"users\")\n .doc(`${userId}`)\n .update({\n customLogo: `${base64Image}`,\n })\n .then(function () {\n console.log(\"Document successfully written!\");\n })\n .catch(function (error) {\n console.error(\"Error writing document: \", error);\n });\n\n return base64Image;\n\n // As a blob\n // return new Promise(resolve => {\n // canvas.toBlob(file => {\n // resolve(URL.createObjectURL(file))\n // }, 'image/jpeg')\n // })\n}\n\nexport async function getRotatedImage(imageSrc, rotation = 0) {\n const image = await createImage(imageSrc);\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n const orientationChanged =\n rotation === 90 ||\n rotation === -90 ||\n rotation === 270 ||\n rotation === -270;\n if (orientationChanged) {\n canvas.width = image.height;\n canvas.height = image.width;\n } else {\n canvas.width = image.width;\n canvas.height = image.height;\n }\n\n ctx.translate(canvas.width / 2, canvas.height / 2);\n ctx.rotate((rotation * Math.PI) / 180);\n ctx.drawImage(image, -image.width / 2, -image.height / 2);\n\n return new Promise((resolve) => {\n canvas.toBlob((file) => {\n resolve(URL.createObjectURL(file));\n }, \"image/jpeg\");\n });\n}\n","import React, { useState, useCallback } from \"react\";\nimport Cropper from \"react-easy-crop\";\nimport Slider from \"@material-ui/lab/Slider\";\nimport Button from \"@material-ui/core/Button\";\nimport Typography from \"@material-ui/core/Typography\";\nimport { withStyles } from \"@material-ui/core/styles\";\nimport { getOrientation } from \"get-orientation/browser\";\n// import ImgDialog from \"./ImgDialog\";\nimport { getCroppedImg, getRotatedImage } from \"./canvasUtils\";\nimport { styles } from \"./styles\";\nimport imageCompression from \"browser-image-compression\";\n\n\nconst ORIENTATION_TO_ANGLE = {\n \"3\": 180,\n \"6\": 90,\n \"8\": -90,\n};\n\nconst Demo = ({ classes }) => {\n const [imageSrc, setImageSrc] = React.useState(null);\n const [crop, setCrop] = useState({ x: 0, y: 0 });\n const [rotation, setRotation] = useState(0);\n const [zoom, setZoom] = useState(1);\n const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);\n // eslint-disable-next-line \n const [croppedImage, setCroppedImage] = useState(null);\n\n\n const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {\n setCroppedAreaPixels(croppedAreaPixels);\n }, []);\n\n const showCroppedImage = useCallback(async () => {\n try {\n const croppedImage = await getCroppedImg(\n imageSrc,\n croppedAreaPixels,\n rotation\n );\n console.log(\"donee\", { croppedImage });\n \n \n\n setCroppedImage(croppedImage);\n setImageSrc(null)\n \n\n\n } catch (e) {\n console.error(e);\n }\n\n }, [imageSrc, croppedAreaPixels, rotation]);\n\n // const onClose = useCallback(() => {\n // setCroppedImage(null);\n // }, []);\n\n const onFileChange = async (e) => {\n if (e.target.files && e.target.files.length > 0) {\n const file = e.target.files[0];\n\n // const imageFile = file;\n\n const options = {\n maxSizeMB: 1,\n maxWidthOrHeight: 1920,\n useWebWorker: true,\n };\n try {\n const compressedFile = await imageCompression(file, options);\n\n let imageDataUrl = await readFile(compressedFile);\n\n // apply rotation if needed\n const orientation = await getOrientation(compressedFile);\n const rotation = ORIENTATION_TO_ANGLE[orientation];\n if (rotation) {\n imageDataUrl = await getRotatedImage(imageDataUrl, rotation);\n }\n\n setImageSrc(imageDataUrl);\n } catch (error) {\n console.log(error);\n }\n }\n };\n\n return (\n Current order: {this.props.MyTapReviewCardURL}
\n\n
\n \n \n \n \n
\n : Create your custom QR-Code!
\n $20
\n \n \n Order!
\n \n {imageSrc ? (\n \n \n ) : (\n \n )}\n
\n );\n};\n\nfunction readFile(file) {\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.addEventListener(\"load\", () => resolve(reader.result), false);\n reader.readAsDataURL(file);\n });\n}\n\nconst StyledDemo = withStyles(styles)(Demo);\n\nexport default StyledDemo;\n","export const styles = theme => ({\n cropContainer: {\n position: 'relative',\n width: '100%',\n height: 200,\n background: 'white',\n [theme.breakpoints.up('sm')]: {\n height: 400,\n },\n },\n cropButton: {\n flexShrink: 0,\n marginLeft: 16,\n },\n controls: {\n padding: 16,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'stretch',\n [theme.breakpoints.up('sm')]: {\n flexDirection: 'row',\n alignItems: 'center',\n },\n },\n sliderContainer: {\n display: 'flex',\n flex: '1',\n alignItems: 'center',\n },\n sliderLabel: {\n [theme.breakpoints.down('xs')]: {\n minWidth: 65,\n },\n },\n slider: {\n padding: '22px 0px',\n marginLeft: 16,\n [theme.breakpoints.up('sm')]: {\n flexDirection: 'row',\n alignItems: 'center',\n margin: '0 16px',\n },\n },\n})\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport firebase from \"../../utils/firebase/firebase.utils\";\nimport StyledDemo from \"./index\";\nimport ReactQr from \"react-awesome-qr\";\nimport {\n MDBContainer,\n MDBBtn,\n MDBModal,\n MDBModalBody,\n MDBModalFooter,\n MDBIcon\n} from \"mdbreact\";\n\nimport cardBack from \"./assets/card-back.png\";\n\nimport { fetchDesigns } from \"../../redux/designImages/designImages.actions\";\n\nclass CustomQr extends React.Component {\n state = {\n modal: false\n };\n\n toggle = () => {\n var db = firebase.firestore();\n this.props.fetchDesigns();\n\n this.setState({\n modal: !this.state.modal\n });\n db.collection(\"users\").doc(`${this.props.userId}`).update({\n customLogo: firebase.firestore.FieldValue.delete()\n });\n // .then(()=>{\n // db.collection(\"users\").doc(`${this.props.userId}`).update({\n // customQrImgPreview: firebase.firestore.FieldValue.delete()\n // })\n // })\n };\n\n generateQr() {\n var db = firebase.firestore();\n var database = firebase.database();\n\n const thing = (\n \n
\n \n \n Save\n \n
\n {/* \n \n Zoom\n \n setZoom(zoom)}\n />\n
\n \n \n Rotation\n \n setRotation(rotation)}\n />\n
\n \n \n // localStorage.setItem('customQrImg',data)\n db\n .collection(\"users\")\n .doc(`${this.props.userId}`)\n .update({\n customQrImgPreview: `${data}`\n })\n }\n />\n\n 4\n ? this.props.MyCardDirectURL\n : this.props.shortUrl\n }\n correctLevel={3}\n size={700}\n dotScale={0.7}\n margin={0}\n bgSrc={this.props.customLogo}\n callback={\n (data) =>\n database.ref(`designs/ + ${this.props.userId}`).update({\n customQrImg: `${data}`\n })\n\n // db\n // .collection(\"users\")\n // .doc(`${this.props.userId}`)\n // .update({\n // customQrImg: `${data}`\n // })\n }\n />\n
\n );\n\n return thing;\n }\n\n render() {\n return (\n \n
\n ) : null}\n \n
,\n document.getElementById(\"splash\")\n );\n};\n\nexport default Splash;\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport { useHistory } from \"react-router-dom\";\n// import { MDBMedia, MDBBtn } from \"mdbreact\";\nimport {\n MDBMedia,\n MDBCard,\n MDBContainer,\n MDBCardBody,\n MDBCardImage,\n MDBCardTitle,\n MDBCardText,\n MDBTooltip,\n MDBCardFooter,\n MDBBtn,\n MDBLink,\n MDBIcon\n} from \"mdbreact\";\n\nimport { Carousel } from \"react-bootstrap\";\n\nimport firebase from \"../../utils/firebase/firebase.utils\";\nimport GoogleReview from \"../google-review/googleReview\"\nimport CustomQr from \"../../components/customQr/customQr\";\nimport PhoneCase from \"../../components/design-tools/phonecase\";\nimport {\n toggleDesignState,\n changeDesignType\n} from \"../../redux/drawing-area/drawing-area.actions\";\nimport { setObject, addObject } from \"../../redux/object/object.actions\";\nimport { defaultRedirect } from \"../../redux/routing/routing.actions\";\nimport { fetchDesigns } from \"../../redux/designImages/designImages.actions\";\n\nimport API2 from \"../../components/generateQr/generateQR\";\n\nimport { CircularProgress, Box } from \"@material-ui/core\";\n\n// Stripe\nimport { CardElement, ElementsConsumer } from \"@stripe/react-stripe-js\";\n\n//\n\nimport \"./Shop.styles.scss\";\nimport {\n createSession,\n createStripeCustomer\n} from \"../../utils/firebase/firebase.utils\";\nimport { updateUser } from \"../../redux/user/user.actions\";\n\nimport Splash from \"../splash/splash\";\n\nimport basicCard from \"./assets/images/IDCard/mytapcard.png\";\nimport cardBack from \"./assets/images/IDCard/card-back.png\";\nimport customCard from \"./assets/images/IDCard/customcard.png\";\nimport customCardYours from \"./assets/images/IDCard/customcardyours.png\";\n\n\n\n// import RangewaterCardTemplate from \"../../components/renderDirectCardImage/imgs/RW3.png\";\n\nconst RouterButton = ({ path, label, click, disabled, productType }) => {\n let history = useHistory();\n function handleClick() {\n click();\n history.push(path);\n }\n return (\n \n
\n MyTap
\nLoading...
\n\n
\n\n Shop
\n\n Fully-customizable, with\n more exciting products on the way! Create yours today.\n
\n\n
\n \n \n \n \n */}\n \n\n \n {!this.state.MyCardClassic\n ? null\n : this.renderCustomQrCardImg()}\n {!this.state.MyCardClassic ? (\n \n */}\n \n \n \n \n {this.state.classicSelectedIndex === 1? \n Pre-Designed Card-Back\n : Pre-Designed Card-Front}\n \n \n {this.state.classicSelectedIndex === 1 ? (\n \n \n \n {this.state.MyCardClassic === true ? (\n \n \n \n \n ) : null}\n\n \n \n \n {({ stripe, elements }) => (\n {\n this.setState({ loading: true });\n e.preventDefault();\n if (!currentUser.stripeCustomerId) {\n return await createStripeCustomer(\n currentUser\n ).then(async () => {\n const session = await createSession(\n `${\n this.state.MyCardClassic === true\n ? \"MyCard Classic + QR\"\n : \"MyCard Classic\"\n }`,\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n });\n } else {\n const session = await createSession(\n `${\n this.state.MyCardClassic === true\n ? \"MyCard Classic + QR\"\n : \"MyCard Classic\"\n }`,\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n }}\n >\n \n \n \n )}\n \n \n \n \n \n \n
\n\n \n
\n {/* Frontside
\nBackside
\n\n \n \n
\n ) : null}\n $25
\n ) : (\n $20
\n )}\n \n \n {this.state.MyCardClassic === true ? (\n Create your custom QR-Code!
\n Buy!
\n \n \n \n \n\n \n {!this.state.MyCard ? null : this.renderCustomQrCardImg()}\n {!this.state.MyCard ? (\n \n \n\n \n \n {this.state.customSelectedIndex === 1? \n Customizable Card-Back\n : Customizable Card-Front}\n \n \n {this.state.customSelectedIndex === 1 ? (\n \n \n \n {this.state.MyCard === true &&\n this.state.MyCardDirect === true ? (\n \n \n {/* {\n this.setDesignState(\"card\");\n }}\n productType=\"card\"\n /> */}\n this.setDesignState(\"card\")}\n productType=\"card\"\n link\n >\n \n \n ) : null}\n\n {this.state.MyCard === true ? (\n \n \n \n \n ) : null}\n\n \n \n \n {({ stripe, elements }) => (\n {\n // this.directURLToDB();\n this.setState({ loading: true });\n e.preventDefault();\n if (!currentUser.stripeCustomerId) {\n return await createStripeCustomer(\n currentUser\n ).then(async () => {\n const session = await createSession(\n `${\n // this.state.MyCard === true ? \"card + QR\" : \"card\"\n this.state.MyCard === true &&\n this.state.MyCardDirect === true\n ? \"MyCard Direct + QR\"\n : this.state.MyCardDirect === true\n ? \"MyCard Direct\"\n : this.state.MyCard === true\n ? \"card + QR\"\n : \"card\"\n }`,\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n });\n } else {\n const session = await createSession(\n `${\n this.state.MyCard === true &&\n this.state.MyCardDirect === true\n ? \"MyCard Direct + QR\"\n : this.state.MyCardDirect === true\n ? \"MyCard Direct\"\n : this.state.MyCard === true\n ? \"card + QR\"\n : \"card\"\n }`,\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n }}\n >\n \n \n \n )}\n \n \n \n \n \n \n
\n\n {/* \n
\n \n \n \n \n
\n ) : null}\n $40
\n ) : this.state.MyCardDirect === true ? (\n $30
\n ) : this.state.MyCard === true ? (\n $45
\n ) : (\n $40
\n )}\n \n \n {this.state.customSelectedIndex != 1 ? (\n DESIGN YOUR CARD!
\n Create your custom QR-Code!
\n Buy!
\n \n \n {({ stripe, elements }) => (\n {\n e.preventDefault();\n\n if (!currentUser.stripeCustomerId) {\n return await createStripeCustomer(currentUser).then(\n async () => {\n const session = await createSession(\n `${\n this.state.MyCase === true\n ? \"phoneCase + QR\"\n : \"phoneCase\"\n }`\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n );\n } else {\n const session = await createSession(\n `${\n this.state.MyCase === true\n ? \"phoneCase + QR\"\n : \"phoneCase\"\n }`\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n }}\n >\n\n \n Buy\n \n \n )}\n \n\n {this.state.MyCase === true ? (\n
*/}\n\n MyCase Custom
\n\n
\n {\n this.setDesignState(\"phone\");\n }}\n disabled={!this.state.addedPhone}\n productType=\"phonecase\"\n />\n
\n \n
\n \n
$70
\n ) : (\n $60
\n )}\n\n \n \n \n
\n\n {this.state.MyCase === true ? \n \n \n MyBand\n \n \n \n \n \n \n \n \n {({ stripe, elements }) => (\n {\n this.setState({ loading: true });\n e.preventDefault();\n\n if (!currentUser.stripeCustomerId) {\n return await createStripeCustomer(\n currentUser\n ).then(async () => {\n const session = await createSession(\n `${\n this.state.bandColor === \"white\"\n ? \"MyBand - White\"\n : \"MyBand - Black\"\n }`,\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n });\n } else {\n const session = await createSession(\n `${\n this.state.bandColor === \"white\"\n ? \"MyBand - White\"\n : \"MyBand - Black\"\n }`,\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n }}\n >\n \n \n \n )}\n \n \n \n \n \n \n
\n\n \n
\n \n \n \n\n \n\n \n \n
\n $10
\n \n \n Buy!
\n \n \n
\n\n\n \n this.props.history.goBack()}\n />\n
\n );\n } else {\n return (\n {label}
\n \n );\n};\n\nexport default SideNavLink;\n","import React from \"react\";\nimport { MDBIcon, MDBModal, MDBModalBody, MDBBtn } from \"mdbreact\";\nimport { auth } from \"../../utils/firebase/firebase.utils\";\n\nconst LogoutModal = ({ isOpen, toggleModal, history, toggleSideNav }) => {\n const onLogoutClick = async (e) => {\n e.preventDefault();\n toggleSideNav();\n toggleModal(false);\n history.push(\"/\");\n await auth.signOut();\n };\n\n return (\n\n {this.props.currentUser.role === \"fulfillment\" ||\n this.props.currentUser.email === \"americanrooterservices@gmail.com\" ||\n this.props.currentUser.email === \"rangewater@gmail.com\" ||\n this.props.currentUser.email === \"sugarcoatops@gmail.com\" ||\n this.props.currentUser.email === \"marmenta@galleryresidential.com\" ||\n this.props.currentUser.email === \"ksarvis@columbiares.com\" ? null : (\n <>\n \n {/* \n \n \n \n \n */}\n\n this.handleSwitchChange()}\n />\n :null}\n\n
\n );\n\n renderLinks = () => {\n return this.props.currentUser ? (\n this.authenticatedLinks(this.renderRoleLink)\n ) : (\n this.toggleQR()}>\n
\n \n QR CODE
\n\n {\n this.toggleModal();\n }}\n />\n
\n Log Out
\n\n {/*
\n );\n };\n\n renderRoleLink = () => {\n switch (this.props.currentUser.role) {\n case \"enterprise\":\n return (\n \n {\n this.toggleLoginModal();\n }}\n />\n
\n Log In
\n\n {\n this.childRef = node;\n }}\n hidden={this.state.sideNavHidden}\n toggleSideNav={this.handleClick}\n />\n
\n );\n }\n}\n\nexport default Nav;\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { MDBRow, MDBContainer, MDBIcon, MDBCard } from \"mdbreact\";\nimport { Link } from \"react-router-dom\";\n\nimport \"./dashboard.scss\";\n\nclass Dashboard extends Component {\n render() {\n return (\n Add your info
\n \nEnter our shop
\n \n\n this.selectImage(e)} />\n {/* 
*/}\n
\n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n // prop: state.prop\n }\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n addImage: (payload) => {\n dispatch(addObject(payload))\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Image);\n","import React, { Component } from \"react\";\nimport { Button } from \"react-bootstrap\";\nimport FontAwesome from \"react-fontawesome\";\n\nimport { connect } from \"react-redux\";\nimport { addObject } from \"../../../redux/object/object.actions\";\n\nclass Text extends Component {\n\n componentDidMount() {}\n\n componentDidUpdate() {}\n\n addTextItem(){\n let payloadObject = {\n id : Math.floor(Math.random()*10000)+'_'+ new Date().getTime(),\n kind : 'Text',\n type : 'text',\n text : 'Default Text',\n }\n this.props.addText(payloadObject);\n }\n\n render() {\n return (\n \n \n
\n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n // prop: state.prop\n }\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n addText: (payload) => {\n dispatch(addObject(payload))\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Text);\n","import React, { Component } from \"react\";\n\nimport { connect } from \"react-redux\";\nimport { addObject } from \"../../../redux/object/object.actions\";\n\nclass Shape extends Component {\n componentDidMount() {}\n\n componentDidUpdate() {}\n\n addShapeItem(pType){\n this.props.addShape({\n id : Math.floor(Math.random()*10000)+'_'+ new Date().getTime(),\n kind : \"Shape\",\n type : pType,\n })\n }\n\n render() {\n return (\n \n \n \n \n \n
\n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n // prop: state.prop\n }\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n addShape : (payload) => {\n dispatch(addObject(payload))\n }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Shape);\n","import React from \"react\";\nimport { List} from \"react-movable\";\n\nimport { connect, useSelector } from \"react-redux\";\nimport { MDBMedia } from \"mdbreact\";\n\nimport {\n updateSequence,\n releasedObject,\n selectedObject\n} from \"../../../redux/object/object.actions\";\n\nfunction Layer({\n objects,\n activedObject,\n lastAction,\n sceneManager,\n canvas,\n updateSequence,\n releasedObject,\n selectedObject,\n}) {\n const { items } = useSelector((state) => ({\n items: state.objects.slice(1, state.objects.length).map((el) => {\n let img = sceneManager.getImgDataObject(el.id);\n el.img = img;\n return el;\n }),\n }));\n\n const changed = (oldIndex, newIndex) => {\n updateSequence({\n sourceIdx: oldIndex + 1,\n targetIdx: newIndex + 1,\n });\n sceneManager.updateSequence({\n sourceIdx: oldIndex,\n targetIdx: newIndex,\n });\n };\n\n return (\n \n {this.props.activeTool===\"image\" &&
\n )\n \n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n stateToolbar : state.stateToolbar,\n mobile : state.mobile,\n }\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n // toggleDesignState : (payload)=>{\n // dispatch(toggleDesignState(payload))\n // },\n // toggleToolbar : (payload)=>{\n // dispatch(toggleToolbar(payload))\n // }\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ItemPanel);","const fonts = [\n 'Adobe Arabic',\n 'Adobe Caslon Pro',\n 'Adobe Fan Heiti Std',\n 'Adobe Fangsong Std',\n 'Adobe Garamond Pro',\n 'Adobe Gothic Std',\n 'Adobe Hebrew',\n 'Adobe Heiti Std',\n 'Adobe Kaiti Std',\n 'Adobe Ming Std',\n 'Adobe Myungjo Std',\n 'Adobe Song Std',\n 'Allura',\n 'Amatic SC',\n 'Arial',\n 'Bahnscrift',\n 'Birch Std',\n 'Blackoak Std',\n 'Book Antiqua',\n 'Bookman Old Style',\n 'Bookshelf Symbol',\n 'Brush Script Std',\n 'Calibri',\n 'Cambria',\n 'Cambria Math',\n 'Candara',\n 'Century',\n 'Chaparral Pro',\n 'Charlemagne Std',\n 'Comic Sans MS',\n 'Consolas',\n 'Constantia',\n 'Cooper Std',\n 'Corbel',\n 'Courier New',\n 'DengXian',\n 'Ebrima',\n 'FangSong',\n 'Franklin Gothic',\n 'Gabriola',\n 'Gadugi',\n 'Garamond',\n 'Georgia',\n 'Giddyup Std',\n 'Hobo Std',\n 'HoloLens MDL2 Assets',\n 'Impact',\n 'Ink Free',\n 'Javanese Text',\n 'KaiTi',\n 'Kozuka Gothic Pr6N',\n 'Kozuka Gothic Pro',\n 'Kozuka Mincho Pr6N',\n 'Kozuka Mincho Pro',\n 'Leelawadee',\n 'Leelawadee UI',\n 'Letter Gothic Std',\n 'Lithos Pro',\n 'Lucida Console',\n 'Lucida Sans Unicode',\n 'Malgun Gothic',\n 'Marlett',\n 'Mesquite Std',\n 'Microsoft Himalaya',\n 'Microsoft JhengHei',\n 'Microsoft JhengHei UI',\n 'Microsoft New Tai Lue',\n 'Microsoft PhagsPa',\n 'Microsoft Sans Serif',\n 'Microsoft Tai Le',\n 'Microsoft Uighur',\n 'Microsoft YaHei',\n 'Microsoft YaHei UI',\n 'Microsoft Yi Baiti',\n 'MingLiU_HKSCS-ExtB',\n 'MingLiU-ExtB',\n 'Minion Pro',\n 'Mongolian Baiti',\n 'Monotype Corsiva',\n 'MS Gothic',\n 'MS PGothic',\n 'MS Reference Sans Serif',\n 'MS Reference Specialty',\n 'MS UI Gothic',\n 'MB Boli',\n 'Myanmar Text',\n 'Myriad Pro',\n 'Mirmala UI',\n 'NSimSun',\n 'Nueva Std',\n 'OCR A Std',\n 'Orator Std',\n 'Palatino Linotype',\n 'PMingLiU-ExtB',\n 'Poplar Std',\n 'Prestige Elite Std',\n 'Rosewood Std',\n 'Segoe MDL2 Assets',\n 'Segoe Print',\n 'Segoe Script',\n 'Segoe UI',\n 'Segoe UI Emoji',\n 'Segoe UI Historic',\n 'Segoe UI Symbol',\n 'SimHei',\n 'SimSun',\n 'SimSun-ExtB',\n 'Sitka',\n 'Stencil Std',\n 'Sylfaen',\n 'Symbol',\n 'Tahoma',\n 'TeamViewer15',\n 'Tekton Pro',\n 'Times New Roman',\n 'Trajan Pro',\n 'Trebuchet MS',\n 'Verdana',\n 'Webdings',\n 'Wingdings',\n 'Wingdings 2',\n 'Wingdings 3',\n 'Yu Gothic',\n 'Yu Gothic UI',\n 'Roboto Slab',\n 'Noto Sans',\n 'Open Sans Condensed',\n 'Playfair Display',\n 'Ubuntu',\n 'Turret Road',\n 'PT Serif',\n 'Titillium Web',\n 'Nunito',\n 'Fira Sans',\n 'Noto Sans JP',\n 'Grenze',\n 'Work Sans',\n 'PT Sans Narrow',\n 'Quicksand',\n 'Inconsolata',\n 'Notable',\n 'Teko',\n 'Mukta',\n 'Arimo',\n 'Noto Sans KR',\n 'Noto Sans TC',\n 'Yanone Kaffeesatz',\n 'Josefin Sans',\n 'Heebo',\n 'Cute Font',\n 'Fjalla One',\n 'Indie Flower',\n 'Barlow Condensed',\n 'Anton',\n 'Pacifico',\n 'Dancing Script',\n 'Squada One',\n 'Abril Fatface',\n 'Shadows Into Light',\n 'Ramabhadra',\n 'Acme',\n 'Bree Serif',\n 'Kanit',\n 'Catamaran',\n 'Amatic SC',\n 'Righteous',\n 'Fira Sans Condensed',\n 'Ubuntu Condensed',\n 'Patua One',\n 'Orbitron',\n 'Alegreya',\n 'Cinzel',\n 'Rajdhani',\n 'Permanent Marker',\n 'Francois One',\n 'Satisfy',\n 'Cuprum',\n 'Ranga',\n 'Courgette',\n 'Caveat',\n 'Kalam',\n 'Luckiest Guy',\n 'Zilla Slab',\n 'Pathway Gothic One',\n 'Fredoka One',\n 'Alfa Slab One',\n 'Kaushan Script',\n 'Great Vibes',\n 'Cookie',\n 'Lobster Two',\n 'Sacramento',\n 'Gloria Hallelujah',\n 'Patrick Hand',\n 'Poiret One',\n 'Economica',\n 'Passion One',\n 'Bangers',\n 'BenchNine',\n 'Handlee',\n 'Saira Stencil One',\n 'Josefin Slab',\n 'Lexend Deca',\n 'Lexend Mega',\n 'Russo One',\n 'Neucha',\n 'Paytone One',\n 'Viga',\n 'Gudea',\n 'Playfair Display SC',\n 'Ruda',\n 'Ultra',\n 'Vollkorn SC',\n 'Tangerine',\n 'Khand',\n 'Advent Pro',\n 'Monoton',\n 'Yellowtail',\n 'Amaranth',\n 'Marck Script',\n 'Unica One',\n 'Playball',\n 'Parisienne',\n 'Bad Script',\n 'Unlock',\n 'Press Start 2P',\n 'Boogaloo',\n 'Homemade Apple',\n 'Audiowide',\n 'Schoolbell',\n 'Baloo',\n 'Chilanka',\n 'Asap Condensed',\n 'Fugaz One',\n 'Sigmar One',\n 'Julius Sans One',\n 'Shadows Into Light Two',\n 'Covered By Your Grace',\n 'Oleo Script',\n 'Allura',\n 'Merienda',\n 'Rock Salt',\n 'Staatliches',\n 'Damion',\n 'Love Ya Like A Sister',\n 'Rubik Mono One',\n 'Pragati Narrow',\n 'Nothing You Could Do',\n 'Barriecito',\n 'Chewy',\n 'Mr Dafoe',\n 'Pinyon Script',\n 'Black Ops One',\n 'Leckerli One',\n 'Slackey',\n 'Alex Brush',\n 'Fredericka the Great',\n 'Caveat Brush',\n 'Nanum Pen Script',\n 'Niconne',\n 'Lilita One',\n 'Prociono',\n 'Reenie Beanie',\n 'Aclonica',\n 'Bahianita',\n 'Italianno',\n 'Cabin Sketch',\n 'Aladin',\n 'Marvel',\n 'Coming Soon',\n 'Saira Condensed',\n 'Yesteryear',\n 'Berkshire Swash',\n 'Ruge Boogie',\n 'Cinzel Decorative',\n 'Nanum Brush Script',\n 'Grand Hotel',\n 'Norican',\n 'Arizonia',\n 'Raleway Dots',\n 'Pattaya',\n 'Kristi',\n 'Shojumaru',\n 'Calligraffitti',\n 'Mountains of Christmas',\n 'Beth Ellen',\n 'Mr De Haviland',\n 'Ceviche One',\n 'Finger Paint',\n 'Montez',\n 'Six Caps',\n 'Seaweed Script',\n 'Cedarville Cursive',\n 'Faster One',\n 'Bungee Shade',\n 'Zhi Mang Xing',\n 'Clicker Script',\n 'Mrs Saint Delafield',\n 'Euphoria Script',\n 'Galada',\n 'Eater',\n 'Codystar',\n 'IM Fell English SC',\n 'Creepster',\n 'Ewert',\n 'Sarina',\n 'Nosifer',\n 'League Script',\n 'Miniver',\n 'Monofett',\n 'Barrio',\n 'Metal Mania',\n 'Libre Barcode 39 Extended Text',\n 'Libre Barcode 39 Text',\n 'Kenia',\n ].sort();\n\nexport let labelFont = [ \n 'Wallpoet'\n];\n\nexport default fonts;","import React, { useState } from \"react\";\nimport { connect } from \"react-redux\";\nimport { useHistory } from \"react-router-dom\";\n\nimport FontAwesome from \"react-fontawesome\";\nimport fonts from \"./Font\";\nimport { Button, Modal, Form } from \"react-bootstrap\";\nimport { SketchPicker } from \"react-color\";\n\n// import { MDBBtn, MDBIcon } from 'mdbreact';\n\nimport { updateObject, deleteObject } from \"../../redux/object/object.actions\";\nimport FontPicker from \"font-picker-react\";\n\nimport firebase from \"../../utils/firebase/firebase.utils\";\n\n// import imageCompression from 'browser-image-compression';\n\n\nconst PropertyPanel = ({\n height,\n options,\n designType,\n phoneCase,\n lastAction,\n sceneManager,\n updateObject,\n deleteObject,\n mobile,\n userId,\n googleUserId\n}) => {\n const [activeFontFamily, setActiveFontFamily] = useState(\"Open Sans\");\n const [showModalText, setShowModalText] = useState(false);\n\n const [text, setText] = useState(options.text);\n\n const [showColorModal, setShowColorModal] = useState(false);\n const [color, setColor] = useState(options.fill);\n\n const [showOutlineColorModal, setShowOutlineColorModal] = useState(false);\n const [outlineColor, setOutlineColor] = useState(options.stroke);\n\n const [fontSize, setFontSize] = useState(options.fontSize);\n\n const [textAlign, setTextAlign] = useState(options.textAlign);\n\n const [fontWeight, setFontWeight] = useState(options.fontWeight);\n const [fontStyle, setFontStyle] = useState(options.fontStyle);\n const [underline, setUnderline] = useState(options.underline);\n\n const [strokeWidth, setStrokeWidth] = useState(options.strokeWidth);\n\n const showPanel = () => {\n return lastAction === \"OBJECT/SELECTED\" || lastAction === \"OBJECT/UPDATE\";\n };\n\n const showTextModal = (pShow) => {\n if (pShow) setText(options.text);\n setShowModalText(pShow);\n };\n const updateText = (e) => {\n setShowModalText(false);\n updateObject({ id: options.id, text: text });\n };\n const handleChange = (event) => {\n setText(event.target.value);\n };\n\n const updateOutlineColor = (event) => {\n setOutlineColor(event.hex);\n updateObject({ id: options.id, stroke: event.hex });\n // setShowOutlineColorModal(false);\n };\n\n const updateColor = (event) => {\n setColor(event.hex);\n updateObject({ id: options.id, fill: event.hex });\n // setShowColorModal(false);\n };\n\n const handleChangeFontSize = (value) => {\n setFontSize(value);\n updateObject({ id: options.id, fontSize: value });\n };\n\n const changeTextAlign = (pAlign = \"center\") => {\n setTextAlign(pAlign);\n updateObject({ id: options.id, textAlign: pAlign });\n };\n\n const changeTextStyle = (pStyle) => {\n if (\"fontWeight\" in pStyle) {\n setFontWeight(pStyle.fontWeight);\n } else if (\"fontStyle\" in pStyle) {\n setFontStyle(pStyle.fontStyle);\n } else if (\"underline\" in pStyle) {\n setUnderline(pStyle.underline);\n }\n updateObject({\n ...pStyle,\n id: options.id\n });\n };\n\n const changeThickness = (value) => {\n setStrokeWidth(value);\n updateObject({ id: options.id, strokeWidth: Number(value) });\n };\n\n const deleteItem = () => {\n deleteObject({ id: options.id });\n sceneManager.deleteObject(options.id);\n };\n\n let history = useHistory();\n\n async function saveDesign() {\n // let imgbase64 = sceneManager.getSceneBase64Image();\n console.log(\"save\");\n let imgbase64 = await sceneManager.getCropImage();\n\n \n var database = firebase.database();\n database.ref(`designs/ + ${userId}`).update({\n [designType]: imgbase64\n })\n\n history.push(\"/shop\");\n }\n\n\n function changeValue(pKind, pPM) {\n switch (pKind) {\n case \"fontSize\":\n let font = fontSize + (pPM === \"plus\" ? 1 : -1);\n if (font < 1) font = 1;\n handleChangeFontSize(font);\n break;\n case \"strokeWidth\":\n let stroke =\n Math.round((strokeWidth + (pPM === \"plus\" ? 0.1 : -0.1)) * 100) / 100;\n if (stroke < 0.1) stroke = 0;\n changeThickness(stroke);\n break;\n default:\n }\n }\n\n const panelContent = () => {\n let objKind = options.kind;\n let content = null;\n\n switch (objKind) {\n case \"Phone\":\n break;\n case \"Image\":\n content = <>{deleteButton()};\n break;\n case \"Text\":\n content = (\n <>\n {mobile && deleteButton()}\n \n
\n Edit Text
\n \n \n
\n \n
\n Font
\n \n {\n setActiveFontFamily(nextFont.family);\n setTimeout(function () {\n updateObject({\n id: options.id,\n fontFamily: nextFont.family\n });\n }, 1000);\n }}\n style={{ width: \"150px\", height: \"50px\" }}\n />\n
\n \n setShowColorModal(true)}\n style={{ display: \"flex\" }}\n >\n
\n \n
\n Text
\n \n {color}\n
\n \n\n
\n \n
\n Size
\n \n handleChangeFontSize(e.target.value)}\n onKeyDown={(e) => setFontSize(e.target.value)}\n />\n
\n {mobile && changeButtons(\"fontSize\")}\n \n setShowOutlineColorModal(true)}\n style={{ display: \"flex\" }}\n >\n
\n \n
\n Outline
\n \n {outlineColor}\n
\n \n\n
\n \n
\n Outline Size
\n \n changeThickness(e.target.value)}\n onKeyDown={(e) => setStrokeWidth(e.target.value)}\n />\n
\n {mobile && changeButtons(\"strokeWidth\")}\n \n
\n \n
\n Align
\n \n changeTextAlign(\"left\")}\n >\n changeTextAlign(\"center\")}\n >\n changeTextAlign(\"right\")}\n >\n
\n \n
\n {!mobile && deleteButton()}\n \n
\n Style
\n \n {\n let updateProp = {\n fontWeight: fontWeight === \"bold\" ? \"\" : \"bold\"\n };\n changeTextStyle(updateProp);\n }}\n >\n {\n let updateProp = {\n fontStyle: fontStyle === \"italic\" ? \"\" : \"italic\"\n };\n changeTextStyle(updateProp);\n }}\n >\n {\n let updateProp = {\n underline: underline ? false : true\n };\n changeTextStyle(updateProp);\n }}\n >\n
\n \n setShowColorModal(true)}\n style={{ display: \"flex\" }}\n >\n
\n \n
\n fill
\n \n {color}\n
\n \n\n setShowOutlineColorModal(true)}\n style={{ display: \"flex\" }}\n >\n
\n \n
\n stroke
\n \n {outlineColor}\n
\n \n\n
\n {!mobile && deleteButton()}\n \n
\n Outline Size
\n \n changeThickness(e.target.value)}\n onKeyDown={(e) => setStrokeWidth(e.target.value)}\n />\n
\n {mobile && changeButtons(\"strokeWidth\")}\n \n changeValue(pKind, \"plus\")}\n >\n changeValue(pKind, \"minus\")}\n >\n
\n );\n };\n\n const saveButton = () => {\n return (\n \n );\n };\n\n const deleteButton = () => {\n return (\n \n );\n };\n\n return (\n \n
\n Save
\n \n );\n }\n\n getLaptopPanel() {\n return (\n this.changePanel('', e)}> */}\n \n {this.saveButton()} \n \n \n this.addItem(\"image\")}\n >\n \n this.addItem(\"text\")}\n >\n \n this.addItem(\"shape\")}\n >\n \n \n \n \n \n\n {showItemPanel && -1;\n\n if(!flagExist){\n switch(pAttr.kind){\n case \"Phone\":\n this._objects.push( new DesignTool.PhoneCase(pAttr, this) );\n break;\n case \"Text\":\n this._objects.push( new DesignTool.Text(pAttr, this));\n break;\n case \"Image\":\n this._objects.push( new DesignTool.Image(pAttr, this));\n break;\n case \"Shape\":\n this._objects.push( new DesignTool.Shape(pAttr, this));\n break;\n default:\n \n }\n }else{\n // console.log('the instance existed already');\n }\n }\n\n updateObject(pAttr){\n let {object} = this.getObjectfromID(pAttr.id);\n if(!!object) object.updateObject(pAttr);\n }\n\n deleteObject(pID){\n let {idx,object} = this.getObjectfromID(pID);\n if(!!object){\n object.deleteInstance();\n this._objects.splice(idx,1);\n }\n }\n\n releaseObject(){\n this.canvas.discardActiveObject();\n }\n\n updateSequence(pSequance){\n let shape = this.canvas.getObjects()[pSequance.sourceIdx];\n this.canvas.remove(shape).insertAt(shape, pSequance.targetIdx).requestRenderAll()\n }\n\n sendMessage(pData){\n this._sendMessage(pData);\n }\n\n getSceneBase64Image(){\n return this._canvas.toDataURL({\n\t\t\tformat: 'png',\n quality : 1,\n multiplier : 2,\n\t\t});\n }\n\n downloadImage(base64Image){\n const a = document.createElement(\"a\");\n a.href = base64Image;\n a.download = \"\";\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n }\n\n getCropImage(){\n let own =this;\n let cropInfo = this._objects[0].attribute;\n let multi = 1200/this.width;\n return new Promise((response, reject)=>{\n\n own._objects[0].instance.clone(function(crop){\n\n cropInfo.opacity = 1;\n crop.setOptions(cropInfo);\n crop.globalCompositeOperation = 'destination-out';\n own._canvas.add(crop).requestRenderAll();\n\n if(crop.name!==undefined){\n let name = new fabric.Text(crop.name, {\n fontFamily : 'Wallpoet',\n fontSize : 25,\n fill : '#333',\n top : own._canvas.height - 25,\n });\n let w = name.getScaledWidth();\n name.set('left', (own._canvas.width-w)/2);\n own._canvas.add(name).requestRenderAll();\n }\n\n // own.downloadImage(own._canvas.toDataURL({\n // format: 'png',\n // quality : 1,\n // multiplier : 1,\n // }));\n \n let imgdata = own._canvas.toDataURL({\n format: 'png',\n quality : 1,\n multiplier : multi,\n });\n response(imgdata);\n });\n });\n \n }\n\n getImgDataObject(pID){\n let {idx, object} = this.getObjectfromID(pID);\n if(idx>-1 && !!object){\n return object.instance.toDataURL({\n format: 'png',\n quality : 1,\n multiplier : 1,\n });\n }else{\n // throw(\"don't exist the object with \" + pID + 'on canvas.');\n } \n }\n}\nDesignTool.SceneManager = SceneManager;\n\nclass fabricObject{\n _attribute = null;\n _manager = null;\n\n instance = null;\n\n constructor(pAttr, pManager){\n this._attribute = pAttr;\n this._manager = pManager;\n }\n\n updateObject(pAttr){\n let diff = compareAttribute(this.attribute, pAttr);\n if(diff.length>0){\n if(diff.indexOf('index')>0){\n debugger\n }else{\n if(this.instance.type==='image') delete pAttr.stroke;\n this.instance.setOptions(pAttr);\n this.Manager.canvas.requestRenderAll();\n this._attribute = pAttr;\n }\n }\n }\n\n deleteInstance(){\n this.Manager.canvas.remove(this.instance).requestRenderAll();\n }\n\n set Manager(pManager){\n this._manager = pManager;\n }\n get Manager(){\n return this._manager;\n }\n get id(){\n return this._attribute.id;\n }\n\n get attribute(){\n return this._attribute;\n }\n set attribute(pAttr){\n this._attribute = pAttr;\n }\n\n get canvas(){\n return this._manager.canvas;\n }\n}\nDesignTool.fabricObject = fabricObject;\n\nclass PhoneCase extends fabricObject{\n constructor(pAttr, pManager){\n super(pAttr, pManager);\n\n initialize();\n\n let oneself = this;\n function initialize(){\n fabric.Image.fromURL(pAttr.url, function(instImage){\n let attr = {\n ...pAttr,\n evented : false,\n selectable : false,\n opacity : 0.75,\n };\n\n if(attr.width===0 && attr.height===0 && attr.left===-10000 && attr.top===-10000){\n attr.scaleX = pManager.width*1.2/instImage.width;\n attr.scaleY = pManager.height*1.2/instImage.height;\n attr.width = instImage.width;\n attr.height = instImage.height;\n attr.left = pManager.width/2 - attr.width*attr.scaleX/2;\n attr.top = pManager.height/2 - attr.height*attr.scaleY/2;\n attr.index = -1;\n }\n instImage.setOptions(attr);\n \n pManager.canvas.add(instImage).requestRenderAll();\n oneself.attribute = attr;\n oneself.instance = instImage;\n\n pManager.sendMessage({\n type : \"updateAttribute\",\n data : attr,\n });\n\n // pManager.sendMessage({\n // type : 'bindEvent',\n // data : instImage,\n // })\n });\n }\n }\n\n updateObject(pAttr){\n let oneself = this;\n let diff = compareAttribute(this.attribute, pAttr);\n if(diff.length>0){\n if(diff.indexOf('index')>0){\n }else if(diff.indexOf('url')!==-1){\n var img=new Image();\n img.onload=function(){\n oneself.instance.setElement(img);\n oneself.canvas.requestRenderAll();\n }\n img.src = pAttr.url;\n }else{\n console.log('error in phone case')\n }\n }\n }\n}\nDesignTool.PhoneCase = PhoneCase;\n\nclass Text extends fabricObject{\n constructor(pAttr, pManager){\n super(pAttr, pManager);\n \n let oneself = this;\n\n initialize();\n\n function initialize(){\n let instText = new fabric.Text(pAttr.text, pAttr);\n\n if(pAttr.width===0 && pAttr.height===0 && pAttr.left===-10000 && pAttr.top===-10000){\n pAttr.width = instText.width;\n pAttr.height = instText.height;\n pAttr.left = pManager.width/2 - pAttr.width/2;\n pAttr.top = pManager.height/2 - pAttr.height/2; \n instText.setOptions({\n ...pAttr,\n objectCaching: false,\n });\n }\n\n oneself.attribute = pAttr;\n oneself.instance = instText;\n\n pManager.sendMessage({\n type : \"updateAttribute\",\n data : pAttr,\n });\n\n pManager.sendMessage({\n type : 'bindEvent',\n data : instText,\n })\n\n pManager.canvas.insertAt(instText, pAttr.index).setActiveObject(instText).requestRenderAll();\n\n }\n }\n}\nDesignTool.Text = Text;\n\nclass Image extends fabricObject{\n constructor(pAttr, pManager){\n super(pAttr, pManager);\n \n let oneself = this;\n\n initialize();\n\n function initialize(){\n let imageDOM = document.createElement('img');\n imageDOM.src = pAttr.url;\n imageDOM.onload = () =>{\n let attr = {\n ...pAttr,\n evented : true,\n selectable : true,\n };\n delete attr.stroke;\n if(attr.width===0 && attr.height===0 && attr.left===-10000 && attr.top===-10000){\n attr.width = imageDOM.width;\n attr.height = imageDOM.height;\n let ratioX = pManager.width*0.75/imageDOM.width,\n ratioY = pManager.height*0.75/imageDOM.height,\n ratio = Math.min(ratioX, ratioY);\n attr.scaleX = ratio;\n attr.scaleY = ratio;\n attr.left = pManager.width/2 - attr.width*ratio/2;\n attr.top = pManager.height/2 - attr.height*ratio/2;\n }\n let instImage = new fabric.Image(imageDOM, attr); \n oneself.attribute = attr;\n oneself.instance = instImage;\n\n pManager.sendMessage({\n type : \"updateAttribute\",\n data : attr,\n });\n\n pManager.sendMessage({\n type : 'bindEvent',\n data : instImage,\n })\n\n pManager.canvas.insertAt(instImage, pAttr.index).setActiveObject(instImage).requestRenderAll();\n\n }\n\n }\n }\n}\n\nDesignTool.Image = Image;\n\nclass Shape extends fabricObject{\n constructor(pAttr, pManager){\n super(pAttr, pManager);\n \n let oneself = this;\n\n initialize();\n\n function initialize(){\n let instShape = null;\n\n if(pAttr.width===0 && pAttr.height===0 && pAttr.radius===0 && pAttr.left===-10000 && pAttr.top===-10000){\n pAttr.width = 50;\n pAttr.height = 50;\n pAttr.radius = 25;\n pAttr.left = pManager.width/2 - pAttr.width/2;\n pAttr.top = pManager.height/2 - pAttr.height/2;\n }\n\n switch(pAttr.type){\n case 'Triangle':\n instShape = new fabric.Triangle(pAttr);\n break;\n case 'Circle':\n instShape = new fabric.Circle(pAttr);\n break;\n case 'Rect':\n instShape = new fabric.Rect(pAttr);\n break;\n case 'Line':\n pAttr.height = 1;\n instShape = new fabric.Rect(pAttr);\n break;\n default:\n }\n \n instShape.setOptions(pAttr);\n\n oneself.attribute = pAttr;\n oneself.instance = instShape;\n\n pManager.sendMessage({\n type : \"updateAttribute\",\n data : pAttr,\n });\n\n pManager.sendMessage({\n type : 'bindEvent',\n data : instShape,\n })\n\n pManager.canvas.insertAt(instShape, pAttr.index).setActiveObject(instShape).requestRenderAll();\n\n }\n }\n}\nDesignTool.Shape = Shape;","import React from \"react\";\nimport { connect } from \"react-redux\";\n\nimport {\n selectedObject,\n releasedObject,\n updateObject\n} from \"../../redux/object/object.actions\";\nimport { designOn } from \"../../redux/observe\";\n\nclass EntityObject extends React.Component {\n state = {\n attribute: null\n };\n\n UNSAFE_componentWillMount() {\n designOn(\"anyChange\", this.updateObject.bind(this));\n }\n\n componentDidMount() {\n // if(!this.state.attribute && (this.props.lastAction==='OBJECT/ADD' || this.props.lastAction==='OBJECT/SET' ) ){\n if (!this.state.attribute) {\n this.props.scene.addObject(this.props.attr);\n this.setState({ attribute: this.props.attr });\n }\n }\n UNSAFE_componentWillReceiveProps(newProp) {\n this.props.scene.addObject(newProp.attr);\n this.setState({ attribute: newProp.attr });\n }\n\n updateObject(action, option) {\n if (option.id === this.props.attr.id && this.state.attribute) {\n if (\n action === \"OBJECT/UPDATE\" ||\n (action === \"OBJECT/DELETE\" && option.kind !== \"Phone\")\n ) {\n this.props.scene.updateObject(option);\n }\n }\n }\n\n render() {\n return null;\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n lastAction: state.lastAction,\n scene: state.sceneManager\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n activeObject: (payload) => {\n dispatch(selectedObject(payload));\n },\n releasedObject: (payload) => {\n dispatch(releasedObject(payload));\n },\n updateObject: (payload) => {\n dispatch(updateObject(payload));\n }\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(EntityObject);\n","import React from \"react\";\nimport { connect } from \"react-redux\";\n\nimport { designOn } from \"../../redux/observe\";\nimport {\n setManager,\n configViewport,\n zoom,\n pan,\n toggleToolbar\n} from \"../../redux/drawing-area/drawing-area.actions\";\nimport {\n selectedObject,\n releasedObject,\n updateObject\n} from \"../../redux/object/object.actions\";\n\nimport DesignTool from \"../design-canvas/DesignCanvas\";\nimport EntityObject from \"../design-tools/entityObject\";\n\nimport \"./DrawingArea.css\";\n\nclass DrawingArea extends React.Component {\n UNSAFE_componentWillMount() {\n designOn(\"open\", this.openScene.bind(this));\n }\n\n componentDidMount() {\n let manager = new DesignTool.SceneManager({\n canvas: this.c,\n width: this.props.width,\n height: this.props.height,\n message: this.messageFromScene.bind(this)\n });\n this.props.setManager(manager);\n this.props.configViewport({\n canvasViewport: {\n x: 0,\n y: 0,\n width: this.props.width,\n height: this.props.height\n }\n });\n }\n\n componentDidUpdate() {\n if (\n !!this.props.sceneManager &&\n (this.props.width !== this.props.sceneManager.width ||\n this.props.height !== this.props.sceneManager.height)\n ) {\n this.props.sceneManager.resize(this.props.width, this.props.height);\n this.props.configViewport({\n canvasViewport: {\n x: 0,\n y: 0,\n width: this.props.width,\n height: this.props.height\n }\n });\n }\n }\n\n messageFromScene(pData) {\n let oneself = this;\n switch (pData.type) {\n case \"updateAttribute\":\n this.props.updateObject(pData.data);\n break;\n case \"bindEvent\":\n let fabricObject = pData.data;\n fabricObject.on(\"selected\", function () {\n oneself.props.objects.forEach((obj) => {\n if (obj.id === fabricObject.id) {\n oneself.props.selectedObject(obj);\n }\n });\n });\n\n fabricObject.on(\"deselected\", function () {\n oneself.props.releasedObject();\n });\n\n fabricObject.on(\"rotated\", function () {\n oneself.props.updateObject({\n id: fabricObject.id,\n angle: fabricObject.angle,\n left: fabricObject.left,\n top: fabricObject.top\n });\n });\n\n fabricObject.on(\"moved\", function () {\n oneself.props.updateObject({\n id: fabricObject.id,\n left: fabricObject.left,\n top: fabricObject.top\n });\n });\n\n fabricObject.on(\"scaled\", function () {\n oneself.props.updateObject({\n id: fabricObject.id,\n scaleX: fabricObject.scaleX,\n scaleY: fabricObject.scaleY,\n left: fabricObject.left,\n top: fabricObject.top\n });\n });\n break;\n default:\n }\n }\n\n openScene() {\n if (!!this.props.sceneManager) this.props.sceneManager.clearScene();\n }\n\n createChildren() {\n if (\n !!this.props.sceneManager &&\n (this.props.sceneManager.width !== this.props.width ||\n this.props.sceneManager.height !== this.props.height)\n ) {\n this.props.sceneManager.resize(this.props.width, this.props.height);\n }\n\n const children = [];\n this.props.objects.forEach((object, i) => {\n let child = null;\n child = React.createElement(EntityObject, {\n attr: object,\n key: i\n });\n\n child && children.push(child);\n });\n\n return children;\n }\n\n hideToolbar() {\n // console.log(this.props.sceneManager.canvas.getObjects());\n this.props.toggleToolbar(\"hide\");\n }\n\n render() {\n let chidren = this.createChildren();\n return (\n // \n {/* \n \n )\n}\n}\n\nconst mapStateToProps = (state, ownProps) => {\nreturn {\n canvas : state.canvas,\n designState : state.designState,\n designType : state.designType,\n mobile : state.mobile,\n}\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\nreturn {\n configViewport: (payload) => {\n dispatch(configViewport(payload))\n },\n addPhoneCase : (payload) => {\n dispatch(addObject(payload))\n },\n}\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DesignPhone);\n","import React from \"react\";\nimport { connect } from \"react-redux\";\n\nimport { MDBContainer } from \"mdbreact\";\n\nimport \"../design-phone/DesignPhone.css\";\n\n// import ToolBar from \"../components/ToolBar.js\"\nimport ContentPanel from \"../../components/content-panel/ContentPanel\";\nimport DrawingArea from \"../../components/drawing-area/DrawingArea\";\nimport { configViewport } from \"../../redux/drawing-area/drawing-area.actions\";\nimport { addObject } from \"../../redux/object/object.actions\";\n\nclass IDCard extends React.Component {\n state = {\n width: 1486,\n height: 1109,\n top: 0\n };\n\n componentDidMount() {\n const root = document.getElementById(\"root\");\n root.classList.remove(\"padding-for-sidenav\");\n }\n\n componentWillUnmount() {\n const root = document.getElementById(\"root\");\n root.classList.add(\"padding-for-sidenav\");\n }\n\n UNSAFE_componentWillMount(){\n if(!this.props.designState) this.props.history.push('/');\n\n let sideBarWidth = this.props.mobile ? 0 : 60+250;\n let margin = this.props.mobile ? 2 : 100; \n let dW = 1486, dH=1109;\n let w = window.innerWidth - sideBarWidth, h = window.innerHeight-64;\n let ratio = Math.min((w-margin)/dW, (h-margin)/dH);\n let top = this.props.mobile ? 35 : (h- ratio*dH)/2;\n \n // let own = this;\n // window.onresize = ()=>{\n // own.setState({\n // width : ratio*dW,\n // height : ratio*dH,\n // top : top,\n // });\n // } \n\n this.setState({\n width : ratio*dW,\n height : ratio*dH,\n top : top,\n });\n\n this.props.addPhoneCase({\n id : Math.floor(Math.random()*10000)+'_'+ new Date().getTime(),\n kind : \"Phone\",\n type : 'image',\n url : this.props.designType.path,\n // url : './assets/images/IDCard/idcard better.png',\n });\n}\n\nrender (){\n return (\n \n {/* \n \n \n \n \n )\n}\n}\n\nconst mapStateToProps = (state, ownProps) => {\nreturn {\n canvas : state.canvas,\n designState : state.designState,\n designType : state.designType,\n mobile : state.mobile,\n}\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\nreturn {\n configViewport: (payload) => {\n dispatch(configViewport(payload))\n },\n addPhoneCase : (payload) => {\n dispatch(addObject(payload))\n },\n}\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(IDCard);\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport store from \"../../redux/store\";\n\nimport ReactQr from \"react-awesome-qr\";\n\nimport firebase from \"../../utils/firebase/firebase.utils\";\n\nimport MyLogo from \"../../assets/logo5.png\";\n\nexport default {\n generateMultiUserQR: function () {\n var db = firebase.firestore();\n var storageRef = firebase.storage().ref();\n var database = firebase.database();\n\n // const MyCardDirectURL = store.getState().user.currentUser.MyCardDirectURL;\n const userId = store.getState().selectedUser.currentUser.id;\n const shortUrl = store.getState().selectedUser.currentUser.shortUrl;\n\n\n // console.log('eowedwedcewsecdwswcsdcswdcs',userId)\n\n ReactDOM.render(\n 4 ? shortUrl : \"\"\n }\n correctLevel={3}\n size={700}\n dotScale={0.7}\n // MyTapReviewCardURL.length > 4 ? null :\n bgSrc={\n null\n }\n callback={\n (data) =>\n // console.log(data)\n\n db\n .collection(\"users\")\n .doc(`${userId}`)\n .update({\n QrImg: `${data}`\n })\n .then(() => {\n storageRef\n .child(`${userId}, QRCODE.png`)\n .putString(data, \"data_url\");\n })\n .then(() => {\n storageRef\n .child(`${userId}, QRCODE.png`)\n .getDownloadURL()\n .then((url) => {\n database.ref(`designs/ + ${userId}`).update({\n QrImgUrl: url\n })\n });\n })\n\n // storageRef\n // .child(`${this.props.userId}, QRCODE.png`)\n // .putString(data, \"data_url\")\n // .then(function (snapshot) {\n // // alert(\"QR SENT\");\n // })\n }\n />,\n document.getElementById(\"yo\")\n );\n }\n};\n","import store from \"../../redux/store\";\nimport firebase from \"../../utils/firebase/firebase.utils\";\n\nimport RangewaterCardTemplate from \"./imgs/RW3.png\";\n\nexport default {\n renderMultiDirectCardImage: async function () {\n var db = firebase.firestore();\n const QrImg = store.getState().selectedUser.currentUser?.QrImg;\n const reviewCardUploadedLogo = store.getState().selectedUser.currentUser?.reviewCardUploadedLogo;\n const userId = store.getState().selectedUser.currentUser.id;\n\n\n var canvas = document.getElementById(\"canvas1\");\n if (!canvas || !canvas.getContext) {\n return false;\n }\n canvas.width = 2.5*445;\n canvas.height = 2.5*280;\n var ctx = canvas.getContext(\"2d\");\n var img1 = new Image();\n var img2 = new Image();\n var img3 = new Image();\n img1.src = RangewaterCardTemplate;\n img2.src = reviewCardUploadedLogo;\n img3.src = QrImg;\n\n\n await Promise.all([\n new Promise((resolve, reject) => {\n img1.onload = function () {\n ctx.drawImage(img1, 0, 0, 2.5*445, 2.5*280);\n resolve();\n };\n }),\n new Promise((resolve, reject) => {\n img2.onload = function () {\n ctx.drawImage(img2, 2.5*235, 2.5*56, 2.5*172, 2.5*172);\n resolve();\n };\n }),\n new Promise((resolve, reject) => {\n img3.onload = function () {\n ctx.drawImage(img3, 2.5*38, 2.5*53, 2.5*175, 2.5*175);\n resolve();\n };\n })\n ]);\n\n\n \n var fullQuality = canvas.toDataURL();\n\n await db.collection(\"users\")\n .doc(`${userId}`)\n .update({\n reviewCardImage: `${fullQuality}`\n });\n \n\n }\n};\n","import store from \"../../redux/store\";\nimport firebase from \"../../utils/firebase/firebase.utils\";\n\nconst createImage = (url) =>\n new Promise((resolve, reject) => {\n const image = new Image();\n image.addEventListener(\"load\", () => resolve(image));\n image.addEventListener(\"error\", (error) => reject(error));\n image.setAttribute(\"crossOrigin\", \"anonymous\"); // needed to avoid cross-origin issues on CodeSandbox\n image.src = url;\n });\n\nfunction getRadianAngle(degreeValue) {\n return (degreeValue * Math.PI) / 180;\n}\n\n/**\n * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop\n * @param {File} image - Image File url\n * @param {Object} pixelCrop - pixelCrop Object provided by react-easy-crop\n * @param {number} rotation - optional rotation parameter\n */\nexport async function getCroppedImg(imageSrc, pixelCrop, rotation = 0) {\n const image = await createImage(imageSrc);\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n // image.width = image.width / 2;\n // image.height = image.height / 2;\n\n // const safeArea = Math.max(image.width, image.height) * 2\n\n const maxSize = Math.max(image.width, image.height);\n const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));\n\n // set each dimensions to double largest dimension to allow for a safe area for the\n // image to rotate in without being clipped by canvas context\n canvas.width = safeArea;\n canvas.height = safeArea;\n\n // translate canvas context to a central location on image to allow rotating around the center.\n ctx.translate(safeArea / 2, safeArea / 2);\n ctx.rotate(getRadianAngle(rotation));\n ctx.translate(-safeArea / 2, -safeArea / 2);\n\n ctx.fillStyle = \"white\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // draw rotated image and store data.\n ctx.drawImage(\n image,\n safeArea / 2 - image.width * 0.5,\n safeArea / 2 - image.height * 0.5\n );\n const data = ctx.getImageData(0, 0, safeArea, safeArea);\n\n // set canvas width to final desired crop size - this will clear existing context\n canvas.width = pixelCrop.width;\n canvas.height = pixelCrop.height;\n\n // paste generated rotate image with correct offsets for x,y crop values.\n ctx.putImageData(\n data,\n Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),\n Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)\n );\n\n // As Base64 string\n // return canvas.toDataURL('image/jpeg');\n\n const base64Image = canvas.toDataURL(\"image/jpeg\");\n // const baseString = base64Image.substr(base64Image.indexOf(\",\") + 1);\n // localStorage.setItem('customLogo',base64Image)\n\n var userId = store.getState().selectedUser.currentUser.id;\n var db = firebase.firestore();\n db.collection(\"users\")\n .doc(`${userId}`)\n .update({\n reviewCardUploadedLogo: `${base64Image}`,\n })\n .then(function () {\n console.log(\"Document successfully written!\");\n })\n .catch(function (error) {\n console.error(\"Error writing document: \", error);\n });\n\n return base64Image;\n\n // As a blob\n // return new Promise(resolve => {\n // canvas.toBlob(file => {\n // resolve(URL.createObjectURL(file))\n // }, 'image/jpeg')\n // })\n}\n\nexport async function getRotatedImage(imageSrc, rotation = 0) {\n const image = await createImage(imageSrc);\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n const orientationChanged =\n rotation === 90 ||\n rotation === -90 ||\n rotation === 270 ||\n rotation === -270;\n if (orientationChanged) {\n canvas.width = image.height;\n canvas.height = image.width;\n } else {\n canvas.width = image.width;\n canvas.height = image.height;\n }\n\n ctx.translate(canvas.width / 2, canvas.height / 2);\n ctx.rotate((rotation * Math.PI) / 180);\n ctx.drawImage(image, -image.width / 2, -image.height / 2);\n\n return new Promise((resolve) => {\n canvas.toBlob((file) => {\n resolve(URL.createObjectURL(file));\n }, \"image/jpeg\");\n });\n}\n","import React, { useState, useCallback } from \"react\";\nimport Cropper from \"react-easy-crop\";\nimport Slider from \"@material-ui/lab/Slider\";\nimport Button from \"@material-ui/core/Button\";\nimport Typography from \"@material-ui/core/Typography\";\nimport { withStyles } from \"@material-ui/core/styles\";\nimport { getOrientation } from \"get-orientation/browser\";\n// import ImgDialog from \"./ImgDialog\";\nimport { getCroppedImg, getRotatedImage } from \"./canvasUtils\";\nimport { styles } from \"./styles\";\nimport imageCompression from \"browser-image-compression\";\n\n\nconst ORIENTATION_TO_ANGLE = {\n \"3\": 180,\n \"6\": 90,\n \"8\": -90,\n};\n\nconst Demo = ({ classes }) => {\n const [imageSrc, setImageSrc] = React.useState(null);\n const [crop, setCrop] = useState({ x: 0, y: 0 });\n const [rotation, setRotation] = useState(0);\n const [zoom, setZoom] = useState(1);\n const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);\n // eslint-disable-next-line \n const [croppedImage, setCroppedImage] = useState(null);\n\n\n const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {\n setCroppedAreaPixels(croppedAreaPixels);\n }, []);\n\n const showCroppedImage = useCallback(async () => {\n try {\n const croppedImage = await getCroppedImg(\n imageSrc,\n croppedAreaPixels,\n rotation\n );\n console.log(\"donee\", { croppedImage });\n \n \n\n setCroppedImage(croppedImage);\n setImageSrc(null)\n \n\n\n } catch (e) {\n console.error(e);\n }\n\n }, [imageSrc, croppedAreaPixels, rotation]);\n\n // const onClose = useCallback(() => {\n // setCroppedImage(null);\n // }, []);\n\n const onFileChange = async (e) => {\n if (e.target.files && e.target.files.length > 0) {\n const file = e.target.files[0];\n\n // const imageFile = file;\n\n const options = {\n maxSizeMB: 1,\n maxWidthOrHeight: 1920,\n useWebWorker: true,\n };\n try {\n const compressedFile = await imageCompression(file, options);\n\n let imageDataUrl = await readFile(compressedFile);\n\n // apply rotation if needed\n const orientation = await getOrientation(compressedFile);\n const rotation = ORIENTATION_TO_ANGLE[orientation];\n if (rotation) {\n imageDataUrl = await getRotatedImage(imageDataUrl, rotation);\n }\n\n setImageSrc(imageDataUrl);\n } catch (error) {\n console.log(error);\n }\n }\n };\n\n return (\n \n \n \n \n \n \n \n Close\n \n \n \n \n );\n }\n}\n\n\nexport default UploadLogo;\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n MDBMedia,\n MDBCard,\n MDBContainer,\n MDBCardBody,\n MDBCardImage,\n MDBCardTitle,\n MDBCardText,\n MDBTooltip,\n MDBCardFooter,\n MDBBtn,\n MDBLink,\n MDBIcon\n} from \"mdbreact\";\n\nimport { nanoid } from \"nanoid\";\nimport firebase from \"../../utils/firebase/firebase.utils\";\n\nimport { defaultRedirect } from \"../../redux/routing/routing.actions\";\nimport { fetchDesigns } from \"../../redux/designImages/designImages.actions\";\n\nimport API2 from \"../../components/generateQr/generateMultiUserQR\";\nimport API3 from \"../../components/renderDirectCardImage/renderMultiDirectCardImage\";\n\nimport UploadLogo from \"../../components/upload-your-logo-multiUser/uploadLogo\";\nimport { CircularProgress, Box } from \"@material-ui/core\";\n\n// Stripe\nimport { ElementsConsumer } from \"@stripe/react-stripe-js\";\n\n//\n\nimport {\n createSession2,\n createStripeCustomer\n} from \"../../utils/firebase/firebase.utils\";\nimport { updateUser } from \"../../redux/user/user.actions\";\n\nimport Splash from \"../splash/splash\";\nimport \"./RMO.styles.scss\";\n\nimport RW1 from \"./assets/images/IDCard/RW1.png\";\nimport RW2 from \"./assets/images/IDCard/RW2.png\";\n\nclass RangeWaterMultiOrder extends React.Component {\n state = {\n MyTapReviewCardURL: \"\",\n longUrlList: \"\",\n loading: false,\n oldLinkId: \"\"\n };\n\n componentDidMount() {\n // this.props.defaultRedirect();\n // this.props.fetchDesigns();\n // console.log('dddddd',this.props.user.id)\n // console.log('bbbbbb',this.props.currentUser)\n }\n\n // Redirect to fulfillment page when applicable\n // componentDidUpdate() {\n // if (\n // this.props.currentUser &&\n // this.props.currentUser.role === \"fulfillment\"\n // ) {\n // this.props.history.push(\"/fulfillment\");\n // }\n // // this.props.fetchDesigns();\n\n // }\n\n onDirectURLChange = (e) => {\n const { name, value } = e.target;\n this.setState({ [name]: value });\n };\n\n // checkDuplicate() {\n // firebase\n // .firestore()\n // .collection(`users/${this.props.userId}/links`)\n // .get()\n // .then((querySnapshot) => {\n // querySnapshot.forEach((doc) => {\n // // console.log(doc.id, \" => \", doc.data());\n // const longUrlList = doc.data().longURL;\n // console.log(\"referferferferfrerfe\", longUrlList);\n // this.setState({longUrlList:longUrlList})\n // });\n // });\n // }\n\n deleteOldShortUrl() {\n firebase\n .firestore()\n .collection(`users/${this.props.userId}/links`)\n .get()\n .then((querySnapshot) => {\n querySnapshot.forEach((doc) => {\n // console.log(doc.id, \" => \", doc.data());\n const linkDocId = doc.id;\n // console.log(\"this is the idddddd\", linkDocId);\n this.setState({ oldLinkId: linkDocId });\n });\n })\n .then(() => {\n firebase\n .firestore()\n .collection(\"users\")\n .doc(this.props.userId)\n .collection(\"links\")\n .doc(this.state.oldLinkId)\n .delete();\n })\n .then(() => {\n this.createShortLink();\n });\n }\n\n createShortLink() {\n var db = firebase.firestore();\n const link = {\n name: \"relink\",\n longURL:\n this.state.MyTapReviewCardURL.includes(\"http://\") ||\n this.state.MyTapReviewCardURL.includes(\"https://\")\n ? this.state.MyTapReviewCardURL\n : `http://${this.state.MyTapReviewCardURL}`,\n createdAt: firebase.firestore.FieldValue.serverTimestamp(),\n shortCode: nanoid(6),\n totalClicks: 0,\n clickDates: []\n };\n\n db.collection(\"users\")\n .doc(`${this.props.userId}`)\n .collection(\"links\")\n .add(link)\n .then(() => {\n db.collection(\"users\")\n .doc(`${this.props.userId}`)\n .update({\n shortUrl: `https://www.mytap.net/rd/${link.shortCode}`\n });\n });\n }\n\n saveMyTapReviewCardURLToDB(e) {\n var db = firebase.firestore();\n db.collection(\"users\").doc(`${this.props.userId}`).update({\n MyTapReviewCardURL: this.state.MyTapReviewCardURL.toString()\n });\n }\n\n generateAndBuy() {\n API2.generateMultiUserQR();\n\n if (this.props.shortUrl) {\n this.deleteOldShortUrl();\n } else {\n this.createShortLink();\n }\n\n setTimeout(() => {\n API3.renderMultiDirectCardImage();\n }, 250);\n }\n\n render() {\n const { currentUser } = this.props.selectedUser;\n\n if (this.state.loading)\n return (\n \n \n );\n\n return (\n
\n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n // console.log('dddddd',this.props.user.id)\n // console.log('bbbbbb',this.props.currentUser)\n // console.log('selectedUser',state.selectedUser.currentUser?.uid)\n\n return {\n reviewCardUploadedLogo:\n state.selectedUser.currentUser?.reviewCardUploadedLogo,\n MyTapReviewCardURL: state.selectedUser.currentUser?.MyTapReviewCardURL,\n shortUrl: state.selectedUser.currentUser?.shortUrl,\n orderPlaced: state.selectedUser.currentUser?.orderPlaced,\n selectedUser: state.selectedUser,\n userId: state.selectedUser.currentUser?.uid\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n updateUser: (payload) => {\n dispatch(updateUser(payload));\n },\n defaultRedirect: () => {\n dispatch(defaultRedirect());\n },\n fetchDesigns: (payload) => {\n dispatch(fetchDesigns(payload));\n }\n };\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(RangeWaterMultiOrder);\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n MDBMedia,\n MDBCard,\n MDBContainer,\n MDBCardBody,\n MDBCardImage,\n MDBCardTitle,\n MDBCardText,\n MDBTooltip,\n MDBCardFooter,\n MDBBtn,\n MDBLink,\n MDBIcon\n} from \"mdbreact\";\n\nimport { nanoid } from \"nanoid\";\nimport firebase from \"../../utils/firebase/firebase.utils\";\n\nimport { defaultRedirect } from \"../../redux/routing/routing.actions\";\nimport { fetchDesigns } from \"../../redux/designImages/designImages.actions\";\n\nimport API2 from \"../../components/generateQr/generateMultiUserQR\";\nimport API3 from \"../../components/renderDirectCardImage/renderMultiDirectCardImage\";\n\nimport UploadLogo from \"../../components/upload-your-logo-multiUser/uploadLogo\";\nimport { CircularProgress, Box } from \"@material-ui/core\";\n\n// Stripe\nimport { ElementsConsumer } from \"@stripe/react-stripe-js\";\n\n//\n\nimport {\n createSession,\n createStripeCustomer\n} from \"../../utils/firebase/firebase.utils\";\nimport { updateUser } from \"../../redux/user/user.actions\";\n\nimport Splash from \"../splash/splash\";\nimport \"./RMO.styles.scss\";\n\nimport RW1 from \"./assets/images/IDCard/RW1.png\";\nimport RW2 from \"./assets/images/IDCard/RW2.png\";\nimport cardBackPlaceholder from \"./assets/images/IDCard/mytapQr.png\";\nimport CardBack from \"./assets/images/IDCard/card-back copy.png\";\nimport logoPlaceHolder from \"./assets/images/IDCard/logo-Placeholder.jpg\";\n\n\n\nclass RangewaterAdminOrders extends React.Component {\n state = {\n MyTapReviewCardURL: \"\",\n longUrlList: \"\",\n loading: false,\n oldLinkId: \"\",\n saveBtn: \"SAVE\"\n };\n\n componentDidMount() {\n // this.props.defaultRedirect();\n // this.props.fetchDesigns();\n // console.log('dddddd',this.props.user.id)\n // console.log('bbbbbb',this.props.currentUser)\n }\n\n // Redirect to fulfillment page when applicable\n // componentDidUpdate() {\n // if (\n // this.props.currentUser &&\n // this.props.currentUser.role === \"fulfillment\"\n // ) {\n // this.props.history.push(\"/fulfillment\");\n // }\n // // this.props.fetchDesigns();\n\n // }\n\n onDirectURLChange = (e) => {\n const { name, value } = e.target;\n this.setState({ [name]: value });\n };\n\n // checkDuplicate() {\n // firebase\n // .firestore()\n // .collection(`users/${this.props.userId}/links`)\n // .get()\n // .then((querySnapshot) => {\n // querySnapshot.forEach((doc) => {\n // // console.log(doc.id, \" => \", doc.data());\n // const longUrlList = doc.data().longURL;\n // console.log(\"referferferferfrerfe\", longUrlList);\n // this.setState({longUrlList:longUrlList})\n // });\n // });\n // }\n\n deleteOldShortUrl() {\n firebase\n .firestore()\n .collection(`users/${this.props.userId}/links`)\n .get()\n .then((querySnapshot) => {\n querySnapshot.forEach((doc) => {\n // console.log(doc.id, \" => \", doc.data());\n const linkDocId = doc.id;\n // console.log(\"this is the idddddd\", linkDocId);\n this.setState({ oldLinkId: linkDocId });\n });\n })\n .then(() => {\n firebase\n .firestore()\n .collection(\"users\")\n .doc(this.props.userId)\n .collection(\"links\")\n .doc(this.state.oldLinkId)\n .delete();\n })\n .then(() => {\n this.createShortLink();\n });\n }\n\n createShortLink() {\n var db = firebase.firestore();\n const link = {\n name: \"relink\",\n longURL:\n this.state.MyTapReviewCardURL.includes(\"http://\") ||\n this.state.MyTapReviewCardURL.includes(\"https://\")\n ? this.state.MyTapReviewCardURL\n : `http://${this.state.MyTapReviewCardURL}`,\n createdAt: firebase.firestore.FieldValue.serverTimestamp(),\n shortCode: nanoid(6),\n totalClicks: 0,\n clickDates: []\n };\n\n db.collection(\"users\")\n .doc(`${this.props.userId}`)\n .collection(\"links\")\n .add(link)\n .then(() => {\n db.collection(\"users\")\n .doc(`${this.props.userId}`)\n .update({\n shortUrl: `https://www.mytap.net/rd/${link.shortCode}`\n });\n });\n }\n\n async updateShortLink() {\n var db = firebase.firestore();\n const longCode = this.props.shortUrl;\n const shortCode = longCode.substring(longCode.lastIndexOf(\"/\") + 1);\n const linkDoc = await db.collection(\"links\").doc(shortCode).get();\n const { longURL, linkID, userId } = linkDoc.data();\n // console.log(\"yooooooooooo\", linkDoc.data());\n // console.log('yooooooooooo', longURL)\n // console.log(shortCode);\n\n db.collection(\"links\")\n .doc(shortCode)\n .update({\n longURL:\n this.state.MyTapReviewCardURL.includes(\"http://\") ||\n this.state.MyTapReviewCardURL.includes(\"https://\")\n ? this.state.MyTapReviewCardURL\n : `https://${this.state.MyTapReviewCardURL}`\n })\n .then(() => {\n db.collection(\"users\")\n .doc(userId)\n .collection(\"links\")\n .doc(linkID)\n .update({\n longURL:\n this.state.MyTapReviewCardURL.includes(\"http://\") ||\n this.state.MyTapReviewCardURL.includes(\"https://\")\n ? this.state.MyTapReviewCardURL\n : `https://${this.state.MyTapReviewCardURL}`\n });\n });\n }\n\n saveMyTapReviewCardURLToDB(e) {\n var db = firebase.firestore();\n db.collection(\"users\").doc(`${this.props.userId}`).update({\n MyTapReviewCardURL: this.state.MyTapReviewCardURL.toString()\n });\n this.updateShortLink();\n\n this.setState({ saveBtn: \"SAVED!\" });\n setTimeout(() => {\n this.setState({ saveBtn: \"SAVE\" });\n }, 3000);\n }\n\n generateAndBuy() {\n // var db = firebase.firestore();\n // db.collection(\"users\").doc(`${this.props.userId}`).update({\n // orderPlaced: true\n // });\n\n if (!this.props.MyTapReviewCardURL) {\n this.saveMyTapReviewCardURLToDB();\n }\n\n if (this.props.shortUrl) {\n // this.deleteOldShortUrl();\n // console.log(\"link is\", this.props.shortUrl);\n this.updateShortLink();\n } else {\n this.createShortLink();\n }\n setTimeout(() => {\n API2.generateMultiUserQR();\n }, 1000);\n\n setTimeout(() => {\n API3.renderMultiDirectCardImage();\n }, 3000);\n }\n\n render() {\n const { currentUser } = this.props.selectedUser;\n\n if (this.state.loading)\n return (\n \n {/* */}\n this.changePanel(\"image\", e)}\n disabled={!this.props.designState}\n >\n this.changePanel(\"text\", e)}\n disabled={!this.props.designState}\n >\n this.changePanel(\"shape\", e)}\n disabled={!this.props.designState}\n >\n this.changePanel(\"layer\", e)}\n disabled={!this.props.designState}\n >\n
\n Image
\n \n Text
\n \n Shape
\n \n Layer
\n \n Image
\n \n Text
\n \n Shape
\n \n \n \n this.hideToolbar()} style = {{ marginTop : this.props.top+'px', position:'absolute' }} >\n this.hideToolbar()}\n style={{\n top: this.props.top + \"px\",\n width: this.props.width + \"px\",\n height: this.props.height + \"px\"\n }}\n >\n (this.c = c)}\n width={this.props.width}\n height={this.props.height}\n />\n {this.props.sceneManager && chidren}\n
\n );\n }\n}\n\nconst mapStateToProps = function mapStateToProps(state) {\n return {\n designState: state.designState,\n sceneManager: state.sceneManager,\n objects: state.objects,\n activeObject: state.activeObject,\n canvas: state.canvas\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n configViewport: (payload) => {\n dispatch(configViewport(payload));\n },\n zoom: (payload) => {\n zoom(payload);\n },\n pan: (payload) => {\n pan(payload);\n },\n updateObject: (payload) => {\n dispatch(updateObject(payload));\n },\n selectedObject: (payload) => {\n dispatch(selectedObject(payload));\n },\n releasedObject: (payload) => {\n dispatch(releasedObject(payload));\n },\n setManager: (payload) => {\n dispatch(setManager(payload));\n },\n toggleToolbar: (payload) => {\n dispatch(toggleToolbar(payload));\n }\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DrawingArea);\n","import React from \"react\";\nimport { connect } from \"react-redux\";\n\nimport { MDBContainer } from \"mdbreact\";\n\nimport \"./DesignPhone.css\";\n\n// import ToolBar from \"../components/ToolBar.js\"\nimport ContentPanel from \"../../components/content-panel/ContentPanel\";\nimport DrawingArea from \"../../components/drawing-area/DrawingArea\";\nimport { configViewport } from \"../../redux/drawing-area/drawing-area.actions\";\nimport { addObject } from \"../../redux/object/object.actions\";\n\nclass DesignPhone extends React.Component {\n state = {\n width: 800,\n height: 800,\n top: 0\n };\n\n componentDidMount() {\n const root = document.getElementById(\"root\");\n root.classList.remove(\"padding-for-sidenav\");\n }\n\n componentWillUnmount() {\n const root = document.getElementById(\"root\");\n root.classList.add(\"padding-for-sidenav\");\n }\n\n UNSAFE_componentWillMount(){\n if(!this.props.designState) this.props.history.push('/');\n let sideBarWidth = this.props.mobile ? 0 : 60+250;\n // let margin = this.props.mobile ? 100 : 100;\n let w = window.innerWidth - sideBarWidth, h = window.innerHeight-64;\n let size = Math.min(w,h);\n let top = this.props.mobile ? 35 : (h-size)/2;\n\n // window.onresize = ()=>{\n // this.setState({\n // width : size,\n // height : size,\n // top : top,\n // });\n // }\n this.setState({\n width : size, height : size,\n top : top,\n });\n\n this.props.addPhoneCase({\n id : Math.floor(Math.random()*10000)+'_'+ new Date().getTime(),\n kind : \"Phone\",\n type : 'image',\n url : this.props.designType.path,\n name : this.props.designType.name,\n });\n}\n\nrender (){\n return (\n \n {imageSrc ? (\n \n \n ) : (\n \n )}\n
\n );\n};\n\nfunction readFile(file) {\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.addEventListener(\"load\", () => resolve(reader.result), false);\n reader.readAsDataURL(file);\n });\n}\n\nconst StyledDemo = withStyles(styles)(Demo);\n\nexport default StyledDemo;\n","export const styles = theme => ({\n cropContainer: {\n position: 'relative',\n width: '100%',\n height: 200,\n background: 'white',\n [theme.breakpoints.up('sm')]: {\n height: 400,\n },\n },\n cropButton: {\n flexShrink: 0,\n marginLeft: 16,\n },\n controls: {\n padding: 16,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'stretch',\n [theme.breakpoints.up('sm')]: {\n flexDirection: 'row',\n alignItems: 'center',\n },\n },\n sliderContainer: {\n display: 'flex',\n flex: '1',\n alignItems: 'center',\n },\n sliderLabel: {\n [theme.breakpoints.down('xs')]: {\n minWidth: 65,\n },\n },\n slider: {\n padding: '22px 0px',\n marginLeft: 16,\n [theme.breakpoints.up('sm')]: {\n flexDirection: 'row',\n alignItems: 'center',\n margin: '0 16px',\n },\n },\n})\n","import React from \"react\";\n\nimport StyledDemo from \"./index\";\n\nimport {\n MDBContainer,\n MDBIcon,\n MDBBtn,\n MDBModal,\n MDBModalBody,\n MDBModalFooter\n} from \"mdbreact\";\n\n\n\n\n\nclass UploadLogo extends React.Component {\n state = {\n modal: false\n };\n\n toggle = () => {\n this.setState({\n modal: !this.state.modal\n });\n };\n\n render() {\n return (\n \n
\n \n \n Save\n \n
\n {/* \n \n Zoom\n \n setZoom(zoom)}\n />\n
\n \n \n Rotation\n \n setRotation(rotation)}\n />\n
\n \n
\n \n \n \n {!this.props.orderPlaced ? \n \n \n \n \n {this.props.orderPlaced ? null : (\n \n \n \n {({ stripe, elements }) => (\n {\n this.setState({ loading: true });\n e.preventDefault();\n this.generateAndBuy();\n if (!currentUser.stripeCustomerId) {\n return await createStripeCustomer(\n currentUser\n ).then(async () => {\n const session = await createSession2(\n \"MyTap Smart Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n });\n } else {\n const session = await createSession2(\n \"MyTap Smart Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n }}\n >\n {!this.props.orderPlaced ? (\n \n \n ) : null}\n \n )}\n \n \n \n \n \n \n
\n \n \n
\n\n \n \n \n {/*
\n Current: {this.props.MyTapReviewCardURL}
*/}\n$3-5/month
\n )}\n \n \n Order!
\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n // console.log('dddddd',this.props.user.id)\n // console.log('bbbbbb',this.props.currentUser)\n // console.log('selectedUser',state.selectedUser.currentUser?.uid)\n\n return {\n reviewCardUploadedLogo:\n state.selectedUser.currentUser?.reviewCardUploadedLogo,\n MyTapReviewCardURL: state.selectedUser.currentUser?.MyTapReviewCardURL,\n reviewCardImage: state.selectedUser.currentUser?.reviewCardImage,\n QrImg: state.selectedUser.currentUser?.QrImg,\n shortUrl: state.selectedUser.currentUser?.shortUrl,\n orderPlaced: state.selectedUser.currentUser?.orderPlaced,\n selectedUser: state.selectedUser,\n userId: state.selectedUser.currentUser?.uid\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n updateUser: (payload) => {\n dispatch(updateUser(payload));\n },\n defaultRedirect: () => {\n dispatch(defaultRedirect());\n },\n fetchDesigns: (payload) => {\n dispatch(fetchDesigns(payload));\n }\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(RangewaterAdminOrders);\n","import store from \"../../redux/store\";\nimport firebase from \"../../utils/firebase/firebase.utils\";\n\nconst createImage = (url) =>\n new Promise((resolve, reject) => {\n const image = new Image();\n image.addEventListener(\"load\", () => resolve(image));\n image.addEventListener(\"error\", (error) => reject(error));\n image.setAttribute(\"crossOrigin\", \"anonymous\"); // needed to avoid cross-origin issues on CodeSandbox\n image.src = url;\n });\n\nfunction getRadianAngle(degreeValue) {\n return (degreeValue * Math.PI) / 180;\n}\n\n/**\n * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop\n * @param {File} image - Image File url\n * @param {Object} pixelCrop - pixelCrop Object provided by react-easy-crop\n * @param {number} rotation - optional rotation parameter\n */\nexport async function getCroppedImg(imageSrc, pixelCrop, rotation = 0) {\n const image = await createImage(imageSrc);\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n // image.width = image.width / 2;\n // image.height = image.height / 2;\n\n // const safeArea = Math.max(image.width, image.height) * 2\n\n const maxSize = Math.max(image.width, image.height);\n const safeArea = 5 * ((maxSize / 2) * Math.sqrt(2));\n\n // set each dimensions to double largest dimension to allow for a safe area for the\n // image to rotate in without being clipped by canvas context\n canvas.width = safeArea;\n canvas.height = safeArea;\n\n // translate canvas context to a central location on image to allow rotating around the center.\n ctx.translate(safeArea / 2, safeArea / 2);\n ctx.rotate(getRadianAngle(rotation));\n ctx.translate(-safeArea / 2, -safeArea / 2);\n\n ctx.fillStyle = \"white\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // draw rotated image and store data.\n ctx.drawImage(\n image,\n safeArea / 2 - image.width * 0.5,\n safeArea / 2 - image.height * 0.5\n );\n const data = ctx.getImageData(0, 0, safeArea, safeArea);\n\n // set canvas width to final desired crop size - this will clear existing context\n canvas.width = pixelCrop.width;\n canvas.height = pixelCrop.height;\n\n // paste generated rotate image with correct offsets for x,y crop values.\n ctx.putImageData(\n data,\n Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),\n Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)\n );\n\n // As Base64 string\n // return canvas.toDataURL('image/jpeg');\n\n const base64Image = canvas.toDataURL(\"image/jpeg\");\n // const baseString = base64Image.substr(base64Image.indexOf(\",\") + 1);\n // localStorage.setItem('customLogo',base64Image)\n\n var userId = store.getState().selectedUser.currentUser.id;\n var db = firebase.firestore();\n db.collection(\"users\")\n .doc(`${userId}`)\n .update({\n reviewCardUploadedFrontLogo: `${base64Image}`,\n })\n .then(function () {\n console.log(\"Document successfully written!\");\n })\n .catch(function (error) {\n console.error(\"Error writing document: \", error);\n });\n\n return base64Image;\n\n // As a blob\n // return new Promise(resolve => {\n // canvas.toBlob(file => {\n // resolve(URL.createObjectURL(file))\n // }, 'image/jpeg')\n // })\n}\n\nexport async function getRotatedImage(imageSrc, rotation = 0) {\n const image = await createImage(imageSrc);\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n const orientationChanged =\n rotation === 90 ||\n rotation === -90 ||\n rotation === 270 ||\n rotation === -270;\n if (orientationChanged) {\n canvas.width = image.height;\n canvas.height = image.width;\n } else {\n canvas.width = image.width;\n canvas.height = image.height;\n }\n\n ctx.translate(canvas.width / 2, canvas.height / 2);\n ctx.rotate((rotation * Math.PI) / 180);\n ctx.drawImage(image, -image.width / 2, -image.height / 2);\n\n return new Promise((resolve) => {\n canvas.toBlob((file) => {\n resolve(URL.createObjectURL(file));\n }, \"image/jpeg\");\n });\n}\n","import React, { useState, useCallback } from \"react\";\nimport Cropper from \"react-easy-crop\";\nimport Slider from \"@material-ui/lab/Slider\";\nimport Button from \"@material-ui/core/Button\";\nimport Typography from \"@material-ui/core/Typography\";\nimport { withStyles } from \"@material-ui/core/styles\";\nimport { getOrientation } from \"get-orientation/browser\";\n// import ImgDialog from \"./ImgDialog\";\nimport { getCroppedImg, getRotatedImage } from \"./canvasUtils\";\nimport { styles } from \"./styles\";\nimport imageCompression from \"browser-image-compression\";\n\n\nconst ORIENTATION_TO_ANGLE = {\n \"3\": 180,\n \"6\": 90,\n \"8\": -90,\n};\n\nconst Demo = ({ classes }) => {\n const [imageSrc, setImageSrc] = React.useState(null);\n const [crop, setCrop] = useState({ x: 0, y: 0 });\n const [rotation, setRotation] = useState(0);\n const [zoom, setZoom] = useState(1);\n const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);\n // eslint-disable-next-line \n const [croppedImage, setCroppedImage] = useState(null);\n\n\n const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {\n setCroppedAreaPixels(croppedAreaPixels);\n }, []);\n\n const showCroppedImage = useCallback(async () => {\n try {\n const croppedImage = await getCroppedImg(\n imageSrc,\n croppedAreaPixels,\n rotation\n );\n console.log(\"donee\", { croppedImage });\n \n \n\n setCroppedImage(croppedImage);\n setImageSrc(null)\n \n\n\n } catch (e) {\n console.error(e);\n }\n\n }, [imageSrc, croppedAreaPixels, rotation]);\n\n // const onClose = useCallback(() => {\n // setCroppedImage(null);\n // }, []);\n\n const onFileChange = async (e) => {\n if (e.target.files && e.target.files.length > 0) {\n const file = e.target.files[0];\n\n // const imageFile = file;\n\n const options = {\n maxSizeMB: 1,\n maxWidthOrHeight: 1920,\n useWebWorker: true,\n };\n try {\n const compressedFile = await imageCompression(file, options);\n\n let imageDataUrl = await readFile(compressedFile);\n\n // apply rotation if needed\n const orientation = await getOrientation(compressedFile);\n const rotation = ORIENTATION_TO_ANGLE[orientation];\n if (rotation) {\n imageDataUrl = await getRotatedImage(imageDataUrl, rotation);\n }\n\n setImageSrc(imageDataUrl);\n } catch (error) {\n console.log(error);\n }\n }\n };\n\n return (\n \n
\n \n \n\n \n \n {!this.props.orderPlaced ? \n \n \n \n \n \n \n \n {({ stripe, elements }) => (\n {\n this.setState({ loading: true });\n e.preventDefault();\n this.generateAndBuy();\n if (!currentUser.stripeCustomerId) {\n return await createStripeCustomer(\n currentUser\n ).then(async () => {\n const session = await createSession(\n \"MyTap Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n });\n } else {\n const session = await createSession(\n \"MyTap Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n }}\n >\n \n \n\n {/* {!this.props.orderPlaced ? (\n \n \n \n \n \n
\n \n \n \n\n {this.props.orderPlaced ? (\n \n {this.state.saveBtn}\n \n ) : null}\n\n {this.props.orderPlaced ? this.props.shortUrl : null}\n {/*
\n Current: {this.props.MyTapReviewCardURL}
*/}\n$35
\n \n \n Order!
\n \n {imageSrc ? (\n \n \n ) : (\n \n )}\n
\n );\n};\n\nfunction readFile(file) {\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.addEventListener(\"load\", () => resolve(reader.result), false);\n reader.readAsDataURL(file);\n });\n}\n\nconst StyledDemo = withStyles(styles)(Demo);\n\nexport default StyledDemo;\n","export const styles = theme => ({\n cropContainer: {\n position: 'relative',\n width: '100%',\n height: 200,\n background: 'white',\n [theme.breakpoints.up('sm')]: {\n height: 400,\n },\n },\n cropButton: {\n flexShrink: 0,\n marginLeft: 16,\n },\n controls: {\n padding: 16,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'stretch',\n [theme.breakpoints.up('sm')]: {\n flexDirection: 'row',\n alignItems: 'center',\n },\n },\n sliderContainer: {\n display: 'flex',\n flex: '1',\n alignItems: 'center',\n },\n sliderLabel: {\n [theme.breakpoints.down('xs')]: {\n minWidth: 65,\n },\n },\n slider: {\n padding: '22px 0px',\n marginLeft: 16,\n [theme.breakpoints.up('sm')]: {\n flexDirection: 'row',\n alignItems: 'center',\n margin: '0 16px',\n },\n },\n})\n","import React from \"react\";\n\nimport StyledDemo from \"./index\";\n\nimport {\n MDBContainer,\n MDBIcon,\n MDBBtn,\n MDBModal,\n MDBModalBody,\n MDBModalFooter\n} from \"mdbreact\";\n\n\n\n\n\nclass UploadLogo extends React.Component {\n state = {\n modal: false\n };\n\n toggle = () => {\n this.setState({\n modal: !this.state.modal\n });\n };\n\n render() {\n return (\n \n
\n \n \n Save\n \n
\n {/* \n \n Zoom\n \n setZoom(zoom)}\n />\n
\n \n \n Rotation\n \n setRotation(rotation)}\n />\n
\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n // console.log('dddddd',this.props.user.id)\n // console.log('bbbbbb',this.props.currentUser)\n // console.log('selectedUser',state.selectedUser.currentUser?.uid)\n\n return {\n reviewCardUploadedLogo:\n state.selectedUser.currentUser?.reviewCardUploadedLogo,\n reviewCardUploadedFrontLogo:state.selectedUser.currentUser?.reviewCardUploadedFrontLogo,\n MyTapReviewCardURL: state.selectedUser.currentUser?.MyTapReviewCardURL,\n reviewCardImage: state.selectedUser.currentUser?.reviewCardImage,\n QrImg: state.selectedUser.currentUser?.QrImg,\n shortUrl: state.selectedUser.currentUser?.shortUrl,\n orderPlaced: state.selectedUser.currentUser?.orderPlaced,\n selectedUser: state.selectedUser,\n userId: state.selectedUser.currentUser?.uid\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n updateUser: (payload) => {\n dispatch(updateUser(payload));\n },\n defaultRedirect: () => {\n dispatch(defaultRedirect());\n },\n fetchDesigns: (payload) => {\n dispatch(fetchDesigns(payload));\n }\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SugarcoatAdminOrders);\n","import React, { useEffect, useState, useRef } from 'react'\nimport { connect,useDispatch } from \"react-redux\";\nimport { setSelectedUser } from \"../../redux/selectedUser/selectedUser.actions\";\nimport { useParams } from \"react-router-dom\"\nimport firebase from \"../../utils/firebase/firebase.utils\"\nimport RangeWaterMultiOrder from '../rangewater-multiOrder/rangewaterMultiOrder'\nimport RangewaterAdminOrders from '../rangewater-admin-orders/rangewaterAdminOrders'\nimport SugarcoatAdminOrders from '../sugarcoat-admin-orders/sugarcoatAdminOrders'\nimport { withRouter } from \"react-router-dom\";\nimport { fetchDesigns } from \"../../redux/designImages/designImages.actions\";\n\nfunction EditEnterpriseUserPage({ explicitUser, ...props }) {\n // console.log(\"EEUP: props: \" + JSON.stringify(explicitUser))\n const { id: userId } = useParams()\n const [user, setUser] = useState(explicitUser)\n const dispatch = useDispatch()\n\n\n let isRendered = useRef(false);\n\n useEffect(() => {\n // console.log(\"EEUP#useEffect\")\n\n isRendered = true;\n firebase.firestore()\n .collection('users')\n .doc(explicitUser?.id || userId).get().then(user => {\n if (isRendered) {\n // console.log(\"EEUP#setUser\",explicitUser)\n setUser({ ...user.data(), id: user.id })\n dispatch(setSelectedUser(explicitUser))\n }\n return null\n }).catch(err => console.log(err));\n return () => {\n isRendered = false;\n }\n }, [userId, explicitUser])\n\n const augmentedProps = { fetchDesigns, user, ...props }\n const FormPageWithRouter = withRouter(RangewaterAdminOrders)\n // console.log(user)\n\n\n return (\n // \n
\n \n \n\n \n \n\n\n \n\n\n \n\n\n \n \n\n\n \n \n {!this.props.orderPlaced ? \n this.state.selectedIndex === 1? \n \n \n \n \n \n \n \n {({ stripe, elements }) => (\n {\n this.setState({ loading: true });\n e.preventDefault();\n this.generateAndBuy();\n if (!currentUser.stripeCustomerId) {\n return await createStripeCustomer(\n currentUser\n ).then(async () => {\n const session = await createSession(\n \"ReviewCard\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n });\n } else {\n const session = await createSession(\n \"ReviewCard\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n }}\n >\n \n \n\n {/* {!this.props.orderPlaced ? (\n \n \n \n \n \n
\n \n \n \n\n {this.props.orderPlaced ? (\n \n {this.state.saveBtn}\n \n ) : null}\n\n {this.props.orderPlaced ? this.props.shortUrl : null}\n {/*
\n Current: {this.props.MyTapReviewCardURL}
*/}\n$50
\n \n \n Must provide both logos and link!
: Order!
\n }\n \n \n // { user &&
\n // Please wait...
}\n //\n \n \n {totalClicks} \n \n Total Clicks \n \n
\n\n \n
\n \n {props.user.displayName\n ? props.user.displayName\n : `${props.user.formData?.firstName}`}\n
\n {/* {props.user.email}
*/}\n {/* \n {props.user.group ? props.user.group : \"\"}\n
*/}\n \n \n \n
\n \n \n \n \n \n {\n addToGroup(null);\n }}\n >\n Unassign\n
\n \n {props.user.orderPlaced ? \"View\" : \"Order\"}\n
\n \n Delete\n
\n\n - \n {props.groups\n .map((group) => (\n
\n {assignedGroupMembers &&\n assignedGroupMembers.map((user) => {\n return (\n
\n );\n };\n const deleteGroupFromDb = (group) => {\n console.log(\"removing group\", group);\n\n firebase\n .firestore()\n .collection(\"users\")\n .where(\"group\", \"==\", group)\n .onSnapshot((snapshot) => {\n snapshot.docs.map((user) => {\n console.log(\"User is \", user.data());\n firebase\n .firestore()\n .collection(\"users\")\n .doc(user.data().uid)\n .update({ group: firebase.firestore.FieldValue.delete() });\n });\n });\n\n firebase\n .firestore()\n .collection(\"users\")\n .doc(`${currentUser.id}`)\n .update({\n groups: firebase.firestore.FieldValue.arrayRemove(group)\n });\n };\n const removeGroup = (group) => {\n let confirmRemoveGroup = window.confirm(\n \"Are you sure you want to delete this group?\"\n );\n confirmRemoveGroup === true\n ? deleteGroupFromDb(group)\n : console.log(\"user canceled\");\n };\n\n const addGroupToUser = () => {\n // updates user doc add group key and assign string\n };\n //Fetch all current users where formData company = admin formData company, display in table, develop UI to allow admin to assign.\n //add button so admin can add user\n return (\n Fetching...
}\nI'm the salesman page
;\n};\n\nexport default Sales;\n","import React, { useState, useEffect } from \"react\";\nimport { getSalesAdminData, getSalesAdminPromoCodes, getStripePaymentIntentData } from \"../../utils/firebase/firebase.utils\";\nimport { connect } from \"react-redux\";\nimport { createStructuredSelector } from \"reselect\";\n\nimport { setCurrentUser } from \"../../redux/user/user.actions\";\nimport { selectCurrentUser } from \"../../redux/user/user.selectors\";\n\n\nimport {\n MDBInput,\n MDBIcon\n } from \"mdbreact\";\n\nimport CustomButton from \"../../components/custom-button/customButton\";\n\n\nimport {\n createNewPromoCode\n} from \"../../utils/firebase/firebase.utils\";\n\nimport firebase from \"firebase/app\";\n\nconst SalesAdmin = ({currentUser}) => {\n console.log(\"Calling functional component\")\n \n const [salesAdminData, setSalesAdminData] = useState([]);\n const [stripePromoCodes, setStripePromoCodes] = useState([]);\n const [redemptionsPerProductPerCode, setRedemptionsPerProductPerCode] = useState({})\n\n const [newPromoCode, setNewPromoCode] = useState(\"\");\n \n useEffect(() => {\n // console.log(\"useEffect! (did current user change?: \" + JSON.stringify(currentUser))\n saleAdminInit();\n getStripePromoCodes();\n }, [currentUser]);\n \n useEffect(() => {\n console.log(\"useEffect! (did stripe promo codes change?: \" + JSON.stringify(stripePromoCodes.length))\n getRedemptions()\n }, [stripePromoCodes])\n\n \n const getRedemptions = async () => {\n if(!stripePromoCodes.length) return\n\n const temporaryStructure = {}\n\n const promises = stripePromoCodes.map(promoCode => {\n //ToDo : query by all promo code ids\n return firebase.database().ref('orders').orderByChild('promo').equalTo(promoCode.id).once(\"value\" , snapshot => {\n const orders = snapshot.val()\n let parsedOrders;\n\n if (orders) { \n parsedOrders = Object.values(orders)\n parsedOrders.forEach(function(doc) {\n let orderData = doc\n if (!temporaryStructure[orderData.item]) {\n temporaryStructure[orderData.item] = {}\n }\n const name = stripePromoCodes.find(x => x.id === orderData.promo).code\n const parentCode = stripePromoCodes.find(x => x.id === orderData.promo).coupon.id\n\n temporaryStructure[orderData.item][name] = (temporaryStructure[orderData.item][name] || 0) + 1\n temporaryStructure[orderData.item][parentCode] = (temporaryStructure[orderData.item][parentCode] || 0) + 1\n })\n }\n })\n \n // let db = firebase.firestore()\n // return db.collection(\"orders\").where(\"promo\", \"==\", promoCode.id)\n // .get()\n // .then(function(querySnapshot) {\n // querySnapshot.forEach(function(doc) {\n // let orderData = doc.data()\n // if (!temporaryStructure[orderData.item]) {\n // temporaryStructure[orderData.item] = {}\n // }\n // const name = stripePromoCodes.find(x => x.id === orderData.promo).code\n // const parentCode = stripePromoCodes.find(x => x.id === orderData.promo).coupon.id\n\n // temporaryStructure[orderData.item][name] = (temporaryStructure[orderData.item][name] || 0) + 1\n // temporaryStructure[orderData.item][parentCode] = (temporaryStructure[orderData.item][parentCode] || 0) + 1\n // console.log(\"state of tempStructure\", temporaryStructure)\n\n\n // });\n // })\n // .catch(function(error) {\n // console.log(\"Error getting documents: \", error);\n // })\n })\n await Promise.all(promises)\n \n setRedemptionsPerProductPerCode(temporaryStructure)\n console.log(\"We've got state\", temporaryStructure)\n }\n\n const saleAdminInit = async () => {\n console.log(\"Loading data\")\n await getSalesAdminData().then((response) => { \n //debugger\n let stuff = response.data.data.filter(coupon => currentUser.coupons && currentUser.coupons.indexOf(coupon.id) > -1);\n setSalesAdminData(stuff);\n })\n }\n const getStripePromoCodes = async () => {\n await getSalesAdminPromoCodes().then((response) => {\n const values = response.data.data.filter(promo => currentUser.coupons && currentUser.coupons.indexOf(promo.coupon.id) > -1)\n // if (salesAdminData.length && !values.length) { debugger}\n setStripePromoCodes(values);\n //getStripePromoCodeData(response.data.data.filter(promo => currentUser.coupons && currentUser.coupons.indexOf(promo.coupon.id) > -1));\n })\n }\n // function call to stripe to get current coupons object\n // reduce coupon number of redemptions\n // take current redemptions to display dollar amount\n /* Card = $40 - $8 20%\n Discount = $32\n Sales Rep = $3.20 10%\n Travis Admin = $.064 2% of $3.20\n\n Case = $60 - $12 %20\n Discount = $48 \n Sales Rep = $4.80 10% commission\n Admin = .097 2% of $4.80\n */\n // console.log(\"sales data\", data)\n const onSubmit = async (e) => {\n e.preventDefault();\n let newCodePayload ={\n code: newPromoCode,\n coupon: salesAdminData[0].id,\n }\n console.log('click event', newCodePayload)\n try {\n await createNewPromoCode(newCodePayload)\n getStripePromoCodes()\n setNewPromoCode(\"\")\n } catch (e) {\n alert(`An error occurred creating the promo code: ${JSON.stringify(e)}`)\n }\n }\n \n return \n \n \n
\n \n \n
\n\n
;\n};\n\nconst mapStateToProps = createStructuredSelector({\n currentUser: selectCurrentUser,\n});\nconst mapDispatchToProps = (dispatch) => ({\n setCurrentUser: (user) => {\n return dispatch(setCurrentUser(user))\n }\n});\n\nconst NoUserCouponsNoRender = function ({currentUser}) {\n\n if (currentUser && currentUser.coupons) {\n return Sales Admin
\n {currentUser.displayName}\n\nAdmin data
\n| \n Sales Manager Code\n | \n\n Card Redemptions\n | \n\n Card Earnings\n | \n \n\n Case Redemptions\n | \n\n Case Earnings\n | \n\n Total Redemptions\n | \n\n Total Earnings\n | \n
|---|---|---|---|---|---|---|
| \n {salesManager.id}\n | \n\n {redemptionsPerProductPerCode['MyCard']?.[salesManager.id] || 0}\n | \n\n $ {((redemptionsPerProductPerCode['MyCard']?.[salesManager.id] || 0) * .064 ).toFixed(2)}\n | \n\n {redemptionsPerProductPerCode['MyCase']?.[salesManager.id] || 0}\n | \n\n $ {((redemptionsPerProductPerCode['MyCase']?.[salesManager.id] || 0) * .097).toFixed(2)}\n | \n\n {(redemptionsPerProductPerCode['MyCase']?.[salesManager.id] || 0) + (redemptionsPerProductPerCode['MyCard']?.[salesManager.id] || 0)}\n | \n\n $ {(((redemptionsPerProductPerCode['MyCase']?.[salesManager.id] || 0) * .097) + ((redemptionsPerProductPerCode['MyCard']?.[salesManager.id] || 0) * .064 )).toFixed(2)}\n | \n
Promo Codes
\n\n onSubmit(e)}>\n \n \n
\n \n \n \n
\n \n | \n Promo Code / Sales Person\n | \n\n Card Redemptions\n | \n\n Card Earnings\n | \n \n\n Case Redemptions\n | \n\n Case Earnings\n | \n\n Total Redemptions\n | \n\n Total Earnings\n | \n
|---|---|---|---|---|---|---|
| \n {code.code}\n | \n\n {redemptionsPerProductPerCode['MyCard']?.[code.code] || 0}\n | \n\n $ {((redemptionsPerProductPerCode['MyCard']?.[code.code] || 0) * 3.20).toFixed(2)}\n | \n\n {redemptionsPerProductPerCode['MyCase']?.[code.code] || 0}\n | \n\n $ {((redemptionsPerProductPerCode['MyCase']?.[code.code] || 0 ) * 4.80).toFixed(2) || 0}\n | \n\n {(redemptionsPerProductPerCode['MyCase']?.[code.code] || 0 ) + (redemptionsPerProductPerCode['MyCard']?.[code.code] || 0)}\n | \n\n $ {(((redemptionsPerProductPerCode['MyCase']?.[code.code] || 0) * 4.80) + ((redemptionsPerProductPerCode['MyCard']?.[code.code] || 0) * 3.20)).toFixed(2)}\n | \n
I'm the admin page
;\n};\n\nexport default Admin;\n","import React from \"react\";\nimport axios from \"axios\";\nimport {\n MDBRow,\n MDBCol,\n MDBCard,\n MDBCardBody,\n MDBIcon,\n MDBBtn,\n MDBInput,\n} from \"mdbreact\";\n\n\nclass ContactUs extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: \"\",\n email: \"\",\n phone: \"\",\n company: \"\",\n message: \"\",\n };\n }\n\n onChange = (e) => {\n const { name, value } = e.target;\n this.setState({ [name]: value });\n };\n\n\n handleSubmit(e){\n e.preventDefault();\n\n // SendMail(this.state)\n\n axios({\n method: \"POST\", \n url:\"https://us-central1-mytap-2d6fa.cloudfunctions.net/sendMail?dest=sales@mytap.net\", \n data: this.state\n }).then((response)=>{\n if (response.data === 'Sended'){\n alert(\"Message Sent.\"); \n this.resetForm()\n }else {\n alert(\"Message failed to send.\")\n }\n })\n }\n\n resetForm() {\n this.setState({\n name: \"\",\n email: \"\",\n phone: \"\",\n company: \"\",\n message: \"\",\n });\n }\n\n render() {\n return (\n \n
\n );\n};\n\nexport default DeviceCompatibility;\n","import firebase from \"../../utils/firebase/firebase.utils\";\n\nexport const fetchOrders = () => async (dispatch) => {\n await firebase.database().ref('orders').once('value', snapshot => {\n const orders = snapshot.val()\n const parsedOrders = Object.values(orders)\n\n dispatch({\n type: \"FETCH_ORDERS\",\n payload: parsedOrders\n });\n});\n};\n\n\n// export const fetchOrders = () => async (dispatch) => {\n// var query = await firebase.database().ref(\"orders\").orderByKey()\n// query.once(\"value\")\n// .then(function (snapshot) {\n// snapshot.forEach(function (childSnapshot) {\n\n// var orders = childSnapshot.val();\n\n// // var childData = childSnapshot.val();\n// dispatch({\n// type: \"FETCH_ORDERS\",\n// payload: orders\n// });\n// return true;\n// });\n// });\n\n// };\n\n// import firebase from \"../../utils/firebase/firebase.utils\";\n\n// export const fetchOrders = () => async (dispatch) => {\n// const snapshot = await firebase.firestore().collection(\"orders\").get();\n\n// dispatch({\n// type: \"FETCH_ORDERS\",\n// payload: snapshot.docs.map((doc) => doc.data())\n// });\n// };\n","import React from \"react\";\nimport firebase from \"../../utils/firebase/firebase.utils\";\nimport { connect } from \"react-redux\";\n\nimport axios from \"axios\";\nimport { copyImageToClipboard } from 'copy-image-clipboard'\n\nimport { fetchOrders } from \"../../redux/fulfillment/fulfillment.actions\";\n\nimport \"./Fulfillment.styles.scss\";\n\nimport Gallary from \"./assets/GalleryMyTapCardLogo.png\"\nimport RW from \"./assets/RW1.png\"\nimport Five from \"./assets/fivestar.png\"\n\n\n\nclass Fulfillment extends React.Component {\n state = {\n allOrders: []\n };\n\n componentDidMount() {\n this.props.fetchOrders();\n }\n componentDidUpdate() {\n // this.props.fetchOrders();\n }\n // checkOrder(order) {\n // this.props.fetchOrders();\n // var database = firebase.database();\n // database\n // .ref(`orders/ + ${order.stripeCheckoutSessionId}/fulfilled`)\n // .once(\"value\", async (snapshot) => {\n // console.log(\"thisshiitttt\", snapshot.val());\n // return await snapshot.val();\n // });\n // }\n\n renderUnfulfilledOrders() {\n var database = firebase.database();\n return this.props.orders\n .filter((order) => !order.fulfilled)\n .map((order) => {\n return (\n MyTap Compatible Devices
\n\n Check the list below to see if your device is compatible with MyTap's\n NFC technology! If not, don't worry -- all phones can read our QR codes.\n
\n\n
\n \n
\n \n
\n Apple (iPhone)
\n- \n
- iPhone 11 Pro Max \n
- iPhone 11 Pro \n
- iPhone 11 \n
- iPhone XS Max \n
- iPhone XS \n
- iPhone XR \n
- iPhone SE (2020) \n
- iPhone X (with IOS 14) \n
- iPhone 8 (with IOS 14) \n
- iPhone 7 (with IOS 14) \n
\n
\n Samsung Galaxy S
\n- \n
- Galaxy S20, S20+, S20 Ultra \n
- Galaxy S10, S10+, S10e \n
- Galaxy S9, S9+ \n
- Galaxy S8, S8+ \n
- Galaxy S7, S7 Edge \n
- Galaxy S6, S6 Edge \n
- Galaxy S5, S5 Mini, S5 Neo \n
\n
\n Samsung Galaxy Note
\n- \n
- Note 10, Note 10+, Note 10+ 5G \n
- Note 9 \n
- Note 8 \n
\n
\n HTC
\n\n Most HTC phones between 2015-2019 will be compatible\n
\n- \n
- U19e, U12+, U12 Life \n
- Desire 12, Desire 12s (2017 model not compatible) \n
- U11, Life, + \n
- Exodus 1 \n
\n
\n \n Google
\n
\n - \n
- Pixel 4 \n
- Pixel 4 XL \n
- Pixel 3 \n
- Pixel 3 XL \n
- Pixel 3a \n
- Pixel 3a XL \n
- Pixel 2 \n
- Pixel 2 XL \n
- Pixel \n
- Pixel XL \n
- Nexus 5X \n
- Nexus 6P \n
- Nexus 6 \n
\n
\n Huawei
\n- \n
- P30, P30 Pro, P30 Lite \n
- P20, P20 Pro, P20 Lite \n
- P10, P10 Plus, P10 Lite \n
\n
\n OnePlus
\n- \n
- 7, 7 Pro, 7 Pro 5G \n
- 6, 6T \n
- 5, 5T \n
- 3, 3T \n
- One \n
\n
\n \n
\n Samsung Galaxy A
\n- \n
- 2019 models: A20e, A40, A50, A70 \n
- 2018 models: A6, A7, A8, A9 \n
- 2017 models: A3, A5 \n
- 2016 models: A3, A5 \n
\n
\n Samsung Galaxy J
\n- \n
- 2018 models: J4+, J6, J5, J3 \n
\n
\n LG
\n- \n
- Q9 \n
- One \n
- G8, G8s ThinQ \n
- G7, G7 ThinQ \n
- V50, V40 \n
- V30, V35 \n
\n \n database\n .ref(`orders/ + ${order.stripeCheckoutSessionId}/fulfilled`)\n .once(\"value\", async (snapshot) => {\n console.log(\"thisshiitttt\", snapshot.val());\n // return await snapshot.val();\n if (snapshot.val() !== \"In-Process\") {\n database\n .ref(`orders/ + ${order.stripeCheckoutSessionId}`)\n .update({\n fulfilled: \"In-Process\",\n fulfilledBy: `${this.props.currentUser} is making the order`\n })\n .then(() => {\n this.props.fetchOrders();\n });\n } else {\n this.props.fetchOrders();\n }\n })\n\n // {\n // if(this.checkOrder(order) !== \"In-Process\" ){\n // database\n // .ref(`orders/ + ${order.stripeCheckoutSessionId}`)\n // .update({\n // fulfilled: \"In-Process\",\n // fulfilledBy: `${this.props.currentUser} is making the order`\n // })\n // .then(() => {\n // this.props.fetchOrders();\n // })\n // }\n // }\n\n // order.fulfilled === \"In-Process\"\n // ? null\n // : database\n // .ref(`orders/ + ${order.stripeCheckoutSessionId}`)\n // .update({\n // fulfilled: \"In-Process\",\n // fulfilledBy: `${this.props.currentUser} is making the order`\n // })\n // .then(() => {\n // this.props.fetchOrders();\n // })\n }\n >\n MAKE ORDER\n \n\n
\n );\n });\n }\n\n renderInProcessOrders() {\n var database = firebase.database();\n return this.props.orders\n .filter(\n (order) =>\n order.fulfilled === \"In-Process\" &&\n order.fulfilledBy === `${this.props.currentUser} is making the order`\n )\n .map((order) => {\n const date = new Date(order.createdAt).toLocaleString();\n return (\n \n Product: {order.item} \n Quantity: {order.quantity} \n {/* {order.card.length > 10 ? (\n \n ) : null}\n {order.phone.length > 10 ? (\n \n ) : null}\n {order.QrImg.length > 10 ? (\n \n ) : null} */}\n
\n\n \n
\n\n {/* {order.cardUrl ? (\n {order.recipientName}
\n{order.shippingAddress.line1}
\n{order.shippingAddress.line2}
\n{`${order.shippingAddress.city}, ${order.shippingAddress.state} ${order.shippingAddress.postal_code}`}
\n{order.shippingAddress.country}
\n{order.cardUrl}
\n ) : null} */}\n\n\n \n Order ID: {order.stripeCheckoutSessionId}\n \n UID: {order.uid} \n \n Customer Email: {order.customerEmail}\n \n
\n \n \n database\n .ref(`orders/ + ${order.stripeCheckoutSessionId}`)\n .update({\n fulfilled: false,\n fulfilledBy: \"\"\n })\n .then(() => {\n this.props.fetchOrders();\n })\n }\n >\n UNPROCESS ORDER\n \n \n database\n .ref(`orders/ + ${order.stripeCheckoutSessionId}`)\n .update({\n fulfilled: true,\n fulfilledBy: this.props.currentUser\n })\n .then(() => {\n this.props.fetchOrders();\n axios({\n method: \"POST\",\n url: `https://us-central1-mytap-2d6fa.cloudfunctions.net/sendStatusMail?dest=${order.customerEmail}`,\n data: {\n customerName: order.recipientName,\n customerEmail: order.customerEmail,\n message:\n `TRACKING INFO HERE:\n ${order.trackerCode}\n \n `,\n customerAddress: ` \n
\n );\n });\n }\n \n\n renderfulfilledOrders() {\n return this.props.orders\n .filter((order) => order.fulfilled === true && order.createdAt )\n .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))\n .map((order) => {\n // const db = firebase.firestore();\n const date = new Date(order.createdAt).toLocaleString();\n return (\n \n\n {order.item.includes(\"Review\") ? (\n {copyImageToClipboard(order.reviewCardImage)}}\n src={`${order.reviewCardImage}`}\n alt=\"Back\"\n style={{ width: \"100px\" }}\n >\n ): null}\n\n {order.item.includes(\"Review\") &&\n order.customerEmail !== 'marmenta@galleryresidential.com' &&\n order.customerEmail !== 'thaughton@liverangewater.com'\n ? \n {copyImageToClipboard(Five)}}\n src={`${Five}`}\n alt=\"front\"\n style={{ width: \"100px\" }}\n >\n : null}\n\n {order.customerEmail === 'marmenta@galleryresidential.com' ? (\n {copyImageToClipboard(Gallary)}}\n src={`${Gallary}`}\n alt=\"front\"\n style={{ width: \"100px\" }}\n >\n ) : order.customerEmail === 'thaughton@liverangewater.com' ?\n {copyImageToClipboard(RW)}}\n src={`${RW}`}\n alt=\"front\"\n style={{ width: \"100px\" }}\n >\n : null}\n\n {order.item.includes(\"Review\") && order.reviewCardUploadedFrontLogo && order.reviewCardUploadedFrontLogo.length > 10 ? (\n {copyImageToClipboard(order.reviewCardUploadedFrontLogo)}}\n src={`${order.reviewCardUploadedFrontLogo}`}\n alt=\"Front\"\n style={{ width: \"100px\" }}\n >\n ) : null}\n\n {!order.item.includes(\"Classic\") && order.card && order.card.length > 10 ? (\n {copyImageToClipboard(order.card)}}\n src={`${order.card}`}\n alt=\"\"\n style={{ width: \"100px\" }}\n >\n ) : null}\n\n {order.phone && order.phone.length > 10 ? (\n \n ) : null}\n {/* {order.QrImg && order.QrImg.length > 10 ? (\n \n ) : null} */}\n\n {order.item.includes(\"+ QR\") &&\n order.customQrImg &&\n order.customQrImg.length > 10 ? (\n {copyImageToClipboard(order.customQrImg)}}\n src={`${order.customQrImg}`}\n alt=\"\"\n style={{ width: \"100px\" }}\n >) \n : order.item.includes(\"Review\") && order.customGoogleQrImg && order.customGoogleQrImg.length > 10 ?\n {copyImageToClipboard(order.customGoogleQrImg)}}\n src={`${order.customGoogleQrImg}`}\n alt=\"\"\n style={{ width: \"100px\" }}\n >\n : order.item.includes(\"Review\") && order.GoogleQrImg && order.GoogleQrImg.length > 10 ?\n {copyImageToClipboard(order.GoogleQrImg)}}\n src={`${order.GoogleQrImg}`}\n alt=\"\"\n style={{ width: \"100px\" }}\n > \n : order.QrImg && order.QrImg.length > 10 ? (\n {copyImageToClipboard(order.QrImg)}}\n src={`${order.QrImg}`}\n alt=\"\"\n style={{ width: \"100px\" }}\n >\n ) : null}\n
\n \n
\n {/* {order.cardUrl ? (\n {order.recipientName}
\n{order.shippingAddress.line1}
\n{order.shippingAddress.line2}
\n{`${order.shippingAddress.city}, ${order.shippingAddress.state} ${order.shippingAddress.postal_code}`}
\n{order.shippingAddress.country}
\n{order.cardUrl}
\n ) : null} */}\n MyTapReviewCardURL:\n {order.MyTapReviewCardURL ? (\n{navigator.clipboard.writeText(order.MyTapReviewCardURL)}}\n style={{ fontSize: \"12px\" }}> \n {order.MyTapReviewCardURL}
\n ) : null}\n shortUrl:\n {order.shortUrl ? (\n{navigator.clipboard.writeText(order.shortUrl)}}\n style={{ fontSize: \"12px\" }}> {order.shortUrl}
\n ) : null}\n MyCardDirectURL:\n {order.MyCardDirectURL ? (\n{order.MyCardDirectURL}
\n ) : null}\n directLinks Url:\n {order.directLinksUrl ? (\n{order.directLinksUrl}
\n ) : null}\n Shipping Label Url:\n {order.label ? (\n {order.trackerCode} \n ) : null}\n \n${order.shippingAddress.line1}
\n${\n order.shippingAddress.line2\n ? order.shippingAddress.line2\n : \"\"\n }
\n${order.shippingAddress.city}, ${\n order.shippingAddress.state\n } ${order.shippingAddress.postal_code}
\n${order.shippingAddress.country}
`,\n orderId: order.stripeCheckoutSessionId\n }\n }).then((response) => {\n if (response.data === \"Sended\") {\n console.log(\"Message Sent.\");\n } else {\n console.log(\"Message failed to send.\");\n }\n });\n })\n }\n >\n FULFILL ORDER\n \n\n Item: {order.item} \n Quantity: {order.quantity} \n \n Order ID: {order.stripeCheckoutSessionId}\n \n UID: {order.uid} \n \n Customer Email: {order.customerEmail}\n \n \n Fulfilled by: {order.fulfilledBy}\n \n Date: {date} \n
\n \n \n \n }\n >\n UNFULFILL ORDER\n */}\n\n
\n );\n })\n }\n\n renderOldfulfilledOrders() {\n return this.props.orders\n .filter((order) => order.fulfilled === true)\n .map((order) => {\n // const db = firebase.firestore();\n const date = new Date(order.createdAt).toLocaleString();\n return (\n {order.recipientName}
\n{order.shippingAddress.line1}
\n{order.shippingAddress.line2}
\n{`${order.shippingAddress.city}, ${order.shippingAddress.state} ${order.shippingAddress.postal_code}`}
\n{order.shippingAddress.country}
\n {/*Fulfilled Date: {order.fulfilledDate}
*/}\n\n {/*\n Item: {order.item} \n Quantity: {order.quantity} \n \n Order ID: {order.stripeCheckoutSessionId}\n \n UID: {order.uid} \n \n Customer Email: {order.customerEmail}\n \n \n Fulfilled by: {order.fulfilledBy}\n \n Date: {date} \n
\n \n \n \n }\n >\n UNFULFILL ORDER\n */}\n\n
\n );\n })\n }\n\n render() {\n // console.log(this.props.orders);\n return (\n {order.recipientName}
\n{order.shippingAddress.line1}
\n{order.shippingAddress.line2}
\n{`${order.shippingAddress.city}, ${order.shippingAddress.state} ${order.shippingAddress.postal_code}`}
\n{order.shippingAddress.country}
\n {/*Fulfilled Date: {order.fulfilledDate}
*/}\n\n {/*\n Item: {order.item} \n Quantity: {order.quantity} \n \n Order ID: {order.stripeCheckoutSessionId}\n \n UID: {order.uid} \n \n Customer Email: {order.customerEmail}\n \n \n Fulfilled by: {order.fulfilledBy}\n \n Date: {date} \n
\n \n
\n );\n }\n}\n\nconst mapStateToProps = ({ user, fulfillment }) => ({\n currentUser: user?.currentUser?.displayName,\n orders: fulfillment\n});\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n fetchOrders: (payload) => {\n dispatch(fetchOrders(payload));\n }\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Fulfillment);\n","import React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport firebase from \"../../utils/firebase/firebase.utils\";\nimport { CircularProgress, Box, Typography } from \"@material-ui/core\";\nimport profile from \"../../pages/profile/profile\";\n\n\nconst LinkRedirect = () => {\n const { shortCode } = useParams();\n const [loading, setLoading] = useState(true);\n // const [clickDates, setClickDates] = useState([]);\n\n //read array of timeststamps from db,\n //set to local array\n //?dispatch to redux?\n //write local array back to db\n\n // const addClickDates = async () => {\n // var db = firebase.firestore();\n // const linkDoc = await db.collection(\"links\").doc(shortCode).get();\n // const { longURL, linkID, userId } = linkDoc.data();\n // db.collection(`users/${userId}/links`)\n // .get()\n // .then((querySnapshot) => {\n // querySnapshot.forEach((doc) => {\n // // console.log(doc.id, \" => \", doc.data());\n // const clickDates = doc.data();\n // // const linkDocId = doc.id;\n // // console.log(\"this is the idddddd\", linkDocId);\n // setClickDates(clickDates);\n // console.log(\"this is the clickDates\", clickDates);\n // // setClickDates(currentArray => [...currentArray, clickDates]);\n \n // });\n // });\n // };\n\n // fetch('https://ipapi.co/json/')\n // .then(response => response.json())\n // .then(data => console.log(data));\n\n\n // useEffect(() => {\n // var db = firebase.firestore();\n // const fetchLinkDoc = async () => {\n // if (shortCode.length !== 6) return setLoading(false);\n // const linkDoc = await db.collection(\"links\").doc(shortCode).get();\n // if (!linkDoc.exists) return setLoading(false);\n // const { longURL, linkID, userId } = linkDoc.data();\n // if (linkDoc.exists && !localStorage.getItem(`${linkID}`)) {\n // await db\n // .collection(\"users\")\n // .doc(userId)\n // .collection(\"links\")\n // .doc(linkID)\n // .update({\n // totalClicks: firebase.firestore.FieldValue.increment(1),\n // clickDates: firebase.firestore.FieldValue.arrayUnion(new Date())\n // });\n // window.location.href = longURL;\n // localStorage.setItem(`${linkID}`,longURL)\n // } \n // else if(linkDoc.exists && localStorage.getItem(`${linkID}`)){\n\n // window.location.href = longURL;\n // }\n // else {\n // setLoading(false);\n // }\n // };\n // fetchLinkDoc();\n // }, []);\n\n useEffect(() => {\n var db = firebase.firestore();\n const fetchLinkDoc = async () => {\n if (shortCode.length !== 6) return setLoading(false);\n const linkDoc = await db.collection(\"links\").doc(shortCode).get();\n if (!linkDoc.exists) return setLoading(false);\n\n const { longURL, linkID, userId } = linkDoc.data();\n const currentProfile = await db.collection(\"users\")\n .doc(userId)\n .collection(\"links\")\n .doc(linkID)\n .get();\n\n const {profile} = currentProfile.data()\n \n if (!profile || ![1, 2, 3, 4].includes(parseInt(profile))) {\n\n console.error('Invalid or no profile selected');\n return setLoading(false);\n }\n \n console.log(profile);\n const totalClicks = profile == \"1\" ? `totalClicks` :`totalClicks${profile}`;\n const clickDates = profile == \"1\" ? `clickDates` :`clickDates${profile}`;\n \n \n if (linkDoc.exists && !localStorage.getItem(`${linkID}`)) {\n await db\n .collection(\"users\")\n .doc(userId)\n .collection(\"links\")\n .doc(linkID)\n .update({\n [totalClicks]: firebase.firestore.FieldValue.increment(1),\n [clickDates]: firebase.firestore.FieldValue.arrayUnion(new Date())\n });\n \n window.location.href = longURL;\n localStorage.setItem(`${linkID}`, longURL);\n } \n else if (linkDoc.exists && localStorage.getItem(`${linkID}`)) {\n window.location.href = longURL;\n }\n else {\n setLoading(false);\n }\n };\n \n fetchLinkDoc();\n }, []);\n\n if (loading)\n return (\n FULFILLMENT
\n\n
\n \n
\n Unfulfilled
\n {this.renderUnfulfilledOrders()}\n\n \n\n {this.renderfulfilledOrders()}\n\n {this.renderOldfulfilledOrders()}\n
\n In-Progress
\n {this.renderInProcessOrders().length > 0 ? (\n this.renderInProcessOrders()\n ) : (\n \n )}\nFulfilled
\n\n
\n \n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n // console.log('dddddd',)\n return {\n user: state.user,\n email: state.email,\n currentUser: state.user?.currentUser,\n userId: state.user.currentUser?.id,\n MyCardDirectURL: state.user.currentUser?.MyCardDirectURL,\n reviewCardUploadedLogo: state.user.currentUser?.reviewCardUploadedLogo,\n formData: state.user.currentUser?.formData,\n QrImg: state.user.currentUser?.QrImg\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n updateUser: (payload) => {\n dispatch(updateUser(payload));\n },\n defaultRedirect: () => {\n dispatch(defaultRedirect());\n },\n fetchDesigns: (payload) => {\n dispatch(fetchDesigns(payload));\n }\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(RangeWaterOrder);\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport { MDBMedia, MDBBtn, MDBIcon, MDBCardFooter, MDBTooltip } from \"mdbreact\";\n\nimport { nanoid } from \"nanoid\";\nimport firebase from \"../../utils/firebase/firebase.utils\";\n\nimport { defaultRedirect } from \"../../redux/routing/routing.actions\";\nimport { fetchDesigns } from \"../../redux/designImages/designImages.actions\";\n\nimport API2 from \"../../components/generateQr/generateGoogleQr\";\nimport API3 from \"../../components/renderDirectCardImage/renderDirectCardImage\";\n\nimport UploadLogo from \"../../components/upload-your-logo/uploadLogo\";\nimport { CircularProgress, Box } from \"@material-ui/core\";\n\n// Stripe\nimport { ElementsConsumer } from \"@stripe/react-stripe-js\";\n\n//\n\nimport {\n createSession,\n createStripeCustomer\n} from \"../../utils/firebase/firebase.utils\";\nimport { updateUser } from \"../../redux/user/user.actions\";\n\nimport Splash from \"../splash/splash\";\n\nimport LogoFront from \"./assets/images/IDCard/GalleryMyTapCardLogo.png\";\nimport RW2 from \"./assets/images/IDCard/RW2.png\";\n\nclass GalleryResidential extends React.Component {\n state = {\n MyTapReviewCardURL: \"\",\n loading: false\n };\n\n componentDidMount() {\n this.props.defaultRedirect();\n this.props.fetchDesigns();\n }\n\n // Redirect to fulfillment page when applicable\n componentDidUpdate() {\n if (\n this.props.currentUser &&\n this.props.currentUser.role === \"fulfillment\"\n ) {\n this.props.history.push(\"/fulfillment\");\n }\n // this.props.fetchDesigns();\n }\n\n onDirectURLChange = (e) => {\n const { name, value } = e.target;\n this.setState({ [name]: value });\n };\n\n createShortLink() {\n var db = firebase.firestore();\n const link = {\n name: \"relink\",\n longURL:\n this.state.MyTapReviewCardURL.includes(\"http://\") ||\n this.state.MyTapReviewCardURL.includes(\"https://\")\n ? this.state.MyTapReviewCardURL\n : `http://${this.state.MyTapReviewCardURL}`,\n createdAt: firebase.firestore.FieldValue.serverTimestamp(),\n shortCode: nanoid(6),\n totalClicks: 0,\n clickDates:[]\n };\n\n db.collection(\"users\")\n .doc(`${this.props.userId}`)\n .collection(\"links\")\n .add(link)\n .then(() => {\n db.collection(\"users\")\n .doc(`${this.props.userId}`)\n .update({\n shortUrl: `https://www.mytap.net/rd/${link.shortCode}`\n });\n });\n }\n\n saveMyTapReviewCardURLToDB(e) {\n var db = firebase.firestore();\n db.collection(\"users\").doc(`${this.props.userId}`).update({\n MyTapReviewCardURL: this.state.MyTapReviewCardURL.toString()\n })\n }\n\n generateAndBuy() {\n API2.generateQR();\n // await this.createShortLink();\n setTimeout(() => {\n API3.renderDirectCardImage();\n }, 250);\n }\n\n render() {\n const { currentUser } = this.props.user;\n\n if (!currentUser) {\n return \n
\n\n MyTap Review Card
\n\n \n {({ stripe, elements }) => (\n {\n this.setState({ loading: true });\n e.preventDefault();\n this.generateAndBuy();\n if (!currentUser.stripeCustomerId) {\n return await createStripeCustomer(currentUser).then(\n async () => {\n const session = await createSession(\n \"MyTap Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n );\n } else {\n const session = await createSession(\n \"MyTap Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n }}\n >\n \n Buy\n \n \n )}\n \n\n
\n \n {/* \n
\n\n MyTap Review Card
*/}\n\n \n \n
\n\n $35
\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n // console.log('dddddd',)\n return {\n user: state.user,\n email: state.email,\n currentUser: state.user?.currentUser,\n userId: state.user.currentUser?.id,\n MyCardDirectURL: state.user.currentUser?.MyCardDirectURL,\n reviewCardUploadedLogo: state.user.currentUser?.reviewCardUploadedLogo,\n formData: state.user.currentUser?.formData,\n QrImg: state.user.currentUser?.QrImg\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n updateUser: (payload) => {\n dispatch(updateUser(payload));\n },\n defaultRedirect: () => {\n dispatch(defaultRedirect());\n },\n fetchDesigns: (payload) => {\n dispatch(fetchDesigns(payload));\n }\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(GalleryResidential);\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport { MDBMedia, MDBBtn } from \"mdbreact\";\n\nimport firebase from \"../../utils/firebase/firebase.utils\";\nimport { nanoid } from \"nanoid\";\n\nimport { defaultRedirect } from \"../../redux/routing/routing.actions\";\nimport { fetchDesigns } from \"../../redux/designImages/designImages.actions\";\n\nimport API2 from \"../../components/generateQr/generateGoogleQr\";\nimport API3 from \"../../components/renderDirectCardImage/renderDirectCardImage\";\nimport { CircularProgress, Box } from \"@material-ui/core\";\n\n// import UploadLogo from \"../../components/upload-your-logo/uploadLogo\";\n\n// Stripe\nimport { ElementsConsumer } from \"@stripe/react-stripe-js\";\n\n//\n\nimport {\n createSession,\n createStripeCustomer\n} from \"../../utils/firebase/firebase.utils\";\nimport { updateUser } from \"../../redux/user/user.actions\";\n\nimport Splash from \"../splash/splash\";\n\nimport CR from \"./assets/images/IDCard/CR.png\";\nimport CR2 from \"./assets/images/IDCard/CR2.png\";\n\nclass ColumbiaResidentialOrder extends React.Component {\n state = {\n MyTapReviewCardURL: \"\",\n loading: false\n };\n\n componentDidMount() {\n this.props.defaultRedirect();\n this.props.fetchDesigns();\n }\n\n // Redirect to fulfillment page when applicable\n componentDidUpdate() {\n if (\n this.props.currentUser &&\n this.props.currentUser.role === \"fulfillment\"\n ) {\n this.props.history.push(\"/fulfillment\");\n }\n // this.props.fetchDesigns();\n }\n\n onDirectURLChange = (e) => {\n const { name, value } = e.target;\n this.setState({ [name]: value });\n };\n\n createShortLink() {\n var db = firebase.firestore();\n const link = {\n name: \"relink\",\n longURL:\n this.state.MyTapReviewCardURL.includes(\"http://\") ||\n this.state.MyTapReviewCardURL.includes(\"https://\")\n ? this.state.MyTapReviewCardURL\n : `http://${this.state.MyTapReviewCardURL}`,\n createdAt: firebase.firestore.FieldValue.serverTimestamp(),\n shortCode: nanoid(6),\n totalClicks: 0,\n clickDates:[]\n };\n\n db.collection(\"users\")\n .doc(`${this.props.userId}`)\n .collection(\"links\")\n .add(link)\n .then(() => {\n db.collection(\"users\")\n .doc(`${this.props.userId}`)\n .update({\n shortUrl: `https://www.mytap.net/rd/${link.shortCode}`\n });\n });\n }\n\n saveMyTapReviewCardURLToDB(e) {\n var db = firebase.firestore();\n db.collection(\"users\").doc(`${this.props.userId}`).update({\n MyTapReviewCardURL: this.state.MyTapReviewCardURL.toString()\n })\n }\n\n generateAndBuy() {\n API2.generateQR();\n setTimeout(() => {\n API3.renderDirectCardImage();\n }, 250);\n }\n\n render() {\n const { currentUser } = this.props.user;\n\n if (!currentUser) {\n return \n \n \n \n\n \n {({ stripe, elements }) => (\n {\n this.setState({ loading: true });\n e.preventDefault();\n this.generateAndBuy();\n if (!currentUser.stripeCustomerId) {\n return await createStripeCustomer(currentUser).then(\n async () => {\n const session = await createSession(\n \"MyTap Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n );\n } else {\n const session = await createSession(\n \"MyTap Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n }}\n >\n \n \n \n \n )}\n \n \n \n \n \n\n \n
\n \n \n
\n\n \n \n \n
\n\n \n $35
\n \n \n Order!
\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = (state, ownProps) => {\n // console.log('dddddd',)\n return {\n user: state.user,\n email: state.email,\n currentUser: state.user?.currentUser,\n userId: state.user.currentUser?.id,\n MyCardDirectURL: state.user.currentUser?.MyCardDirectURL,\n reviewCardUploadedLogo: state.user.currentUser?.reviewCardUploadedLogo,\n formData: state.user.currentUser?.formData,\n QrImg: state.user.currentUser?.QrImg\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n return {\n updateUser: (payload) => {\n dispatch(updateUser(payload));\n },\n defaultRedirect: () => {\n dispatch(defaultRedirect());\n },\n fetchDesigns: (payload) => {\n dispatch(fetchDesigns(payload));\n }\n };\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(ColumbiaResidentialOrder);\n","import React, { lazy, Suspense } from \"react\";\nimport {\n BrowserRouter as Router,\n Route,\n Switch,\n Redirect\n} from \"react-router-dom\";\nimport { connect } from \"react-redux\";\nimport { createStructuredSelector } from \"reselect\";\n\nimport { setCurrentUser } from \"./redux/user/user.actions\";\nimport { selectCurrentUser } from \"./redux/user/user.selectors\";\nimport { selectRedirectRoute } from \"./redux/routing/routing.selectors\";\n\nimport ScrollToTop from \"./components/scrollToTop/ScrollToTop\";\n\nimport Register from \"./pages/sign-up/signUp\";\nimport Login from \"./pages/sign-in/signIn\";\nimport PasswordReset from \"./pages/passwordReset/passwordReset\";\nimport FormPage from \"./pages/contact-form/contact-form\";\nimport Shop from \"./pages/shop/Shop\";\nimport Nav from \"./components/nav/Nav\";\n\nimport SplashPage from \"./pages/splash/splash\";\nimport Dashboard from \"./pages/dashboard/Dashboard\";\nimport DesignPhone from \"./pages/design-phone/DesignPhone\";\nimport DesignCard from \"./pages/design-card/DesignCard\";\nimport Enterprise from \"./pages/enterprise/enterprise\";\nimport Sales from \"./pages/sales/sales\";\nimport SalesAdmin from \"./pages/sales-admin/sales-admin\";\nimport Admin from \"./pages/admin/admin\";\nimport ContactUs from \"./pages/contact-us/ContactUs\";\nimport DeviceCompatibility from \"./pages/device-compatibility/DeviceCompatibility\";\nimport Fulfillment from \"./pages/fulfillment/Fulfillment\";\nimport LinkRedirect from \"./components/LinkRedirect/\";\nimport RangeWaterOrder from \"./pages/rangewater-order/rangewaterOrder\";\nimport GalleryResidential from \"./pages/gallery-residential-order/galleryResidential\";\nimport RangeWaterMultiOrder from \"./pages/rangewater-multiOrder/rangewaterMultiOrder\";\nimport ColumbiaResidentialOrder from \"./pages/columbia-residential-order/columbiaResidential\";\n\n\nimport {\n auth,\n createUserProfileDocument\n} from \"./utils/firebase/firebase.utils\";\n\nimport \"./App.css\";\n\nconst Landing = lazy(() => import(\"./pages/landing/Landing\"));\n\nclass App extends React.Component {\n unsubscribeFromAuth = null;\n\n componentDidMount() {\n const { setCurrentUser } = this.props;\n\n this.unsubscribeFromAuth = auth.onAuthStateChanged(async (userAuth) => {\n if (userAuth) {\n const userRef = await createUserProfileDocument(userAuth);\n\n userRef.onSnapshot((snapShot) => {\n setCurrentUser({\n id: snapShot.id,\n ...snapShot.data()\n });\n });\n }\n setCurrentUser(userAuth);\n });\n }\n\n componentWillUnmount() {\n this.unsubscribeFromAuth();\n }\n\n render() {\n // console.log(this.props.currentUser.role)\n return (\n \n
\n\n MyTap Review Card
\n\n \n {({ stripe, elements }) => (\n {\n this.setState({ loading: true });\n e.preventDefault();\n this.generateAndBuy();\n if (!currentUser.stripeCustomerId) {\n return await createStripeCustomer(currentUser).then(\n async () => {\n const session = await createSession(\n \"MyTap Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n );\n } else {\n const session = await createSession(\n \"MyTap Review Card\",\n currentUser.uid\n );\n stripe.redirectToCheckout({\n sessionId: session.data.id\n });\n console.log(\"session\", session);\n }\n }}\n >\n \n Buy\n \n \n )}\n \n\n
\n \n {/* \n
\n\n MyTap Review Card
*/}\n\n \n \n
\n\n $35
\n \n
\n \n \n \n \n `;\n\n var storageRef = firebase.storage().ref();\n var db = firebase.firestore();\n\n\n const encodedString = 'data:text/html;base64,' + new Buffer(toHtml).toString(\"base64\");\n // console.log('dfdfdfdfddfdfddfd',encodedString)\n storageRef\n .child(`${userId}.html`)\n .putString(encodedString,'data_url')\n .then((snapshot) => {\n // console.log(snapshot)\n storageRef\n .child(`${userId}.html`)\n .getDownloadURL()\n .then((url) => {\n db.collection(\"users\")\n .doc(`${userId}`)\n .update({\n landingUrl: `${url}`\n })\n })\n });\n\n\n }\n};\n","module.exports = __webpack_public_path__ + \"static/media/RW3.79971607.png\";","module.exports = __webpack_public_path__ + \"static/media/card-back.4b23bfa0.png\";","import vCard from 'mycardedit';\nimport store from '../../redux/store';\n// import firebase from \"../../utils/firebase/firebase.utils\";\n\n// const { saveAs, encodeBase64 } = require('@progress/kendo-file-saver');\n\nexport default {\n generateCard: function () {\n // var userId = store.getState().user.currentUser.id;\n // const profileState = JSON.parse(store.getState().user.currentUser.profile);\n // const formData = profileState == \"1\" ? JSON.parse(store.getState().user.currentUser.formData) : profileState == \"2\" ? JSON.parse(store.getState().user.currentUser.formData2): profileState == \"3\" ? JSON.parse(store.getState().user.currentUser.formData3):JSON.parse(store.getState().user.currentUser.formData);\n // const croppedImg = profileState == \"1\" ? store.getState().user.currentUser.croppedImg : profileState == \"2\" ? store.getState().user.currentUser.croppedImg2 : profileState == \"3\" ? store.getState().user.currentUser.croppedImg3 : store.getState().user.currentUser.croppedImg;\n \n\n const profileState = JSON.parse(store.getState().user.currentUser?.profile);\n const formDataKey = profileState === 1 ? `formData` : `formData${profileState}`;\n const croppedImgKey = profileState === 1 ? `croppedImg` :`croppedImg${profileState}`;\n const formData = JSON.parse(store.getState().user.currentUser[formDataKey]);\n const croppedImg = store.getState().user.currentUser[croppedImgKey];\n\n // const stringImg = store.getState().user.currentUser.stringImg\n\n\n\n var firstName = formData.firstName;\n var lastName = formData.lastName;\n var company = formData.company;\n var title = formData.title;\n var cellPhone = formData.cellPhone;\n var workPhone = formData.workPhone;\n var homePhone = formData.homePhone;\n var persEmail = formData.persEmail;\n var workEmail = formData.workEmail;\n var link = formData.link;\n var workLink = formData.workLink;\n var homeStreet = formData.homeStreet;\n var homeCity = formData.homeCity;\n var homeState = formData.homeState;\n var homeZip = formData.homeZip;\n var workStreet = formData.workStreet;\n var workCity = formData.workCity;\n var workState = formData.workState;\n var workZip = formData.workZip;\n var birthday = formData.birthday;\n var socialType1 = formData.socialType1;\n var socialUserName1 = formData.socialUserName1;\n var socialLink1 = formData.socialLink1;\n var socialType2 = formData.socialType2;\n var socialUserName2 = formData.socialUserName2;\n var socialLink2 = formData.socialLink2;\n var socialType3 = formData.socialType3;\n var socialUserName3 = formData.socialUserName3;\n var socialLink3 = formData.socialLink3;\n var socialType4 = formData.socialType4;\n var socialUserName4 = formData.socialUserName4;\n var socialLink4 = formData.socialLink4;\n var socialType5 = formData.socialType5;\n var socialUserName5 = formData.socialUserName5;\n var socialLink5 = formData.socialLink5;\n var socialType6 = formData.socialType6;\n var socialUserName6 = formData.socialUserName6;\n var socialLink6 = formData.socialLink6;\n // var image = croppedImg.substr(croppedImg.indexOf(\",\") + 1)\n var contact = vCard();\n\n //set properties\n contact.firstName = firstName;\n contact.lastName = lastName;\n contact.organization = company;\n contact.title = title;\n contact.cellPhone = cellPhone;\n contact.workPhone = workPhone;\n contact.homePhone = homePhone;\n contact.email = persEmail;\n contact.workEmail = workEmail;\n contact.url = link;\n contact.workUrl = workLink;\n // contact.homeAddress.label = homeStreet.value > 0 ? 'Home Address':null;\n function HomeStreet() {\n contact.homeAddress.label = homeStreet;\n }\n if (homeStreet) {\n HomeStreet();\n }\n\n contact.homeAddress.street = homeStreet;\n contact.homeAddress.city = homeCity;\n contact.homeAddress.stateProvince = homeState;\n contact.homeAddress.postalCode = homeZip;\n // contact.workAddress.label = workStreet.value > 0 ? 'Work Address':null;\n function WorkStreet() {\n contact.workAddress.label = workStreet;\n }\n if (workStreet) {\n WorkStreet();\n }\n\n contact.workAddress.street = workStreet;\n contact.workAddress.city = workCity;\n contact.workAddress.stateProvince = workState;\n contact.workAddress.postalCode = workZip;\n contact.birthday = new Date(birthday);\n\n const withHttp = url => !/^https?:\\/\\//i.test(url) ? `https://${url}` : url;\n\n\n function Social1() {\n contact.socialUrls[socialType1.replace(/\\s+/g, '')] = {\n userName: socialUserName1,\n url: withHttp(socialLink1)\n };\n }\n\n if (socialType1) {\n Social1();\n }\n\n function Social2() {\n contact.socialUrls[socialType2.replace(/\\s+/g, '')] = {\n userName: socialUserName2,\n url: withHttp(socialLink2)\n };\n }\n\n if (socialType2) {\n Social2();\n }\n\n function Social3() {\n contact.socialUrls[socialType3.replace(/\\s+/g, '')] = {\n userName: socialUserName3,\n url: withHttp(socialLink3)\n };\n }\n\n if (socialType3) {\n Social3();\n }\n\n function Social4() {\n contact.socialUrls[socialType4.replace(/\\s+/g, '')] = {\n userName: socialUserName4,\n url: withHttp(socialLink4)\n };\n }\n\n if (socialType4) {\n Social4();\n }\n\n function Social5() {\n contact.socialUrls[socialType5.replace(/\\s+/g, '')] = {\n userName: socialUserName5,\n url: withHttp(socialLink5)\n };\n }\n\n if (socialType5) {\n Social5();\n }\n\n function Social6() {\n contact.socialUrls[socialType6.replace(/\\s+/g, '')] = {\n userName: socialUserName6,\n url: withHttp(socialLink6)\n };\n }\n\n if (socialType6) {\n Social6();\n }\n\n function Image() {\n contact.photo.embedFromString(\n croppedImg.substr(croppedImg.indexOf(',') + 1),\n 'image/png'\n );\n }\n\n if (croppedImg) {\n Image();\n }\n\n // contact.socialUrls[socialType2] = {};\n // contact.socialUrls[socialType2].userName = socialUserName2;\n // contact.socialUrls[socialType2].url = socialLink2;\n\n // contact.homeFax = '312-555-1616';\n // contact.workFax = '312-555-1717';\n // contact.homeAddress.countryRegion = 'United States of America';\n // contact.workAddress.countryRegion = 'United States of America';\n // contact.note = 'Notes on Eric';\n\n contact.version = '3.0';\n\n //get as formatted string\n var user = contact.getFormattedString();\n // console.log(user);\n\n // store.dispatch((saveUserCard(user,(userId))))\n localStorage.setItem('vCard', user);\n\n //send to vcard to firebase if needed\n\n // var db = firebase.firestore();\n // db.collection(\"users\")\n // .doc(`${localStorage.getItem(\"userId\")}`)\n // .update({\n // vCard: `${user}`,\n // })\n // .then(function () {\n // console.log(\"Document successfully written!\");\n // })\n // .catch(function (error) {\n // console.error(\"Error writing document: \", error);\n // });\n\n //save to file\n\n // const dataURI = 'data:text/vcard;base64,' + encodeBase64(user);\n // saveAs(dataURI, 'user.vcf');\n }\n};\n","module.exports = \"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBAUEBAYFBQUGBgYHCQ4JCQgICRINDQoOFRIWFhUSFBQXGiEcFxgfGRQUHScdHyIjJSUlFhwpLCgkKyEkJST/wAALCADmAOEBAREA/8QAHAABAAIDAQEBAAAAAAAAAAAAAAQFAwYHAQII/8QARBAAAQMDAQQGBgUKBQUAAAAAAQACAwQFEQYSITFREyJBYXGRBxUyUoGxFnOhwdEXNDVCVFWTorLwFCMzYpI2coPS4f/aAAgBAQAAPwD9UoiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiEhoJJAA3knsUD6QWn940v8AECnNcHNDmkEEZBHAr1E4KBUX+1Uri2WvgDhxAdtEeS8g1DaaggR18GTwDnbPzVgCCAQcg9qIhIAJJwB2qvn1BaqckSV9PkcQ1218l5DqK0TkBlwgyfeds/NWIcHAFpBB3gjtRFHqrhR0IzU1MMOeAe4An4KG3U9mc7ZFfFnvyB54VhT1UFWzbp5o5m82ODh9iyIiIiIiw1n5nP8AVu+S5AuuWz9G0n1LP6QpKxVVVFRU8lRO8MjjG04rnF81PV3iRzGvdDS8GxNOMj/dz+Sr6S2VtfvpaWaYDcS1pIHxXtXaq6gG1U0k0Tfec048+Cl2XUdZZpGhjzLT560Ljux3ciuk0NbDcaWOqp3bUcgyOY7j3pX10FtpJKqodsxsGTjiTyHeubXnUdbeZHB7zHBnqwtO4ePMqJSWuurxmmpZpW+81px58F7VWi4UTS6oo542j9YsOz58FM07dblR1sUFE4yiR2Ogceqfw8V05alqrVj6WR1Bb3YlbullH6vcO/vWmBs9ZPgCWeZ57Muc4/MqW/T12jZtut9RjuYSfJRaaqqaCfpaeWSGVpxlpwfA/guhaY1K29RGGcNZVxjJA4PHMfer1ERERFhrPzOf6t3yXIF1y2fo2k+pZ/SFJWnekCvc1tPQMdgOzK8c+wff5Kg0zaW3i6Mhkz0LAZJMdoHZ8SQunRRRwRtjiY1jGjAa0YAC9exsjSx7Q5rhggjIIXNdV2dlouWIRiCYbbB7vMf3zVr6P69zZ6igceq5vSsHIjAPnu8l56QK9zqinoWnqMb0rhzJ3DyAPmqrStmbeLjszAmCIbbx73IfH7l0uONkTGsja1jGjAa0YAC9IDgQQCDuIKiU1ooKOd1RT0kUUruLmt+XL4Ly8Vvq62VNUMbUbDs5947h9pC5OS6R5JJc5xyTxJK6jYLLDZqJjAxvTuAMr+0nl4BWa1nWtkiqaF9wiYG1EO95A9tvf4LSrZXPttfBVMJzG8E947R5ZXWwQ4Ag5B3hERERFhrPzOf6t3yXIF1y2fo2k+pZ/SFJXPte59dszn/Qbjzcpfo8x/iK33thmPDJW7ItO9Imzs0Hv5k8uqqnRO16/ixw2H58MLzWufpBNnONhmPJXHo72ejrvezHnw63/wBW4LRq3XVyp6yeFkFIWxyOYNprs4Bx7yxD0gXPIzT0ZHbhrv8A2Wx60z9HqjGfaZn/AJBc+tuPWNLtez0zM+G0F1xFEvGz6ordv2egkz/xK5Kuu27a9X0u17XRMz44CkIiIiLDWfmc/wBW75LkC65bP0bSfUs/pCkrT/SBQOcynr2jIb/lPPIcR9/mtf0zdm2e6Mmkz0LwY5MdgPb8CAunRSxzxtkie17HDIc05BC9e9sbC97g1rRkuJwAFzXVd4Zd7lmE5ghGww+9zP8AfJWvo/oHOnqK9w6rW9Ew8ycE+W7zT0gW9zZ4K9o6jm9E88iN48xnyVXpO8stFyzMcQTDYefd5H++a6S1zXtDmkOaRkEHIK1+76UtckVXWdE9suw+TqvONrBOceK52us3ii9Y2yppRjakYdnPvDePtAXJyHRvIILXNOCOBBXUbBeobzRMeHt6doAlZ2g8/AqzWsa1vcVNRPt8Tw6om3PAPsN7/FaXbKF9yr4KVgOZHgHuHafLK62AGgADAG4IiIiIsNZ+Zz/Vu+S5Ap7L7dI2NYyvqGtaMAB5wAvfpBdv3jU/xCujUkTbnYqdlWOlE9OwyZ4kloOfHK0K+aYq7PI57WOmpeLZWjOB/u5fJV9Jc62g3UtVNCDvIa4gH4L2rutdXDZqauaVvHZc848uCl2XTlZeZGljDFT560zhux3cyuk0NFDbqSOlp27McYwOZ7z3pXUUNxpJKWobtRyDB5jvHeubXrTlZZpHF7DLT56szRux38isFFe7jb27FNVyxs93OWj4Hcvuq1Dda1hjnrZXMdxa3DQfHGFittorbtKI6WFzh2vO5rfErrK1LVWk31Ujq+3tzK7fLEP1u8d/ctMBnop9xlgmYezLXNPzClv1Bdns2DcKnHc8g+ai01LU18/RU8Uk0rjnDRk+J/FdC0xpptliM05a+rkGCRwYOQ+9XqIiIiIQHAggEHcQe1QPo/af3dS/wwn0ftP7upf4YT6P2n93Uv8ADCnMY2JjY2NDWNAa1oGAAOxe8VAqLBaqpxdLQQFx4kN2SfJeQaetNO4OjoIMjgXN2vmrAAAAAYA7ERCAQQRkHsVfPp601Di6SggyeJa3Z+S8i05aISCy305x7zdr5qwYxsbQ1jQ1o4ADAC9RR6q30dcMVNNDNjgXtBI+Kht0xZmu2hQRZ78keWVYU9LBSM2KeGOFvJjQ0fYsiIiIiIqK66vpLTWvpJYJ3vaASWYxvGea+7Tqy33acU7OkhmPstkA63gQs1JqCnrLtNbGRSiSHay442Tg4596tFS3TVdFaq8UczJXOwC5zcYbnn8N6usjGcjHHK1yu11bqWYxQslqdk4LmYDfgTxUu26pobnBO+MSMkgjMjonDeWjtHYq78oNB+y1X8v4qb9LKX1T6z6Cfoul6LZ3bWcZzxVtRVTa6khqWNc1srA8B3EAqBZ9RU95nmhhilY6EZJfjB347Cotz1nbrdO6BokqJGnDujxstPLJWS06uoLrMIBtwTO9lsmMO8Cs9fqCnt90prdJFK6So2dlzcYG04tGfJWb3bDS49gytX/KDQfstV/L+KtbRqSgvJLIHuZMBkxSDBx3dhUO5azo7ZWy0klPUPfGQCW4wd2efeslo1ZS3isFLDBOxxaXZfjG7wKhflBoP2Wq/l/FXdpvVHeYTJSvOW7nscMOb4qciIiItFvFbFbtbCqm2ujjDSdkZPsYXy2caj1VTVVBTyRRRFjpHluPZJJJxz4KVY/+t7h/5P6gtvmmZTwvmkOyyNpc48gFzdsDLzDdblUTxsnB2omOeATvyQB24G4K79cSVOhpXtcemiAp3nuyBn4tKm6Jt9NHZ46oRsdNMXbTyMkAEjH2farSto6anoa+SGCKN8kL9tzWgF3VPFaXpq+VlrpJYqe2yVbXSbRc3O44G7cCrvWMzqjTNPM+MxPkfG9zDxaS0nHwWC16kuNNbqaGOwVczGRta2Ru1h4xxHVVZpqokghvU7MskbTucObTvVtoGgp3UU1Y5jXzmUsDiMloAB3efyUfXlHDTOpK2BrYp3OIJZuzjBB8Qsd6ldNqeySvGHPjp3EciZCt1m/0ZP8AtPyWp+jwAwVwIyC5nyKi6lgjtWpKKoo2iN7y17ms3ZO1g+YWC4VktBrWaphp3VEjHbo25y7MeOzxW2WK7VN1ZM6poX0hjIADs9bPiAtL0zf4bGyr6aCSbpgwANxjdtcc+KvNC0EzBU172COKfdG0doBOfh2LbERERFqtVaaqbWcdWaVz6Xdl5ALfYx81tDI2RN2Y2NYOTRhaVJS3u3ahrK+it5lEj3hpeMtIJzncRyWeuqtSXK2VFNNbOjdIWtBiBHV3k8SeQ81Mt+ircKKH/GQudUFoMhEhG/luPZwUK16fqqWtuFtmgk9X1LSGyjBAwctPj96w0kGpdNF9PTUzaqBzsjq7Tc8xgghW1vbfqqkr33IMa2WJwihAG0HY7McB47/vpbP9JLJA+GntbXte7bJkaSc4x2OHJWN3iu9506G1FFs1QqAejjGOqBx3k81fWaGSntNJDK0skZE1rmnsOFr2lbNVU9VcG1tK9kUzNjrcHAk5Hko8dtv2l6iX1dGKumkOcEbWeWRkEHwXrLNedSV0U93YKemj/U4bu0Acd/MrLqm3XGS+UlZQUjphBGwjA6u015OD9inW246gq6noa63RQwOY7L2tIION3Fx7VR2aPUdjZK2mtgeJSCekaTjHLBHNWFssFyuN1bdL1hpjILIgR2cBgcAFGuNDeKXVE1yoqEzYdlhcMtOWYPaOZVxZrjfqqtEdwt8UEGyTttaQc9nFxVbpbT84pLlS3KlfHHOGAbXdtbx4ZCkaXpbpZqya31MD30jiSyUeyDz8D81tCIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIv//Z\"","module.exports = __webpack_public_path__ + \"static/media/GalleryMyTapCardLogo.d68fde63.png\";","module.exports = __webpack_public_path__ + \"static/media/RW1.22c8713b.png\";","module.exports = __webpack_public_path__ + \"static/media/fivestar.6f5680a2.png\";","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { MDBModal, MDBModalBody, MDBModalHeader, MDBIcon } from \"mdbreact\";\nimport GoogleButton from \"react-google-button\";\nimport { Link } from \"react-router-dom\";\nimport { signInWithGoogle } from \"../../../utils/firebase/firebase.utils\";\nimport { signInWithFacebook } from \"../../../utils/firebase/firebase.utils\";\n\nimport \"./LoginModal.styles.scss\";\n\nconst LoginModal = ({ toggleModal, isOpen }) => {\n return ReactDOM.createPortal(\n \n
\n \n
\n \n
\n \n ${ image ? `![](\"${image}\"/)
`:`![](\"https://firebasestorage.googleapis.com/v0/b/mytap-2d6fa.appspot.com/o/noprofile.png?alt=media&token=eb4bb0c4-dd90-4491-82fd-b66d6903cd66\")
`}\n
\n `}\n \n \n add\n ADD CONTACT\n \n
\n \n\n ${message|| imgLink || youtubeLink || html ? `${firstName} ${lastName}
\n${company}
\n${title}
\n ${ homeCity || workCity ? `\n ${homeCity || workCity}, ${homeState || workState}\n
`:``}\n\n ${ cellPhone ? `\n ${cellPhone}\n `:``}\n ${ workPhone ? `\n ${workPhone}\n `:``}\n ${ homePhone ? `\n ${homePhone}\n `:``}\n ${ persEmail ? `\n ${persEmail}\n `:``}\n ${ workEmail ? `\n ${workEmail}\n `:``}\n ${ link ? `\n ${link}\n `:``}\n ${ workLink ? `\n ${workLink}\n `:``}\n
\n \n \n \n ${message ? `
`:''}\n \n ${youtubeLink ? `\n
`: ''}\n\n ${message}
` :''}\n \n ${imgLink ? ` \n \n
\n `: ''}\n \n ${html ? ` ${html}
` : ''}\n \n \n {/* \n \n \n
\n\n
\n \n\n
\n Forgot Your Password?\n
\n .
; \n }\n const { profile} = this.props;\n const croppedImgKey = profile === \"1\" ? `croppedImg` :`croppedImg${profile}`;\n \n const parsedFormData = JSON.parse(this.props.formData);\n const parsedFormData2 = this.props.formData2 ? JSON.parse(this.props.formData2): ''\n const parsedFormData3 = this.props.formData3 ? JSON.parse(this.props.formData3): ''\n const parsedFormData4 = this.props.formData4 ? JSON.parse(this.props.formData4): ''\n\n var db = firebase.firestore();\n // var storageRef = firebase.storage().ref();\n return (\n \n \n \n\n \n\n \n\n \n\n\n \n
\n \n \n \n {this.state.totalClicks} \n \n Total Clicks \n \n \n \n \n \n \n
\n {this.state.directLink === \"1\" ? (\n \n \n \n Landing Page (default)\n \n \n\n \n\n {this.state.socialType1 ? (\n \n ) : null}\n\n {this.state.socialType2 ? (\n \n ) : null}\n\n {this.state.socialType3 ? (\n \n ) : null}\n\n {this.state.socialType4 ? (\n \n ) : null}\n\n {this.state.socialType5 ? (\n \n ) : null}\n\n {this.state.socialType6 ? (\n \n ) : null}\n\n \n \n
\n \n\n\n \n \n \n \n NAME\n \n \n \n \n \n \n \n\n \n \n \n PHONE NUMBERS\n \n \n \n \n \n \n \n\n \n \n \n EMAIL ADDRESSES\n \n \n \n \n \n \n \n\n \n \n \n WEBSITE LINKS\n \n \n \n \n \n \n \n\n \n \n \n ADDRESSES\n \n \n \n
HOME ADDRESS\n
WORK ADDRESS\n \n \n \n \n\n \n \n \n BIRTHDAY\n \n \n \n \n \n \n \n \n\n \n \n \n SOCIAL MEDIA LINKS\n \n \n \n \n TYPE \n DISPLAY NAME \n LINK \n \n\n \n \n \n \n \n \n \n \n \n \n\n {/* {this.props.currentUser.generator === true ? (\n \n \n \n SPOTLIGHT\n \n \n \n
\n \n \n \n \n ) : null} */}\n\n {/* \n \n \n DIRECT LINK\n \n \n \n \n \n Contact Card (default)\n \n\n \n\n {this.state.socialType1 ? (\n \n ) : null}\n\n {this.state.socialType2 ? (\n \n ) : null}\n\n {this.state.socialType3 ? (\n \n ) : null}\n\n {this.state.socialType4 ? (\n \n ) : null}\n\n {this.state.socialType5 ? (\n \n ) : null}\n\n {this.state.socialType6 ? (\n \n ) : null}\n\n \n \n\n {this.state.directLink === \"1\" ? (\n \n \n \n */}\n\n {this.props.currentUser.generator === true ? (\n \n \n \n GENERATE QR\n \n \n \n {this.state.inputFocus === true ? (\n \n \n \n \n ) : null}\n
\n HOME ADDRESS\n
WORK ADDRESS\n
\n
\n \n\n {/* \n \n \n \n \n \n \n \n
\n\n \n \n \n \n \n \n \n
\n \n \n Start:\n \n End:\n \n \n \n
\n \n
\n \n \n Start:\n \n End:\n \n \n \n
\n \n {imageSrc ? (\n \n \n ) : (\n \n )}\n
\n );\n};\n\nfunction readFile(file) {\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.addEventListener(\"load\", () => resolve(reader.result), false);\n reader.readAsDataURL(file);\n });\n}\n\nconst StyledDemo = withStyles(styles)(Demo);\n\nexport default StyledDemo;\n","module.exports = __webpack_public_path__ + \"static/media/rangewater.8ef0739d.png\";","module.exports = __webpack_public_path__ + \"static/media/mytapcard.825df48d.png\";","module.exports = __webpack_public_path__ + \"static/media/mytap_white__transparent.b0ec70b2.png\";","export const setRedirect = (route) => {\n return {\n type: \"SET_REDIRECT\",\n payload: route\n };\n};\n\nexport const defaultRedirect = () => {\n return {\n type: \"DEFAULT_REDIRECT\"\n };\n};\n","module.exports = __webpack_public_path__ + \"static/media/RW1.22c8713b.png\";","module.exports = __webpack_public_path__ + \"static/media/RW2.69cb833f.png\";","module.exports = __webpack_public_path__ + \"static/media/RW1.22c8713b.png\";","module.exports = __webpack_public_path__ + \"static/media/RW2.69cb833f.png\";"],"sourceRoot":""}\n
\n \n \n Save\n \n
\n {/* \n \n Zoom\n \n setZoom(zoom)}\n />\n
\n \n \n Rotation\n \n setRotation(rotation)}\n />\n
\n