Merge pull request #381 from topcoder-platform/temp-reskin

improvement(reskin) : qa part 4 f2f

Author: dedywahyudi

src-ts/lib/work-provider/work-functions/work-factory/work.factory.ts

@@ -5,6 +5,8 @@ import * as DesignPrices from '../../../../../src/constants'
 import * as ProblemPrices from '../../../../../src/constants/products/DataAdvisory'
 import * as DataPrices from '../../../../../src/constants/products/DataExploration'
 import * as FindDataPrices from '../../../../../src/constants/products/FindMeData'
+import * as WebsitePrices from '../../../../../src/constants/products/WebsiteDesign'
+
 import { Challenge, ChallengeMetadata } from '../work-store'
 
 import { ChallengeStatus } from './challenge-status.enum'
@@ -50,11 +52,8 @@ function getCost(challenge: Challenge, type: WorkType): number | undefined {
             return DataPrices.PROMOTIONAL_PRODUCT_PRICE || DataPrices.BASE_PRODUCT_PRICE
 
         case WorkType.design:
-            const pageCount: number = getCountFromString(findMetadata(challenge, 'basicInfo.numberOfPages')?.value)
-            const deviceCount: number = getCountFromString(findMetadata(challenge, 'basicInfo.numberOfDevices')?.value)
-            return DesignPrices.BASE_PRODUCT_PRICE +
-                pageCount * DesignPrices.PER_PAGE_COST +
-                pageCount * (deviceCount - 1) * DesignPrices.PER_PAGE_COST
+            return WebsitePrices.BASE_PRODUCT_PRICE
+
 
         case WorkType.findData:
             return FindDataPrices.PROMOTIONAL_PRODUCT_PRICE || FindDataPrices.BASE_PRODUCT_PRICE

src/hooks/useCheckMobileScreen.js

@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from "react";
+
+const useCheckMobileScreen = () => {
+  const [width, setWidth] = useState(window.innerWidth);
+  const handleWindowSizeChange = () => {
+    setWidth(window.innerWidth);
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", handleWindowSizeChange);
+    return () => {
+      window.removeEventListener("resize", handleWindowSizeChange);
+    };
+  }, []);
+
+  return width <= 768;
+};
+
+export default useCheckMobileScreen;

src/routes/Products/components/BasicInfo/styles.module.scss

@@ -1,11 +1,16 @@
-@import "styles/include";
+@import '../../../../../src-ts/lib/styles';
 
 .footerContent {
   display: flex;
   width: 100%;
   flex-direction: row;
   justify-content: space-between;
 
+  @include ltemd {
+    flex-direction: column;
+    gap: 16px;
+  }
+
   .footer-right {
     display: flex;
     gap: 16px;

src/routes/Products/components/StyleOptionsModal/index.jsx

@@ -10,12 +10,15 @@ import DislikeIcon from "../../../../assets/images/thumbsdown.svg";
 import PageDivider from "../../../../components/PageDivider"
 import "./styles.module.scss";
 import Modal from "components/Modal"
+import useCheckMobileScreen from "../../../../hooks/useCheckMobileScreen";
 
 const StylesOptionsModal = ({ onDismiss, style, likes = [], dislikes = [], onLike, onDislike }) => {
+  const isMobile = useCheckMobileScreen();
+  const modalWidth = isMobile ? { fullWidth: true } : { halfWidth: true };
   return (
     <Modal
       show={true}
-      halfWidth
+      {...modalWidth}
       handleClose={onDismiss}
     >
       <div styleName="styleWrapper">

src/routes/Products/components/StyleOptionsModal/styles.module.scss

@@ -1,4 +1,5 @@
 @import "styles/include";
+@import '../../../../../src-ts/lib/styles';
 
 .styleWrapper {
   min-width:500px;
@@ -22,8 +23,10 @@
     .preview {
       width: 100%;
       height: 450px;
-      @include mobile {
-        height: 200px;
+      max-height: calc(100vh - 450px);
+
+      @include ltemd {
+        max-height: calc(100vh - 550px);
       }
     }