diff --git a/public/locales/compatibility-v2/en/male_en.json b/public/locales/compatibility-v2/en/male_en.json index 6daac44..1767c8e 100644 --- a/public/locales/compatibility-v2/en/male_en.json +++ b/public/locales/compatibility-v2/en/male_en.json @@ -306,10 +306,10 @@ "point3_color": "Head line", "point4": "A long index finger indicates a natural leader", "point5": " defines the quality of your life and what you will achieve", - "point5_color": "Life line", + "point5_color": "Live line", "point6": "A short middle finger reveals a free spirit", "point7": " represents your material achievement and career goals", - "point7_color": "Fate line", + "point7_color": "Money line", "point8": "A long ring finger reveals that a person tends to take risks", "point9": "A short little finger indicates the person's lack of self-confidence" }, diff --git a/public/locales/palmistry-v1/en/male_en.json b/public/locales/palmistry-v1/en/male_en.json index 5031569..bab2771 100644 --- a/public/locales/palmistry-v1/en/male_en.json +++ b/public/locales/palmistry-v1/en/male_en.json @@ -221,10 +221,10 @@ "point3_color": "Head line", "point4": "A long index finger indicates a natural leader", "point5": " defines the quality of your life and what you will achieve", - "point5_color": "Life line", + "point5_color": "Live line", "point6": "A short middle finger reveals a free spirit", "point7": " represents your material achievement and career goals", - "point7_color": "Fate line", + "point7_color": "Money line", "point8": "A long ring finger reveals that a person tends to take risks", "point9": "A short little finger indicates the person's lack of self-confidence" }, diff --git a/public/v1/palmistry/hand-with-lines-v1.png b/public/v1/palmistry/hand-with-lines-v1.png new file mode 100644 index 0000000..1c508f4 Binary files /dev/null and b/public/v1/palmistry/hand-with-lines-v1.png differ diff --git a/public/v2/compatibility/hand-with-lines-v1.png b/public/v2/compatibility/hand-with-lines-v1.png new file mode 100644 index 0000000..1c508f4 Binary files /dev/null and b/public/v2/compatibility/hand-with-lines-v1.png differ diff --git a/src/components/CompatibilityV2/components/PalmsSayAbout/styles.module.scss b/src/components/CompatibilityV2/components/PalmsSayAbout/styles.module.scss index 27e1599..e012fc5 100644 --- a/src/components/CompatibilityV2/components/PalmsSayAbout/styles.module.scss +++ b/src/components/CompatibilityV2/components/PalmsSayAbout/styles.module.scss @@ -23,6 +23,13 @@ gap: 12px; margin-bottom: 12px; + &>img[src$=".svg"] { + shape-rendering: geometricPrecision; + text-rendering: geometricPrecision; + image-rendering: smooth; + -webkit-font-smoothing: antialiased; + } + &:nth-child(even) { flex-direction: row-reverse; } @@ -40,12 +47,12 @@ grid-template-columns: 16px 1fr; gap: 2px; - & > .text { + &>.text { font-size: 16px; line-height: 125%; color: #000; - & > span { + &>span { color: #cc8551; font-weight: 600; font-size: 18px; @@ -55,4 +62,4 @@ .photo-ready { max-width: 90px; -} +} \ No newline at end of file diff --git a/src/components/CompatibilityV2/pages/FindHappiness/index.tsx b/src/components/CompatibilityV2/pages/FindHappiness/index.tsx index 7aff42e..5a517b1 100644 --- a/src/components/CompatibilityV2/pages/FindHappiness/index.tsx +++ b/src/components/CompatibilityV2/pages/FindHappiness/index.tsx @@ -11,6 +11,7 @@ import { actions } from "@/store"; // import StarSVG from "../../images/SVG/Star"; import { usePreloadImages } from "@/hooks/preload/images"; import { DotLottieReact } from "@lottiefiles/dotlottie-react"; +import { useMetricABFlags } from "@/services/metric/metricService"; function FindHappiness() { const navigate = useNavigate(); @@ -18,6 +19,9 @@ function FindHappiness() { const location = useLocation(); const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2); usePreloadImages(["/male-gender.webp", "/female-gender.webp"]); + const { flags, ready } = useMetricABFlags(); + const imageType = flags?.welcomePageImage?.[0]; + const image = imageType === "v1" ? "/hand-with-lines-v1.png" : "/hand-with-lines.png"; useEffect(() => { const feature = location.pathname.replace( @@ -29,6 +33,8 @@ function FindHappiness() { } }, [dispatch, location.pathname]); + if (!ready) return null; + return ( <> {/*
@@ -58,8 +64,12 @@ function FindHappiness() { /> Hand with lines {translate("/find-your-happiness.title")} diff --git a/src/components/CompatibilityV2/pages/ScannedPhoto/index.tsx b/src/components/CompatibilityV2/pages/ScannedPhoto/index.tsx index 4fab087..8aa41f1 100644 --- a/src/components/CompatibilityV2/pages/ScannedPhoto/index.tsx +++ b/src/components/CompatibilityV2/pages/ScannedPhoto/index.tsx @@ -190,7 +190,8 @@ function ScannedPhoto() { ); const onEndLoading = useCallback(() => { - if (isIOSPath && !!authCode) { + const isIOS = /iPhone/i.test(navigator.userAgent); + if (isIOSPath && !!authCode && isIOS) { return navigate(routes.client.compatibilityV2TryApp()); } navigate(routes.client.compatibilityV2Email()); diff --git a/src/components/CompatibilityV2/pages/TryApp/components/PalmPhoto/index.tsx b/src/components/CompatibilityV2/pages/TryApp/components/PalmPhoto/index.tsx index b0d28dc..886372e 100644 --- a/src/components/CompatibilityV2/pages/TryApp/components/PalmPhoto/index.tsx +++ b/src/components/CompatibilityV2/pages/TryApp/components/PalmPhoto/index.tsx @@ -16,7 +16,7 @@ function PalmPhoto() { const linesRef = useRef<SVGPathElement[]>([]); const fingers = useSelector(selectors.selectCompatibilityV2Fingers); const lines = useSelector(selectors.selectCompatibilityV2Lines); - const [textPositions, setTextPositions] = useState<Array<{ x: number, y: number }>>([]); + // const [textPositions, setTextPositions] = useState<Array<{ x: number, y: number }>>([]); useEffect(() => { if (isImageLoaded && imageRef.current) { @@ -43,63 +43,63 @@ function PalmPhoto() { return line?.getTotalLength(); }; - useEffect(() => { - if (!imageWidth || !imageHeight || !lines.length) return; + // useEffect(() => { + // if (!imageWidth || !imageHeight || !lines.length) return; - const textWidth = 90; - const textHeight = 17; - const padding = 10; - const newPositions: Array<{ x: number, y: number }> = []; + // const textWidth = 90; + // const textHeight = 17; + // const padding = 10; + // const newPositions: Array<{ x: number, y: number }> = []; - lines.forEach((line, index) => { - const points = line.points; - const positions = []; + // lines.forEach((line, index) => { + // const points = line.points; + // const positions = []; - for (let i = 0; i < points.length - 1; i++) { - const x = (points[i].x + points[i + 1].x) / 2; - const y = (points[i].y + points[i + 1].y) / 2; - positions.push({ x, y }); - } + // for (let i = 0; i < points.length - 1; i++) { + // const x = (points[i].x + points[i + 1].x) / 2; + // const y = (points[i].y + points[i + 1].y) / 2; + // positions.push({ x, y }); + // } - positions.unshift({ x: points[0].x, y: points[0].y }); - positions.push({ x: points[points.length - 1].x, y: points[points.length - 1].y }); + // positions.unshift({ x: points[0].x, y: points[0].y }); + // positions.push({ x: points[points.length - 1].x, y: points[points.length - 1].y }); - let positionFound = false; - for (const pos of positions) { - let hasOverlap = false; + // let positionFound = false; + // for (const pos of positions) { + // let hasOverlap = false; - for (const existingPos of newPositions) { - if ( - pos.x * imageWidth + padding < existingPos.x + textWidth && - pos.x * imageWidth + padding + textWidth > existingPos.x && - pos.y * imageHeight - padding < existingPos.y + textHeight && - pos.y * imageHeight - padding + textHeight > existingPos.y - ) { - hasOverlap = true; - break; - } - } + // for (const existingPos of newPositions) { + // if ( + // pos.x * imageWidth + padding < existingPos.x + textWidth && + // pos.x * imageWidth + padding + textWidth > existingPos.x && + // pos.y * imageHeight - padding < existingPos.y + textHeight && + // pos.y * imageHeight - padding + textHeight > existingPos.y + // ) { + // hasOverlap = true; + // break; + // } + // } - if (!hasOverlap) { - newPositions.push({ - x: pos.x * imageWidth + 10, - y: pos.y * imageHeight - 5 - }); - positionFound = true; - break; - } - } + // if (!hasOverlap) { + // newPositions.push({ + // x: pos.x * imageWidth + 10, + // y: pos.y * imageHeight - 5 + // }); + // positionFound = true; + // break; + // } + // } - if (!positionFound) { - newPositions.push({ - x: points[0].x * imageWidth + textWidth + padding * (index + 1), - y: points[0].y * imageHeight - textHeight - padding * (index + 1) - }); - } - }); + // if (!positionFound) { + // newPositions.push({ + // x: points[0].x * imageWidth + textWidth + padding * (index + 1), + // y: points[0].y * imageHeight - textHeight - padding * (index + 1) + // }); + // } + // }); - setTextPositions(newPositions); - }, [lines, imageWidth, imageHeight]); + // setTextPositions(newPositions); + // }, [lines, imageWidth, imageHeight]); return ( <div className={styles.container}> @@ -168,8 +168,11 @@ function PalmPhoto() { {lines.map((line, index) => ( <g key={`line-label-${index}`}> <text - x={textPositions[index]?.x || 0} - y={textPositions[index]?.y || 0} + // x={textPositions[index]?.x || 0} + // y={textPositions[index]?.y || 0} + x={imageWidth - 10} + y={index * 20 + 20} + textAnchor="end" fill="#066FDE" className={`scanned-photo__line-text scanned-photo__line-text_${line?.name}`} > diff --git a/src/components/PalmistryV1/components/PalmsSayAbout/styles.module.scss b/src/components/PalmistryV1/components/PalmsSayAbout/styles.module.scss index 27e1599..e012fc5 100644 --- a/src/components/PalmistryV1/components/PalmsSayAbout/styles.module.scss +++ b/src/components/PalmistryV1/components/PalmsSayAbout/styles.module.scss @@ -23,6 +23,13 @@ gap: 12px; margin-bottom: 12px; + &>img[src$=".svg"] { + shape-rendering: geometricPrecision; + text-rendering: geometricPrecision; + image-rendering: smooth; + -webkit-font-smoothing: antialiased; + } + &:nth-child(even) { flex-direction: row-reverse; } @@ -40,12 +47,12 @@ grid-template-columns: 16px 1fr; gap: 2px; - & > .text { + &>.text { font-size: 16px; line-height: 125%; color: #000; - & > span { + &>span { color: #cc8551; font-weight: 600; font-size: 18px; @@ -55,4 +62,4 @@ .photo-ready { max-width: 90px; -} +} \ No newline at end of file diff --git a/src/components/PalmistryV1/pages/FindHappiness/index.tsx b/src/components/PalmistryV1/pages/FindHappiness/index.tsx index ea5f04a..c30667d 100644 --- a/src/components/PalmistryV1/pages/FindHappiness/index.tsx +++ b/src/components/PalmistryV1/pages/FindHappiness/index.tsx @@ -10,6 +10,7 @@ import { useEffect } from "react"; import { actions } from "@/store"; // import StarSVG from "../../images/SVG/Star"; import { usePreloadImages } from "@/hooks/preload/images"; +import { useMetricABFlags } from "@/services/metric/metricService"; function FindHappiness() { const navigate = useNavigate(); @@ -17,6 +18,10 @@ function FindHappiness() { const location = useLocation(); const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); usePreloadImages(["/male-gender.webp", "/female-gender.webp"]); + const { flags, ready } = useMetricABFlags(); + const imageType = flags?.welcomePageImage?.[0]; + const image = imageType === "v1" ? "/hand-with-lines-v1.png" : "/hand-with-lines.png"; + useEffect(() => { const feature = location.pathname.replace( @@ -28,6 +33,8 @@ function FindHappiness() { } }, [dispatch, location.pathname]); + if (!ready) return null; + return ( <> {/* <div className={styles["blocks-container"]}> @@ -50,8 +57,12 @@ function FindHappiness() { </div> */} <img className={styles.image} - src={`${palmistryV1Prefix}/hand-with-lines.png`} + src={`${palmistryV1Prefix}${image}`} alt="Hand with lines" + style={{ + minHeight: imageType === "v1" ? "auto" : "341px", + maxWidth: imageType === "v1" ? "330px" : "250px" + }} /> <Title variant="h2" className={styles.title}> {translate("/find-your-happiness.title")} diff --git a/src/components/PalmistryV1/pages/ScannedPhoto/index.tsx b/src/components/PalmistryV1/pages/ScannedPhoto/index.tsx index 4eb0bbd..723297b 100644 --- a/src/components/PalmistryV1/pages/ScannedPhoto/index.tsx +++ b/src/components/PalmistryV1/pages/ScannedPhoto/index.tsx @@ -96,7 +96,8 @@ function ScannedPhoto() { }, [currentElementIndex, drawElements.length]); const handleNext = () => { - if (isIOSPath && !!authCode) { + const isIOS = /iPhone/i.test(navigator.userAgent); + if (isIOSPath && !!authCode && isIOS) { return navigate(routes.client.palmistryV1TryApp()); } return navigate(routes.client.palmistryV1Email()) diff --git a/src/components/PalmistryV1/pages/TryApp/components/PalmPhoto/index.tsx b/src/components/PalmistryV1/pages/TryApp/components/PalmPhoto/index.tsx index 92bc497..60c2e2b 100644 --- a/src/components/PalmistryV1/pages/TryApp/components/PalmPhoto/index.tsx +++ b/src/components/PalmistryV1/pages/TryApp/components/PalmPhoto/index.tsx @@ -16,7 +16,7 @@ function PalmPhoto() { const linesRef = useRef<SVGPathElement[]>([]); const fingers = useSelector(selectors.selectPalmistryFingers); const lines = useSelector(selectors.selectPalmistryLines); - const [textPositions, setTextPositions] = useState<Array<{ x: number, y: number }>>([]); + // const [textPositions, setTextPositions] = useState<Array<{ x: number, y: number }>>([]); useEffect(() => { if (isImageLoaded && imageRef.current) { @@ -43,63 +43,63 @@ function PalmPhoto() { return line?.getTotalLength(); }; - useEffect(() => { - if (!imageWidth || !imageHeight || !lines.length) return; + // useEffect(() => { + // if (!imageWidth || !imageHeight || !lines.length) return; - const textWidth = 90; - const textHeight = 17; - const padding = 10; - const newPositions: Array<{ x: number, y: number }> = []; + // const textWidth = 90; + // const textHeight = 17; + // const padding = 10; + // const newPositions: Array<{ x: number, y: number }> = []; - lines.forEach((line, index) => { - const points = line.points; - const positions = []; + // lines.forEach((line, index) => { + // const points = line.points; + // const positions = []; - for (let i = 0; i < points.length - 1; i++) { - const x = (points[i].x + points[i + 1].x) / 2; - const y = (points[i].y + points[i + 1].y) / 2; - positions.push({ x, y }); - } + // for (let i = 0; i < points.length - 1; i++) { + // const x = (points[i].x + points[i + 1].x) / 2; + // const y = (points[i].y + points[i + 1].y) / 2; + // positions.push({ x, y }); + // } - positions.unshift({ x: points[0].x, y: points[0].y }); - positions.push({ x: points[points.length - 1].x, y: points[points.length - 1].y }); + // positions.unshift({ x: points[0].x, y: points[0].y }); + // positions.push({ x: points[points.length - 1].x, y: points[points.length - 1].y }); - let positionFound = false; - for (const pos of positions) { - let hasOverlap = false; + // let positionFound = false; + // for (const pos of positions) { + // let hasOverlap = false; - for (const existingPos of newPositions) { - if ( - pos.x * imageWidth + padding < existingPos.x + textWidth && - pos.x * imageWidth + padding + textWidth > existingPos.x && - pos.y * imageHeight - padding < existingPos.y + textHeight && - pos.y * imageHeight - padding + textHeight > existingPos.y - ) { - hasOverlap = true; - break; - } - } + // for (const existingPos of newPositions) { + // if ( + // pos.x * imageWidth + padding < existingPos.x + textWidth && + // pos.x * imageWidth + padding + textWidth > existingPos.x && + // pos.y * imageHeight - padding < existingPos.y + textHeight && + // pos.y * imageHeight - padding + textHeight > existingPos.y + // ) { + // hasOverlap = true; + // break; + // } + // } - if (!hasOverlap) { - newPositions.push({ - x: pos.x * imageWidth + 10, - y: pos.y * imageHeight - 5 - }); - positionFound = true; - break; - } - } + // if (!hasOverlap) { + // newPositions.push({ + // x: pos.x * imageWidth + 10, + // y: pos.y * imageHeight - 5 + // }); + // positionFound = true; + // break; + // } + // } - if (!positionFound) { - newPositions.push({ - x: points[0].x * imageWidth + textWidth + padding * (index + 1), - y: points[0].y * imageHeight - textHeight - padding * (index + 1) - }); - } - }); + // if (!positionFound) { + // newPositions.push({ + // x: points[0].x * imageWidth + textWidth + padding * (index + 1), + // y: points[0].y * imageHeight - textHeight - padding * (index + 1) + // }); + // } + // }); - setTextPositions(newPositions); - }, [lines, imageWidth, imageHeight]); + // setTextPositions(newPositions); + // }, [lines, imageWidth, imageHeight]); return ( <div className={styles.container}> @@ -168,8 +168,11 @@ function PalmPhoto() { {lines.map((line, index) => ( <g key={`line-label-${index}`}> <text - x={textPositions[index]?.x || 0} - y={textPositions[index]?.y || 0} + // x={textPositions[index]?.x || 0} + // y={textPositions[index]?.y || 0} + x={imageWidth - 10} + y={index * 20 + 20} + textAnchor="end" fill="#066FDE" className={`scanned-photo__line-text scanned-photo__line-text_${line?.name}`} > diff --git a/src/components/palmistry/scanned-photo/scanned-photo.css b/src/components/palmistry/scanned-photo/scanned-photo.css index 3583177..74f228e 100644 --- a/src/components/palmistry/scanned-photo/scanned-photo.css +++ b/src/components/palmistry/scanned-photo/scanned-photo.css @@ -94,21 +94,21 @@ } .scanned-photo__line_heart { - stroke: #f8d90f; + stroke: #EE463A; /* animation-delay: 4.5s; */ } .scanned-photo__line_life { - stroke: #e51c39; + stroke: #024AD6; } .scanned-photo__line_head { - stroke: #00d114; + stroke: #52EF67; /* animation-delay: 1.5s; */ } .scanned-photo__line_fate { - stroke: #05ced8; + stroke: #EF45DC; /* animation-delay: 3s; */ } @@ -185,24 +185,25 @@ opacity: 0; animation: fadeIn 0.3s forwards; stroke: #000; + stroke-width: 0.6px; } .scanned-photo__line-text_heart { - fill: #f8d90f; + fill: #EE463A; /* animation-delay: 4.5s; */ } .scanned-photo__line-text_life { - fill: #e51c39; + fill: #024AD6; } .scanned-photo__line-text_head { - fill: #00d114; + fill: #52EF67; /* animation-delay: 1.5s; */ } .scanned-photo__line-text_fate { - fill: #05ced8; + fill: #EF45DC; /* animation-delay: 3s; */ } diff --git a/src/services/metric/metricService.ts b/src/services/metric/metricService.ts index 6256d28..acc2afc 100644 --- a/src/services/metric/metricService.ts +++ b/src/services/metric/metricService.ts @@ -209,6 +209,7 @@ type TABFlags = { palmOnPayment: "graphical" | "real"; genderPageType: "v1" | "v2"; trialChoicePageType: "v1" | "v2"; + welcomePageImage: "v1" | "v2"; } export const useMetricABFlags = () => {