Gift card customer page #1520

Cloud11PL · 2021-10-19T10:19:08Z

I want to merge this change because I want to add gift cards card in customer page to the gift card feature branch.

PR intended to be tested with API branch:

Screenshots

Pull Request Checklist

This code contains UI changes
All visible strings are translated with proper context including data-formatting
Attributes [data-test-id] are added for new elements
Changes are mentioned in the changelog
The changes are tested in different browsers and in light/dark mode

Test environment config

API_URI=https://master.staging.saleor.cloud/graphql/

bmigirl · 2021-10-20T07:11:41Z

src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard.tsx

+ <>
+ <Card>
+ <CardTitle
+ title="Gift Cards"


Move messages to locale messages files. I think this title can be reused from either section names or other existing card

bmigirl · 2021-10-20T07:12:09Z

src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard.tsx

+ refetchQueries={[CUSTOMER_GIFT_CARD_LIST_QUERY]}
+ initialCustomer={{
+ email: customer?.email,
+ name: getFullName({


Suggested change

name: getFullName({

name: getFullName(customer)

bmigirl · 2021-10-20T07:17:22Z

src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCardListItem.tsx

+ </div>
+ <GiftCardDeleteDialogContent
+ singleDeletion
+ giftCard={giftCard as ExtendedGiftCard<GiftCardDetails_giftCard>}


I think it may be a better solution to change the GiftCardDeleteDialogContent gift card type to be extendable instead of mapping it here

bmigirl · 2021-10-20T07:19:46Z

src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard.tsx

+ }
+ }
+ });
+ const [openCreateDialog, setOpenCreateDialog] = useState(false);


Move to like 22, we usually define useState at the very beginning of the component body

bmigirl · 2021-10-20T07:21:13Z

src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCardListItem.tsx

+}) => {
+ const intl = useIntl();
+ const classes = useListWrapperStyles();
+ const [, setIsLoading] = useState(false);


Why set a state that is not being used later?

bmigirl · 2021-10-20T07:23:21Z

src/giftCards/components/GiftCardCustomerCard/utils.ts

+
+import { CustomerGiftCardList_giftCards_edges_node } from "./types/CustomerGiftCardList";
+
+export const getGiftCardDisplayCode = (


Gift card display code is a value from api, check out in gift card list queries

@bmigirl This will be removed once backend removes "****" from displayCode.

bmigirl · 2021-10-20T07:24:20Z

src/giftCards/components/GiftCardStatusChip/GiftCardStatusChip.tsx

+ const { isExpired, isActive } = giftCard;
+ const intl = useIntl();
+
+ const getGiftCardData = () => {


getStatusChipData?

bmigirl · 2021-10-20T07:25:04Z

src/components/CardMenu/CardMenu.tsx

+ {menuItem.loading ? (
+ <>
+ <Typography variant="subtitle1">
+ <FormattedMessage defaultMessage="working..." />


Locale messages file

bmigirl · 2021-10-20T07:26:02Z

src/components/CardMenu/CardMenu.tsx

+ <CircularProgress size={24} />
+ </>
+ ) : (
+ menuItem.label


Shouldn't this be wrapper in typography as well? Since it's wrapped in a div and not a string passed directly to MenuItem

bmigirl · 2021-10-20T07:27:43Z

src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard.tsx

+import { useCardActionsStyles } from "./styles";
+
+const CustomerGiftCardsCard: React.FC = () => {
+ const customerDetails = useContext(CustomerDetailsContext);


Make a hook for that to not useContext directly here

jwm0 · 2021-10-21T09:24:27Z

src/giftCards/components/GiftCardCustomerCard/hooks/useCustomerDetails.ts

+import { CustomerDetailsContext } from "@saleor/customers/providers/CustomerDetailsProvider";
+import { useContext } from "react";
+
+export const useCustomerDetails = () => {


This hook should be in the same directory as CustomerDetailsProvider

dominik-zeglen · 2021-10-21T07:47:45Z

src/components/CardMenu/CardMenu.tsx

+ width: "100%",
+ display: "grid",
+ gridTemplateColumns: "1fr 24px",
+ gap: "16px",


Suggested change

gap: "16px",

gap: theme.spacing(2),

dominik-zeglen · 2021-10-21T07:50:29Z

src/components/CollectionWithDividers/CollectionWithDividers.tsx

@@ -14,6 +15,7 @@ interface CollectionWithDividersProps<T> {
 }

 function CollectionWithDividers<T>({
+ withOuterDividers = false,


undefined is also falsy, so unless we're going to silence some strict null checking errors (which is not the case) I think it's safe to omit this

I'd rather keep withOuterDividers = false

dominik-zeglen · 2021-10-21T07:53:55Z

src/components/CollectionWithDividers/CollectionWithDividers.tsx

+ const collectionWithOuterDividers = () => [
+ <SelectedDividerComponent />,
+ ...collectionToRender,
+ <SelectedDividerComponent />
+ ];
+
+ return withOuterDividers ? collectionWithOuterDividers() : collectionToRender;


Please don't use render functions, make it a component

dominik-zeglen · 2021-10-21T07:54:58Z

src/components/PageTitleWithStatusChip/PageTitleWithStatusChip.tsx

@@ -22,16 +17,15 @@ const useStyles = makeStyles(

 const PageTitleWithStatusChip: React.FC<PageTitleWithStatusChipProps> = ({


Now it can more things than StatusChip, so I think the component name should be changed to something more appropriate

There's a component ExtendedPageHeader somewhere in the project, doesn't it meet your needs anyway?

Now it can more things than StatusChip, so I think the component name should be changed to something more appropriate

Technically yes, practically it's styled only to be used with StatusChip. I think it's better to have one component that does one thing without having to change styles every time I want to use it.

@dominik-zeglen Maybe we can make a PageTitleWithStatusChip precisely styled for status chip but using extended page header underneath? @Cloud11PL check if it's possible

@bmigirl @dominik-zeglen It is, I pushed the changes

dominik-zeglen · 2021-10-21T08:01:33Z

...giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/hooks/useGiftCardActivationDeactivation.ts

+ isActive?: boolean;
+}
+
+const useGiftCardActivationDeactivation = ({


Suggested change

const useGiftCardActivationDeactivation = ({

const useGiftCardToggle = ({

I think that ActivationDeactivation is more explicit, it's easier to find and you immediately know what it does. Toggle can mean anything.

useGiftCardActiveToggle
useGiftCardActivation
useGiftCardStatus

I don't think enumerating all possible outcomes in function name is a good practise. Let's consider a function that sets either active, disabled or indeterminate status to some object. Considering convention above, the function should be named useSomethingActivateDeactivateIndeterminate which I don't think I should even explain why it isn't a good function name. Not saying that useGiftCardToggle is perfect, just ActivationDeactivation part is too long and more explicit than it should (return type is object that has descriptive keys).

@dominik-zeglen fixed

dominik-zeglen · 2021-10-21T08:08:14Z

src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard.tsx

+} from "./queries";
+import { useCardActionsStyles } from "./styles";
+
+const CustomerGiftCardsCard: React.FC = () => {


Wouldn't it be sufficient?

Suggested change

const CustomerGiftCardsCard: React.FC = () => {

const CustomerGiftCards: React.FC = () => {

No, I'd like to keep it explicitly as it is. CustomerGiftCards sounds like a standalone list somewhere, this is a card.

For the sake of consistency you should rename all sibling components to ...Card then, they are cards too after all

Other components in src/giftCards/components from what I've seen are not cards

I checked and in fact all card components are named ...Card. Strange, but it's done so may be it

dominik-zeglen · 2021-10-21T08:28:07Z

src/giftCards/components/GiftCardCustomerCard/styles.ts

+export const useCardActionsStyles = makeStyles(
+ theme => ({
+ cardActions: {
+ padding: `${theme.spacing(2)} ${theme.spacing(3)}`,


Suggested change

padding: `${theme.spacing(2)} ${theme.spacing(3)}`,

padding: theme.spacing(2, 3),

dominik-zeglen · 2021-10-21T08:29:04Z

src/giftCards/components/GiftCardCustomerCard/styles.ts

+ listingWrapper: () => ({
+ display: "grid",
+ gridTemplateColumns: "max-content 1fr min-content",
+ margin: `${theme.spacing(2)} ${theme.spacing(3)}`,
+ alignItems: "center",
+ justifyItems: "center"
+ }),


Suggested change

listingWrapper: () => ({

display: "grid",

gridTemplateColumns: "max-content 1fr min-content",

margin: `${theme.spacing(2)} ${theme.spacing(3)}`,

alignItems: "center",

justifyItems: "center"

}),

listingWrapper: {

display: "grid",

gridTemplateColumns: "max-content 1fr min-content",

margin: theme.spacing(2, 3),

alignItems: "center",

justifyItems: "center"

},

* WIP * WIP * Replace typed query with make query * Add customer details context to customer page * Add context to customer gift cards * Disable customer select when initial customer is present * Pass initial customer to create gift card form * Fixes after cherry-pick * Code cleanup * Remove getInitialData function * Remove unused package * Remove new line

* Add gift cards card to customer page (#1456) * WIP * WIP * Extract activate/deactivate logic to a hook * add optional side action * Add query for customer's gift cards * Add component for giftcard status chip * Graphql run types * Add gift card card to customer page * Fix status chip header * Revert style change * Unify status chip logic * Fix naming scheme * Add currentOpts to act/deactivate gift cards hook * Add queries to refetch prop * Simplify gift card list component * Fix order status chip * Extract messages to separate file * Remove unused lines of code * Tests and messages * Fix card list rendering * Type fix * Code review fixes * Review changes * Scripts * Change variable name * Fix formatted message * Check if giftcards exist before rendering collection * Add loading button to CardMenu component (#1476) * WIP * WIP * Add gift card card to customer page * Fix status chip header * Fix naming scheme * Add currentOpts to act/deactivate gift cards hook * Remove unused lines of code * Revert style change * Tests and messages * Fix card list rendering * Type fix * Code review fixes * Review changes * Scripts * Add loading animation to card menu buttons * Added default messages * Change conditional prop checking to filtering * Issue gift card in customer page (#1468) * WIP * WIP * Replace typed query with make query * Add customer details context to customer page * Add context to customer gift cards * Disable customer select when initial customer is present * Pass initial customer to create gift card form * Fixes after cherry-pick * Code cleanup * Remove getInitialData function * Remove unused package * Remove new line * Post-rebase fixes * Code cleanup & extract messages * Remove unused code * Create customer details hook * Minor fixes * Update default messages * Update gift card types * Type fixes * Change directory of useCustomerDetails hook * CR Fixes * Update tests * Make PageTitleWithStatusChip use ExtendedPageHeader * Update tests * Update hook name

* Add gift bulk create (#1490) * Add gift card bulk create dialog WIP * Update schema, add gift card bulk create mutation and types * Add gift card bulk create modal and mutation * Fix types and update messages * Refactor gift card bulk create * Add closing gift card bulk create dialog after success * Change gift card list closeDialog prop name to onClose * Review fixes * Review fixes * Add error message to invalid expiryDate (#1518) * Add error message to invalid expiryDate * Add default messages * Replace filter with some * Add gift card export (#1499) * wip * Add exporting gift cards * Update messages * Fix types * Review fixes * Review fixes * Refactor passing messages to export settings component * Refactor * Update messages * Gift card customer page (#1520) * Add gift cards card to customer page (#1456) * WIP * WIP * Extract activate/deactivate logic to a hook * add optional side action * Add query for customer's gift cards * Add component for giftcard status chip * Graphql run types * Add gift card card to customer page * Fix status chip header * Revert style change * Unify status chip logic * Fix naming scheme * Add currentOpts to act/deactivate gift cards hook * Add queries to refetch prop * Simplify gift card list component * Fix order status chip * Extract messages to separate file * Remove unused lines of code * Tests and messages * Fix card list rendering * Type fix * Code review fixes * Review changes * Scripts * Change variable name * Fix formatted message * Check if giftcards exist before rendering collection * Add loading button to CardMenu component (#1476) * WIP * WIP * Add gift card card to customer page * Fix status chip header * Fix naming scheme * Add currentOpts to act/deactivate gift cards hook * Remove unused lines of code * Revert style change * Tests and messages * Fix card list rendering * Type fix * Code review fixes * Review changes * Scripts * Add loading animation to card menu buttons * Added default messages * Change conditional prop checking to filtering * Issue gift card in customer page (#1468) * WIP * WIP * Replace typed query with make query * Add customer details context to customer page * Add context to customer gift cards * Disable customer select when initial customer is present * Pass initial customer to create gift card form * Fixes after cherry-pick * Code cleanup * Remove getInitialData function * Remove unused package * Remove new line * Post-rebase fixes * Code cleanup & extract messages * Remove unused code * Create customer details hook * Minor fixes * Update default messages * Update gift card types * Type fixes * Change directory of useCustomerDetails hook * CR Fixes * Update tests * Make PageTitleWithStatusChip use ExtendedPageHeader * Update tests * Update hook name * Post-rebase fixes * Eslint fix * Fix scrollbar appearing in menu issue (#1539) * Change displayCode to last4CodeChars (#1573) * Add filtered redirect to gift card page from customer details (#1556) * Limit number of channel list items (#1607) * Add max height to single select field menu items container * Add storybook case * Update stories tests * Fix gift card product changing to preorder on save issue (#1583) * Variant preorder fix * Global threshold input should be optional * update snapshot * Add displaying logic gift cards list toolbar (#1617) * add displaying logic for gift card toolbar * Logic fix * Handle bulk export after creation (#1544) * Add gift bulk create (#1490) * Add gift card bulk create dialog WIP * Update schema, add gift card bulk create mutation and types * Add gift card bulk create modal and mutation * Fix types and update messages * Refactor gift card bulk create * Add closing gift card bulk create dialog after success * Change gift card list closeDialog prop name to onClose * Review fixes * Review fixes * Add gift card export (#1499) * wip * Add exporting gift cards * Update messages * Fix types * Review fixes * Review fixes * Refactor passing messages to export settings component * Refactor * Update messages * Handle export after bulk gift card creation * Add default messages * Create an util function to get correct input for export * Update component's name * Change modal's title * Update messages Co-authored-by: Magdalena Markusik <magdalena@markusik.com> * Gift Card List item number change doesn't refetch fix (#1643) * Fix number of rows change not refetching list * Add pagination reset * Update descriptions for gift card messages to be more descriptive (#1648) * Gift card history timeline (#1597) * Update queries and mutations * Allow title to be a react node * Show user name if it exists in data object * Update types * Refresh queries on note add * Add gift card history * type fix * Update messages * Fix timeline note * Add event fragment to form update result * Update types * Fix typo * Update messages * Disable input if gift card is expired * Remove unused imports * CR Fixes * Change messages location * Change message to include user in order * Allow adding notes to expired gift cards * Fix disabled input showing dropdown issue (#1636) * On click is disabled when component is disabled * update tests * Order filtering for gift cards in Order List View (#1628) * Add gift card order filter * Add gift card filter card in orders view * Bump macaw version * Update messages * Update tests * Code review changes * update messages * Change info card message to use only one message * Fix order gift card filter * Gift card filter in product list view (#1621) * Add GiftCard or Normal filter in Product List View * Fix tests * Fix type check * Don't filter if query param is not in enum * Update messages * Update tests * Code cleanup * Add default messages * Pass intl rather than initialise it in util * Post-rebase fixes * Change product type details messages (#1642) * Update product type gift card options messages * update tests * Add sorting to gift card list (#1569) * Update queries and types for sorting * Add optional handleError method to makeQuery * Add sorting to gift card list * Sorting hook uses useGiftCardList hook * Convert to boolean * Add default sorting field * format fix * Add expiry error handling for issuing gift cards (#1634) * Add expiry error handling for issuing gift cards * Add expiry error message to gift card bulk issue * Update Gift Card tag queries to utilise multiple tags (#1685) * Change displayCode to last4CodeChars (#1573) * Update types * WIP * Update gift card forms to utilise multiple tags * Code cleanup * Update gift card event types * Fixes * Change column with no click handler behaviour * Remove an ability to sort by tags * Remove unused code * Update tests * Update timeline events * Update messages * change array reduce to join * Add Y scroll to dialog content * Bulk create Y scroll fix * Endless loading fix (#1732) * Order filtering for gift cards in Order List View (#1628) * Add gift card order filter * Add gift card filter card in orders view * Bump macaw version * Update messages * Update tests * Code review changes * update messages * Change info card message to use only one message * Fix order gift card filter * Wip * Extract dialog component outside of gift card create * Update component's name * Extract dialog component outside of export component to provider * Update tests * Various gift card bugs fixes (#1749) * Change currency to options field * Fix hover and font size * Fix gift card list width * Fix bulk delete dialog * Allow balance to be sorted only when currency is filtered * Sorting by balance after removing currency filter defualts to usedBy * Fix trash icon * Add filter dependency * Fix single deletion with bulk * Update tests * Refactor Links used in Gift Cards * Fix export dialog (#1791) Co-authored-by: Magdalena Markusik <magdalena@markusik.com>

Cloud11PL force-pushed the gift-card-customer-page branch from 13a31eb to ce2e22e Compare October 19, 2021 10:58

github-actions bot temporarily deployed to gift-card-customer-page October 19, 2021 10:59 Inactive

github-actions bot temporarily deployed to storybook gift-card-customer-page October 19, 2021 10:59 Inactive

Cloud11PL requested review from bmigirl, a team and dominik-zeglen and removed request for a team October 19, 2021 11:00

Cloud11PL added the reviewed label Oct 19, 2021

Cloud11PL marked this pull request as ready for review October 19, 2021 11:00

bmigirl suggested changes Oct 20, 2021

View reviewed changes

github-actions bot temporarily deployed to gift-card-customer-page October 20, 2021 11:43 Inactive

github-actions bot temporarily deployed to storybook gift-card-customer-page October 20, 2021 11:43 Inactive

github-actions bot temporarily deployed to gift-card-customer-page October 20, 2021 13:38 Inactive

github-actions bot temporarily deployed to storybook gift-card-customer-page October 20, 2021 13:38 Inactive

Cloud11PL requested a review from bmigirl October 20, 2021 13:38

bmigirl approved these changes Oct 21, 2021

View reviewed changes

jwm0 suggested changes Oct 21, 2021

View reviewed changes

Cloud11PL requested a review from jwm0 October 22, 2021 06:54

github-actions bot temporarily deployed to gift-card-customer-page October 22, 2021 06:54 Inactive

github-actions bot temporarily deployed to storybook gift-card-customer-page October 22, 2021 06:54 Inactive

dominik-zeglen suggested changes Oct 22, 2021

View reviewed changes

github-actions bot temporarily deployed to gift-card-customer-page October 22, 2021 12:13 Inactive

github-actions bot temporarily deployed to storybook gift-card-customer-page October 22, 2021 12:13 Inactive

Cloud11PL requested a review from dominik-zeglen October 22, 2021 12:14

github-actions bot temporarily deployed to gift-card-customer-page October 22, 2021 12:40 Inactive

github-actions bot temporarily deployed to storybook gift-card-customer-page October 22, 2021 12:40 Inactive

github-actions bot temporarily deployed to gift-card-customer-page October 25, 2021 10:04 Inactive

github-actions bot temporarily deployed to storybook gift-card-customer-page October 25, 2021 10:04 Inactive

github-actions bot temporarily deployed to gift-card-customer-page October 25, 2021 10:25 Inactive

github-actions bot temporarily deployed to storybook gift-card-customer-page October 25, 2021 10:25 Inactive

Cloud11PL added 15 commits October 29, 2021 10:32

Post-rebase fixes

b35fd52

Code cleanup & extract messages

1c8bfe4

Remove unused code

1277f2d

Create customer details hook

8d3c7d8

Minor fixes

0651396

Update default messages

171bbfc

Update gift card types

1b435aa

Type fixes

8c8663c

Change directory of useCustomerDetails hook

affe8c4

CR Fixes

efbb155

Update tests

eea33c4

Make PageTitleWithStatusChip use ExtendedPageHeader

b5848af

Update tests

10478b5

Update hook name

af2258c

Cloud11PL force-pushed the gift-card-customer-page branch from 36e0704 to af2258c Compare October 29, 2021 08:34

github-actions bot temporarily deployed to gift-card-customer-page October 29, 2021 08:34 Inactive

github-actions bot deployed to storybook gift-card-customer-page October 29, 2021 08:34 View deployment

Cloud11PL merged commit 661470a into gift-cards-post-post-mvp Oct 29, 2021

Cloud11PL deleted the gift-card-customer-page branch October 29, 2021 08:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gift card customer page #1520

Gift card customer page #1520

Cloud11PL commented Oct 19, 2021 •

edited

Loading

bmigirl Oct 20, 2021

bmigirl Oct 20, 2021

bmigirl Oct 20, 2021

bmigirl Oct 20, 2021

bmigirl Oct 20, 2021

bmigirl Oct 20, 2021

Cloud11PL Oct 20, 2021 •

edited

Loading

bmigirl Oct 20, 2021

bmigirl Oct 20, 2021

bmigirl Oct 20, 2021

bmigirl Oct 20, 2021

jwm0 Oct 21, 2021

dominik-zeglen Oct 21, 2021

dominik-zeglen Oct 21, 2021

Cloud11PL Oct 25, 2021

dominik-zeglen Oct 21, 2021

dominik-zeglen Oct 21, 2021

dominik-zeglen Oct 21, 2021

Cloud11PL Oct 22, 2021

bmigirl Oct 25, 2021

Cloud11PL Oct 25, 2021

dominik-zeglen Oct 21, 2021

Cloud11PL Oct 22, 2021

dominik-zeglen Oct 26, 2021

Cloud11PL Oct 28, 2021

dominik-zeglen Oct 21, 2021

Cloud11PL Oct 22, 2021

dominik-zeglen Oct 25, 2021

Cloud11PL Oct 25, 2021

dominik-zeglen Oct 26, 2021

dominik-zeglen Oct 21, 2021

dominik-zeglen Oct 21, 2021


		import { CustomerGiftCardList_giftCards_edges_node } from "./types/CustomerGiftCardList";

		export const getGiftCardDisplayCode = (

		@@ -22,16 +17,15 @@ const useStyles = makeStyles(

		const PageTitleWithStatusChip: React.FC<PageTitleWithStatusChipProps> = ({

	const useGiftCardActivationDeactivation = ({
	const useGiftCardToggle = ({

	const CustomerGiftCardsCard: React.FC = () => {
	const CustomerGiftCards: React.FC = () => {

	padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
	padding: theme.spacing(2, 3),

Gift card customer page #1520

Gift card customer page #1520

Conversation

Cloud11PL commented Oct 19, 2021 • edited Loading

Screenshots

Pull Request Checklist

Test environment config

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Cloud11PL Oct 20, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Cloud11PL commented Oct 19, 2021 •

edited

Loading

Cloud11PL Oct 20, 2021 •

edited

Loading