Merge branch 'develop' into 'main'

Main

See merge request witapp/aura-webapp!212

src/api/resources/User.ts

@@ -173,6 +173,7 @@ export interface ICreateAuthorizePayload {
   partner?: Partial<Exclude<ICreateAuthorizeUser, "relationship_status">>;
   sign?: boolean;
   signDate?: string;
+  feature?: string;
 }
 
 export interface ICreateAuthorizeResponse {

src/components/pages/ABDesign/v1/pages/Gender/index.tsx

@@ -6,7 +6,7 @@ import routes from "@/routes";
 import { actions, selectors } from "@/store";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import Header from "../../components/Header";
@@ -22,6 +22,7 @@ interface IGenderPageProps {
 function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const location = useLocation();
   const { targetId } = useParams();
   const { width: pageWidth, elementRef: pageRef } = useDynamicSize({});
   const [selectedGender, setSelectedGender] = useState<Gender | null>(null);
@@ -30,9 +31,11 @@ function GenderPage({ productKey }: IGenderPageProps): JSX.Element {
   );
 
   useEffect(() => {
+    const feature = location.pathname.replace("/v1/gender/", "");
     const isShowTryApp = targetId === "i";
     dispatch(actions.userConfig.addIsShowTryApp(isShowTryApp));
-  }, [dispatch, targetId]);
+    dispatch(actions.userConfig.setFeature(feature.includes("/v1/gender") ? "" : feature));
+  }, [dispatch, location.pathname, targetId]);
 
   useEffect(() => {
     if (privacyPolicyChecked && selectedGender) {

src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx

@@ -42,7 +42,7 @@ function Satisfied() {
     <section
       className={`${styles.page} page`}
       style={{
-        backgroundImage: `url(/satisfied-${satisfied}.png)`,
+        backgroundImage: `url(/satisfied-${satisfied}.webp)`,
       }}
     >
       <Header
@@ -50,12 +50,13 @@ function Satisfied() {
         isBackButtonVisible={false}
       />
       {satisfied === "yes" && (
-        <div
-          style={{
-            width: "100%",
-            aspectRatio: "337 / 406",
-          }}
-        >
+        // <div
+        //   style={{
+        //     width: "100%",
+        //     aspectRatio: "337 / 406",
+        //   }}
+        // >
+        <>
           {animationSun && (
             <DotLottieReact
               className={`${styles["lottie-animation"]} ym-hide-content`}
@@ -64,7 +65,8 @@ function Satisfied() {
               loop={false}
             />
           )}
-        </div>
+        </>
+        // </div>
       )}
       {satisfied === "no" && (
         <div

src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css

@@ -75,3 +75,8 @@
   background-color: #fff;
   color: #0f1323;
 }
+
+.lottie-animation {
+  width: 100%;
+  aspect-ratio: 337 / 406;
+}

src/hooks/authentication/use-authentication.ts

@@ -15,6 +15,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 export const useAuthentication = () => {
     const api = useApi();
+    const feature = useSelector(selectors.selectFeature)
     const { i18n } = useTranslation();
     const dispatch = useDispatch();
     const [isLoading, setIsLoading] = useState(false);
@@ -98,7 +99,8 @@ export const useAuthentication = () => {
                 },
             },
             sign: checked,
-            signDate: dateOfCheck
+            signDate: dateOfCheck,
+            feature
         })
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [

src/routerComponents/ABDesign/v1/index.tsx

@@ -38,7 +38,7 @@ function ABDesignV1Routes() {
     <Routes>
       <Route element={<LayoutABDesignV1 />}>
         <Route path={routes.client.genderV1()} element={<GenderPage />}>
-          <Route path=":targetId" element={<GenderPage />} />
+          <Route path=":targetId*" element={<GenderPage />} />
         </Route>
         <Route
           path={routes.client.questionnaireV1()}

src/store/index.ts

@@ -48,6 +48,7 @@ import userConfig, {
   actions as userConfigActions,
   selectUserDeviceType,
   selectIsShowTryApp,
+  selectFeature,
   selectIsForceShortPath,
 } from "./userConfig";
 import compatibilities, {
@@ -121,6 +122,7 @@ export const selectors = {
   selectQuestionnaire,
   selectUserDeviceType,
   selectIsShowTryApp,
+  selectFeature,
   selectIsForceShortPath,
   selectOpenAiToken,
   selectPalmistryLines,

src/store/userConfig.ts

@@ -10,12 +10,14 @@ interface IUserConfig {
   deviceType: EUserDeviceType;
   isShowTryApp: boolean;
   isForceShortPath: boolean;
+  feature: string;
 }
 
 const initialState: IUserConfig = {
   deviceType: EUserDeviceType.ios,
   isShowTryApp: false,
   isForceShortPath: false,
+  feature: "",
 };
 
 const userConfigSlice = createSlice({
@@ -37,6 +39,10 @@ const userConfigSlice = createSlice({
       state.isForceShortPath = action.payload;
       return state;
     },
+    setFeature(state, action: PayloadAction<string>) {
+      state.feature = action.payload;
+      return state;
+    },
   },
   extraReducers: (builder) => builder.addCase("reset", () => initialState),
 });
@@ -54,4 +60,8 @@ export const selectIsForceShortPath = createSelector(
   (state: { userConfig: IUserConfig }) => state.userConfig.isForceShortPath,
   (userConfig) => userConfig
 );
+export const selectFeature = createSelector(
+  (state: { userConfig: IUserConfig }) => state.userConfig.feature,
+  (userConfig) => userConfig
+);
 export default userConfigSlice.reducer;