Skip to content

Commit

Permalink
Merge pull request leandrowd#50 from the-container-store/feature/1801…
Browse files Browse the repository at this point in the history
…33335/view-q&a

[#180133335] | View Question and Answer Feature implemented
  • Loading branch information
PradeepChada authored Nov 9, 2021
2 parents 4d90807 + 1d26198 commit a4c6761
Show file tree
Hide file tree
Showing 18 changed files with 687 additions and 53 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.4",
"moment": "^2.29.1",
"consul": "^0.40.0",
"express": "^4.17.1",
"properties-reader": "^0.3.1",
Expand Down
6 changes: 6 additions & 0 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import HomeContainer from './pages/home/HomePage';
import ProductDetails from './pages/product-details/ProductDetails';
import SearchContainer from './pages/sku-search/SearchPage';
import ProductInfo from './pages/product-info/ProductInfo';
import QuestionAndAnswer from './pages/sku-q&a/QuestionAndAnswer';
import ProductVariants from './pages/product-variants/ProductVariants';
import store from './store';
import Header from './components/header/Header';
Expand Down Expand Up @@ -47,6 +48,11 @@ const App = () => {
path='/product-variants/:id/:defaultProduct'
component={ProductVariants}
/>
<Route
exact
path='/sku-info/q&a/:id'
component={QuestionAndAnswer}
/>
</Switch>
</StyledBody>
</StoreProvider>
Expand Down
91 changes: 91 additions & 0 deletions src/__tests__/pages/sku-q&a/q&aTitle/QATile.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { render, screen } from '@testing-library/react';
import QATile from '../../../../pages/sku-q&a/q&aTile/QATile';
import moment from 'moment';
const mockData = {
ugc_id: 380507831,
question_id: '8123156',
details: {
nickname: 'migb',
created_date: 1629812604000,
text: 'How do you clean these before reusing?',
location: 'Ashtabula, OH',
product_page_id: '11014345',
is_seeded: false,
},
answer: [
{
ugc_id: 380510586,
answer_id: '7169235',
details: {
nickname: 'beneel',
location: 'USA',
text: 'These bags can hand-washing.',
is_verified: true,
is_expert: false,
author_type: 'COMMUNITY',
created_date: 1631382272000,
},
metrics: {
helpful_votes: 0,
not_helpful_votes: 0,
},
},
],
answer_count: 2,
};
const askerName = mockData.details.nickname;
const askerTime = moment(mockData.details.created_date).fromNow();
const question = mockData.details.text;
const answererName = mockData.answer[0].details.nickname;
const answererTime = moment(mockData.answer[0].details.created_date).fromNow();
const answer = mockData.answer[0].details.text;
let askerNameText;
let questionTimeText;
let questionText;
let answererNameText;
let answerTimeText;
let answerText;
describe('Testing Search Bar component', () => {
test('inital Render Condition', () => {
render(<QATile questionInfo={mockData} i={0} />);

askerNameText = screen.getByText(askerName, {
exact: false,
});
expect(askerNameText).toHaveTextContent(askerName);

questionTimeText = screen.getByText(askerTime);
expect(questionTimeText).toHaveTextContent(askerTime);

questionText = screen.getByText(question, {
exact: false,
});
expect(questionText).toHaveTextContent(question);

answererNameText = screen.getByText(answererName, {
exact: false,
});
expect(answererNameText).toHaveTextContent(answererName);

answerTimeText = screen.getByText(answererTime);
expect(answerTimeText).toHaveTextContent(answererTime);

answerText = screen.getByText(answer, {
exact: false,
});
expect(answerText).toHaveTextContent(answer);
});

test('view more answer text should be displayed when multiple answer will be available', () => {
render(<QATile questionInfo={mockData} i={0} />);
const viewMoreAnswerText = screen.getByText(
`View ${parseInt(mockData.answer.length - 1)} More Answers`,
{
exact: false,
}
);
expect(viewMoreAnswerText).toHaveTextContent(
`View ${parseInt(mockData.answer.length - 1)} More Answers`
);
});
});
28 changes: 14 additions & 14 deletions src/config.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import { fetchAppConfig } from "./services/config.service";
import { fetchAppConfig } from './services/config.service';

export const getConfig = key => global.appConfig[key]
export const getConfig = (key) => global.appConfig[key];

const setConfig = data => {
global.appConfig = data;
}
const setConfig = (data) => {
global.appConfig = data;
};

export const initializeAppConfig = () => {
return fetchAppConfig()
.then(res=>{
setConfig(res?.data);
return res.data;
return fetchAppConfig()
.then((res) => {
setConfig(res?.data);
return res.data;
})
.catch(err => {
console.log("FAILED TO FETCH APP_CONFIG");
throw err;
})
}
.catch((err) => {
console.log('FAILED TO FETCH APP_CONFIG');
throw err;
});
};

export default global.appConfig;
14 changes: 10 additions & 4 deletions src/pages/product-details/ProductDetails.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const ProductDetails = ({ history, match }) => {
if (skuData?.id !== Number(match?.params?.id)) {
dispatch(fetchSkuDetails(match?.params?.id, storeId));
}
}, [dispatch, match?.params?.id, skuData,storeId]);
}, [dispatch, match?.params?.id, skuData, storeId]);

const toggleDrawer = (open) => {
open && dispatch(fetchStoreAvailability(match?.params?.id, storeId));
Expand Down Expand Up @@ -175,7 +175,7 @@ const ProductDetails = ({ history, match }) => {
<ProductCarousel
images={
skuData?.mediaList
?.filter((o) => o.name === 'SKU_IMAGE')
?.filter((o) => o.name === 'large')
?.map((o) => `${ASSET_URL}${o.url}`) || []
}
/>
Expand All @@ -189,8 +189,8 @@ const ProductDetails = ({ history, match }) => {
Was ${skuPriceDetails?.price}
</Typography>
<Typography className='savings'>
Save ${skuPriceDetails?.maxSavings} ({skuPriceDetails?.maxPercentOff}
% off)
Save ${skuPriceDetails?.maxSavings} (
{skuPriceDetails?.maxPercentOff}% off)
</Typography>
</Box>
</SalePriceWrapper>
Expand Down Expand Up @@ -307,6 +307,12 @@ const ProductDetails = ({ history, match }) => {
<Typography>Additional Sizes & Colors</Typography>
<ChevronRight />
</InfoTile>
<InfoTile
onClick={() => history.push(`/sku-info/q&a/${match?.params?.id}`)}
>
<Typography>Q&A</Typography>
<ChevronRight />
</InfoTile>
</Box>
</PageContainer>
);
Expand Down
66 changes: 33 additions & 33 deletions src/pages/product-variants/ProductVariants.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import {
PageContainer,
Title,
ErrorWrapper,
NoContent
NoContent,
} from './ProductVariants.styles';
import { getSkuPrice, getQtyInStore } from './../../utils/skuHelpers';
import { getQtyInStore, getSkuPriceDetails } from './../../utils/skuHelpers';
import SkuError from '../../components/sku-error/SkuError';
import { getConfig } from './../../config';
import { skuErrorMessages } from '../../constants/errorMessages';
Expand Down Expand Up @@ -51,17 +51,19 @@ const ProductVariants = ({ history, match }) => {

useEffect(() => {
dispatch(fetchSkuVariants(match?.params?.defaultProduct, storeId));
}, [dispatch, match?.params?.defaultProduct,storeId]);
}, [dispatch, match?.params?.defaultProduct, storeId]);

useEffect(() => {
if (skuData?.id !== Number(match?.params?.id)) dispatch(fetchSkuDetails(match?.params?.id, storeId, false));
}, [dispatch, match?.params?.id, skuData,storeId]);
if (skuData?.id !== Number(match?.params?.id)) {
dispatch(fetchSkuDetails(match?.params?.id, storeId, false));
}
}, [dispatch, match?.params?.id, skuData, storeId]);

const getSkuData = (item) => {
const ASSET_URL = getConfig('asset_base_url');
const skuInfo = {
image: `${ASSET_URL}${item.mediaList?.[0]?.url}`,
price: getSkuPrice(item?.productPrice, 'maxRetailPrice'),
skuPriceDetails: getSkuPriceDetails(skuData?.skuPrices),
name: item.name,
qtyAvailableAtStore: getQtyInStore(
skuAvailability?.inventoryEstimates,
Expand Down Expand Up @@ -92,34 +94,32 @@ const ProductVariants = ({ history, match }) => {
ratingCount={10}
/>
)}
<Title variant='h6' noContent={variants?.length === 0}>
Additional Sizes & Colors{' '}
{variants?.length ? `(${variants.length})` : null}
</Title>
<Title variant='h6' noContent={variants?.length === 0}>
Additional Sizes & Colors{' '}
{variants?.length ? `(${variants.length})` : null}
</Title>
{/* <Wrapper> */}
{
loading ? (
Array(2)
.fill(null)
.map((_, i) => <SkuTile key={`key${i}`} loading={true} />)
) : variants?.length ? (
variants.map((item, i) => {
const skuInfo = getSkuData(item);
return (
<SkuTile
key={`key${i}`}
skuInfo={skuInfo}
skuAvailabilityLoading={skuAvailabilityLoading}
skuAvailabilityError={skuAvailabilityError}
handleClick={(id) => history.push(`/product-details/${id}`)}
/>
);
})
) : (
<NoContent >{skuErrorMessages.productVariants.title}</NoContent>
// <SkuError {...skuErrorMessages.productVariants} />
)
}
{loading ? (
Array(2)
.fill(null)
.map((_, i) => <SkuTile key={`key${i}`} loading={true} />)
) : variants?.length ? (
variants.map((item, i) => {
const skuInfo = getSkuData(item);
return (
<SkuTile
key={`key${i}`}
skuInfo={skuInfo}
skuAvailabilityLoading={skuAvailabilityLoading}
skuAvailabilityError={skuAvailabilityError}
handleClick={(id) => history.push(`/product-details/${id}`)}
/>
);
})
) : (
<NoContent>{skuErrorMessages.productVariants.title}</NoContent>
// <SkuError {...skuErrorMessages.productVariants} />
)}
{/* </Wrapper> */}
</PageContainer>
);
Expand Down
Loading

0 comments on commit a4c6761

Please sign in to comment.