Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Initial commit of Salesforce Commerce Cloud app. #3633

Merged
merged 2 commits into from
Jun 1, 2023
Merged

Initial commit of Salesforce Commerce Cloud app. #3633

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cddb1b4
Initial commit of Salesforce Commerce Cloud app.
jgrahamdev May 31, 2023
02f5e0e
Fix prettier code format issues
jsdalton Jun 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Fix prettier code format issues
  • Loading branch information
@jsdalton
jsdalton committed Jun 1, 2023
commit 02f5e0e4262d37d6e477f4cd91b75fc06be22be5
6 changes: 2 additions & 4 deletions apps/salesforce-commerce-cloud/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,8 @@ const App = () => {
}, [sdk.location]);

return (
<QueryClientProvider client={queryClient}>
{ Component && <Component /> }
</QueryClientProvider>
)
<QueryClientProvider client={queryClient}>{Component && <Component />}</QueryClientProvider>
);
};

export default App;
31 changes: 16 additions & 15 deletions apps/salesforce-commerce-cloud/src/components/dialog/CategoryPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
import React from 'react'
import React from 'react';

import { Text, Flex } from '@contentful/f36-components'
import { Text, Flex } from '@contentful/f36-components';

const CategoryPreview = (props:{category: any}) => {
const { category } = props
const catalogInfo = category.paths.find((path:any) => category.catalogId === path.id)
const CategoryPreview = (props: { category: any }) => {
const { category } = props;
const catalogInfo = category.paths.find((path: any) => category.catalogId === path.id);

return (
<>
<Flex flexDirection="column" marginLeft="spacingS">
<Text as="div">
<Text as="span" fontWeight="fontWeightDemiBold">{category.name?.default}</Text> (Catalog: {catalogInfo?.name?.default ? catalogInfo.name.default : category.catalogId})
<Text as="div">
<Text as="span" fontWeight="fontWeightDemiBold">
{category.name?.default}
</Text>{' '}
(Catalog: {catalogInfo?.name?.default ? catalogInfo.name.default : category.catalogId})
</Text>
{category.pageDescription?.default &&
<Text as="div">
{category.pageDescription.default}
</Text>
}
</Flex>
{category.pageDescription?.default && (
<Text as="div">{category.pageDescription.default}</Text>
)}
</Flex>
</>
);
}
};

export default CategoryPreview
export default CategoryPreview;
141 changes: 77 additions & 64 deletions apps/salesforce-commerce-cloud/src/components/dialog/CategorySearchResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,83 @@
import React from 'react'
import { css } from '@emotion/react'
import React from 'react';
import { css } from '@emotion/react';

import tokens from '@contentful/f36-tokens'
import { Box, Card, Flex, Text } from '@contentful/f36-components'
import { TagsIcon } from '@contentful/f36-icons'

import { SearchResultsProps, SearchResultProps, height, stickyHeaderBreakpoint, headerHeight } from './SearchPicker'
import tokens from '@contentful/f36-tokens';
import { Box, Card, Flex, Text } from '@contentful/f36-components';
import { TagsIcon } from '@contentful/f36-icons';

const CategorySearchResults = (props:SearchResultsProps) => {
const resultsWrapperStyle = css`
max-height: ${height}px;
padding: ${tokens.spacingL};
padding-bottom: 0;
@media screen and (min-height: ${stickyHeaderBreakpoint}px;) {
padding-top: ${tokens.spacingL + headerHeight}px;
}
`

return (
<Box as="section" css={resultsWrapperStyle} >
{props.searchResults.map((result) => (
<CategorySearchResult
key={`${result.catalogId}:${result.id}`}
fieldType={props.fieldType}
onItemSelect={props.onItemSelect}
selected={props.selectedItems}
result={result}
/>
))}
</Box>
)
}

const CategorySearchResult = (props:SearchResultProps) => {
const { result, fieldType, onItemSelect, selected } = props
const resultId = fieldType === 'product' ? result.id : `${result.catalogId}:${result.id}`

const categoryStyle = css`
margin-left: ${tokens.spacingXs}
`
import {
SearchResultsProps,
SearchResultProps,
height,
stickyHeaderBreakpoint,
headerHeight,
} from './SearchPicker';

return (
<Card
id={resultId}
padding="none"
marginBottom="spacingS"
onClick={() => onItemSelect(resultId)}
isSelected={selected?.includes(resultId)}
>
<Flex flexDirection="column">
<Flex alignItems="center" padding="spacingXs">
<TagsIcon />
<Flex flexDirection="column" marginLeft="spacingS">
<Text as="div" fontWeight="fontWeightDemiBold" fontSize='fontSizeM'>
{result.name.default}
</Text>
<Text as="div" fontWeight="fontWeightMedium" fontSize='fontSizeS' fontColor='gray600'>
ID: {result.id}
<Box as="span" css={css`margin-left: ${tokens.spacingXs};`}>|</Box>
<Box as="span" css={categoryStyle}>Catalog: {result.name?.default ? result.name.default : result.catalogId}</Box>
</Text>
</Flex>
const CategorySearchResults = (props: SearchResultsProps) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel it would be good to destructure the props here for consistency

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel it would be good to destructure the props here for consistency

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel it would be good to destructure the props here for consistency

const resultsWrapperStyle = css`
max-height: ${height}px;
padding: ${tokens.spacingL};
padding-bottom: 0;
@media screen and (min-height: ${stickyHeaderBreakpoint}px;) {
padding-top: ${tokens.spacingL + headerHeight}px;
}
`;

return (
<Box as="section" css={resultsWrapperStyle}>
{props.searchResults.map((result) => (
<CategorySearchResult
key={`${result.catalogId}:${result.id}`}
fieldType={props.fieldType}
onItemSelect={props.onItemSelect}
selected={props.selectedItems}
result={result}
/>
))}
</Box>
);
};

const CategorySearchResult = (props: SearchResultProps) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CategorySearchResult could be broken out into it's own file just to keep this file a bit more focused

const { result, fieldType, onItemSelect, selected } = props;
const resultId = fieldType === 'product' ? result.id : `${result.catalogId}:${result.id}`;

const categoryStyle = css`
margin-left: ${tokens.spacingXs};
`;

return (
<Card
id={resultId}
padding="none"
marginBottom="spacingS"
onClick={() => onItemSelect(resultId)}
isSelected={selected?.includes(resultId)}>
<Flex flexDirection="column">
<Flex alignItems="center" padding="spacingXs">
<TagsIcon />
<Flex flexDirection="column" marginLeft="spacingS">
<Text as="div" fontWeight="fontWeightDemiBold" fontSize="fontSizeM">
{result.name.default}
</Text>
<Text as="div" fontWeight="fontWeightMedium" fontSize="fontSizeS" fontColor="gray600">
ID: {result.id}
<Box
as="span"
css={css`
margin-left: ${tokens.spacingXs};
`}>
|
</Box>
<Box as="span" css={categoryStyle}>
Catalog: {result.name?.default ? result.name.default : result.catalogId}
</Box>
</Text>
</Flex>
</Flex>
</Card>
)
}
</Flex>
</Card>
);
};

export default CategorySearchResults
export default CategorySearchResults;
33 changes: 17 additions & 16 deletions apps/salesforce-commerce-cloud/src/components/dialog/ProductPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,31 @@ import React from 'react';

import { Flex, Text } from '@contentful/f36-components';

const ProductPreview = (props:{product: any}) => {
const descriptionLength = 178
const { product } = props
const ProductPreview = (props: { product: any }) => {
const descriptionLength = 178;
const { product } = props;

let description = "Description"
let description = 'Description';
if (product.shortDescription.default) {
description = product.shortDescription.default.markup.length > descriptionLength ?
`${product.shortDescription.default.markup.substring(0, descriptionLength)}...` :
product.shortDescription.default.markup
description =
product.shortDescription.default.markup.length > descriptionLength
? `${product.shortDescription.default.markup.substring(0, descriptionLength)}...`
: product.shortDescription.default.markup;
}

return (
<>
{product.image.absUrl &&
{product.image.absUrl && (
<img src={product.image.absUrl} alt={product.image.alt.default} height="75" width="75" />
}
)}
<Flex flexDirection="column" marginLeft="spacingS">
<Text as="div" fontWeight="fontWeightDemiBold">{product.name.default} (ID: {product.id})</Text>
<Text as="div">
{description}
</Text>
</Flex>
<Text as="div" fontWeight="fontWeightDemiBold">
{product.name.default} (ID: {product.id})
</Text>
<Text as="div">{description}</Text>
</Flex>
</>
);
}
};

export default ProductPreview
export default ProductPreview;
Loading