-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Reinstate EditStoreAddress flow in settings
- Loading branch information
Showing
7 changed files
with
324 additions
and
2 deletions.
There are no files selected for viewing
87 changes: 87 additions & 0 deletions
87
js/src/components/contact-information/contact-information-preview-card.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { Icon, warning as warningIcon } from '@wordpress/icons'; | ||
| import { getPath, getQuery } from '@woocommerce/navigation'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import AccountCard from '.~/components/account-card'; | ||
| import AppButton from '.~/components/app-button'; | ||
| import './contact-information-preview-card.scss'; | ||
|
|
||
| /** | ||
| * Renders a contact information card component. | ||
| * It adds loading & warning state to the regular `AccountCard`, and an edit button link. | ||
| * | ||
| * @param {Object} props React props | ||
| * @param {import('.~/components/account-card').APPEARANCE} props.appearance | ||
| * @param {string} props.editHref URL where Edit button should point to. | ||
| * @param {string} props.editEventName Tracing event name used when the "Edit" button is clicked. | ||
| * @param {boolean} props.loading Set to `true` if the card should be rendered in the loading state. | ||
| * @param {JSX.Element} props.content Main content of the card to be rendered once the data is loaded. | ||
| * @param {string} [props.warning] Warning title, to be used instead of the default one. | ||
| * @return {JSX.Element} Filled AccountCard component. | ||
| */ | ||
| export default function ContactInformationPreviewCard( { | ||
| editHref, | ||
| editEventName, | ||
| loading, | ||
| content, | ||
| appearance, | ||
| warning, | ||
| } ) { | ||
| const { subpath } = getQuery(); | ||
| const editButton = ( | ||
| <AppButton | ||
| isSecondary | ||
| href={ editHref } | ||
| text={ __( 'Edit', 'google-listings-and-ads' ) } | ||
| eventName={ editEventName } | ||
| eventProps={ { path: getPath(), subpath } } | ||
| /> | ||
| ); | ||
| let description; | ||
| let title; | ||
|
|
||
| if ( loading ) { | ||
| description = ( | ||
| <span | ||
| className="gla-contact-info-preview-card__placeholder" | ||
| aria-busy="true" | ||
| title={ __( 'Loading…', 'google-listings-and-ads' ) } | ||
| ></span> | ||
| ); | ||
| } else if ( warning ) { | ||
| title = ( | ||
| <> | ||
| <Icon | ||
| icon={ warningIcon } | ||
| size={ 24 } | ||
| className="gla-contact-info-preview-card__notice-icon" | ||
| /> | ||
| { warning } | ||
| </> | ||
| ); | ||
| description = ( | ||
| <span className="gla-contact-info-preview-card__notice-details"> | ||
| { content } | ||
| </span> | ||
| ); | ||
| } else { | ||
| description = content; | ||
| } | ||
|
|
||
| return ( | ||
| <AccountCard | ||
| appearance={ appearance } | ||
| className="gla-contact-info-preview-card" | ||
| icon={ null } | ||
| title={ title } | ||
| description={ description } | ||
| indicator={ editButton } | ||
| ></AccountCard> | ||
| ); | ||
| } |
21 changes: 21 additions & 0 deletions
21
js/src/components/contact-information/contact-information-preview-card.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| .gla-contact-info-preview-card { | ||
| // Vertically align icon inside the title. | ||
| .wcdl-subsection-title { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| &__notice-icon { | ||
| fill: $alert-red; | ||
| margin: calc(var(--main-gap) / -8) 0; | ||
| } | ||
| &__notice-details { | ||
| color: $gray-700; | ||
| } | ||
|
|
||
| &__placeholder { | ||
| display: inline-block; | ||
| width: 18em; | ||
|
|
||
| @include placeholder; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { getHistory } from '@woocommerce/navigation'; | ||
| import { useState } from '@wordpress/element'; | ||
| import { Flex } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { getSettingsUrl } from '.~/utils/urls'; | ||
| import { useAppDispatch } from '.~/data'; | ||
| import useLayout from '.~/hooks/useLayout'; | ||
| import useStoreAddress from '.~/hooks/useStoreAddress'; | ||
| import TopBar from '.~/components/stepper/top-bar'; | ||
| import HelpIconButton from '.~/components/help-icon-button'; | ||
| import Section from '.~/wcdl/section'; | ||
| import AppButton from '.~/components/app-button'; | ||
|
|
||
| import AppDocumentationLink from '.~/components/app-documentation-link'; | ||
| import StoreAddressCard from '.~/components/contact-information/store-address-card'; | ||
|
|
||
| const learnMoreLinkId = 'contact-information-read-more'; | ||
| const learnMoreUrl = | ||
| 'https://woocommerce.com/document/google-for-woocommerce/get-started/requirements/#contact-information'; | ||
|
|
||
| /** | ||
| * Triggered when the save button in contact information page is clicked. | ||
| * | ||
| * @event gla_contact_information_save_button_click | ||
| */ | ||
|
|
||
| /** | ||
| * Renders the store address settings page. | ||
| * | ||
| * @see StoreAddressCard | ||
| * @fires gla_contact_information_save_button_click | ||
| * @fires gla_documentation_link_click with `{ context: "settings-store-address", link_id: "contact-information-read-more", href: "https://woocommerce.com/document/google-for-woocommerce/get-started/requirements/#contact-information" }` | ||
| */ | ||
| const EditStoreAddress = () => { | ||
| useLayout( 'full-content' ); | ||
|
|
||
| const { updateGoogleMCContactInformation } = useAppDispatch(); | ||
| const { data: address } = useStoreAddress(); | ||
| const [ isSaving, setSaving ] = useState( false ); | ||
|
|
||
| const handleSaveClick = () => { | ||
| setSaving( true ); | ||
| updateGoogleMCContactInformation() | ||
| .then( () => getHistory().push( getSettingsUrl() ) ) | ||
| .catch( () => setSaving( false ) ); | ||
| }; | ||
|
|
||
| const isReadyToSave = | ||
| address.isAddressFilled && address.isMCAddressDifferent; | ||
|
|
||
| return ( | ||
| <> | ||
| <TopBar | ||
| title={ __( 'Edit store address', 'google-listings-and-ads' ) } | ||
| helpButton={ | ||
| <HelpIconButton eventContext="edit-store-address" /> | ||
| } | ||
| backHref={ getSettingsUrl() } | ||
| /> | ||
| <div className="gla-settings"> | ||
| <Section | ||
| title={ __( 'Store address', 'google-listings-and-ads' ) } | ||
| description={ | ||
| <div> | ||
| <p> | ||
| { __( | ||
| 'Your store address is required by Google for verification purposes. It will be shared with the Google Merchant Center and will not be displayed to customers.', | ||
| 'google-listings-and-ads' | ||
| ) } | ||
| </p> | ||
| <p> | ||
| <AppDocumentationLink | ||
| context="settings-store-address" | ||
| linkId={ learnMoreLinkId } | ||
| href={ learnMoreUrl } | ||
| > | ||
| { __( | ||
| 'Learn more', | ||
| 'google-listings-and-ads' | ||
| ) } | ||
| </AppDocumentationLink> | ||
| </p> | ||
| </div> | ||
| } | ||
| > | ||
| <StoreAddressCard | ||
| showValidation={ ! address.isAddressFilled } | ||
| /> | ||
| </Section> | ||
| <Section> | ||
| <Flex justify="flex-end"> | ||
| <AppButton | ||
| isPrimary | ||
| loading={ isSaving } | ||
| disabled={ ! isReadyToSave } | ||
| eventName="gla_contact_information_save_button_click" | ||
| onClick={ handleSaveClick } | ||
| > | ||
| { __( 'Save details', 'google-listings-and-ads' ) } | ||
| </AppButton> | ||
| </Flex> | ||
| </Section> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default EditStoreAddress; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters