Commit Graph

233 Commits

Author SHA1 Message Date
Gan Eng Chin d70fb07f31
Modify PluginCardBody to accept className, and change description type. 2023-01-21 23:13:13 +08:00
Gan Eng Chin 6baa403071
Move and rename type Plugin to RecommendedPlugin. 2023-01-21 23:12:04 +08:00
Gan Eng Chin d252922110
Rename file Plugin to InstalledPlugin.
(cherry picked from commit 0229354da0)
2023-01-21 23:11:47 +08:00
Gan Eng Chin 8873252c45
Rename type Plugin to InstalledPlugin.
(cherry picked from commit 56dbf53a35)
2023-01-21 23:11:36 +08:00
Gan Eng Chin 0fe028d8c2
Code refactor with CardHeaderTitle component.
This component will be used in other components later.

(cherry picked from commit 995fb7e02d)
2023-01-21 23:10:31 +08:00
Gan Eng Chin 3f56382cf1
Code refactor with CenteredSpinner.
(cherry picked from commit 5216643465)
2023-01-21 23:09:06 +08:00
Gan Eng Chin 1af1524b83
Rename CSS installed-channel to registered-channel. 2023-01-21 02:38:00 +08:00
Gan Eng Chin ef669d8ca2
Rename InstalledChannel to RegisteredChannel. 2023-01-21 02:36:39 +08:00
Gan Eng Chin 8754003fb0
Add mapping for sync-failed product listings status. 2023-01-21 02:26:19 +08:00
Gan Eng Chin 2a15f09514
Remove TODO comments. 2023-01-21 02:22:30 +08:00
Gan Eng Chin 3cc568b4ed
Remove duplicated RecommendedChannel type. 2023-01-21 02:20:06 +08:00
Gan Eng Chin 0b1ab21836
Rename types. 2023-01-21 02:14:36 +08:00
Gan Eng Chin d69f078fd5
Replace useIsPluginInstalled with useIsPluginInstalledNotActivated. 2023-01-20 01:36:39 +08:00
Gan Eng Chin cd0402a10c
Refetch registered channels after install and activate recommended channels. 2023-01-20 01:02:41 +08:00
Gan Eng Chin 9fa6ea4a25
Display activate button for channels that are not yet activated. 2023-01-20 00:36:34 +08:00
Gan Eng Chin 223ea4d712
Filter recommended channels to get "not installed" or "not activated" channels. 2023-01-19 22:23:00 +08:00
Gan Eng Chin cf4c62e707
Fix loading bug in useRecommendedChannels. 2023-01-19 19:50:56 +08:00
Gan Eng Chin b708cc18ff
Get recommended channels from API. 2023-01-19 19:33:51 +08:00
Gan Eng Chin 2d7c8db2e5
Map product_listings_status to syncStatus. 2023-01-19 01:32:38 +08:00
Gan Eng Chin 0a36d7a4fe
Map errors_count to issueType and issueText. 2023-01-19 01:12:50 +08:00
Gan Eng Chin f616d688d8
Call marketing channels API with wp.data. 2023-01-18 02:04:42 +08:00
Gan Eng Chin f92f4d3dee
Code refactor with useIsLocationHashAddChannels. 2022-12-28 01:09:37 +08:00
Gan Eng Chin 86cc1181bf
Focus on Add Channels section when users click on Add Channels button. 2022-12-28 00:56:59 +08:00
Gan Eng Chin 35375c6fab
Rename UseIntroductionBannerType to UseIntroductionBanner. 2022-12-27 22:13:21 +08:00
Gan Eng Chin e1a82c5b94
Display and dismiss introduction banner with wp_options. 2022-12-27 22:01:46 +08:00
Gan Eng Chin a2419dbf44
Display buttons in introduction banner with large illustration. 2022-12-27 21:06:26 +08:00
Gan Eng Chin 82db71c94f
Add close button to introduction banner card. 2022-12-27 20:47:14 +08:00
Gan Eng Chin b6eec1e1bf
Add introduction banner card to marketing page. 2022-12-27 02:05:58 +08:00
Gan Eng Chin c89b28157d
Merge branch 'feature/34903-multichannel-marketing-frontend/34905-campaigns-card' into feature/34903-multichannel-marketing-frontend/34909-create-campaign-modal
Conflicts:
	plugins/woocommerce-admin/client/marketing/hooks/index.ts
	plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx
	plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx
	plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/RecommendedChannels.tsx
	plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/useChannels.ts
2022-12-24 02:07:15 +08:00
Gan Eng Chin 1d7b663186
Remove the unneeded "Create new campaign" button for now. 2022-12-24 01:45:59 +08:00
Gan Eng Chin 8e39098256
Show Campaigns card only when there is at least one registered channel. 2022-12-24 01:43:09 +08:00
Gan Eng Chin ee6fa9508e
Merge branch 'feature/34903-multichannel-marketing-frontend/34906-channels-card' into feature/34903-multichannel-marketing-frontend/34905-campaigns-card
Conflicts:
	plugins/woocommerce-admin/client/marketing/overview-multichannel/MarketingOverviewMultichannel.tsx
2022-12-24 01:39:57 +08:00
Gan Eng Chin 52dd8845cc
Load registered and recommended channels in MarketingOverviewMultichannel.
The data will be used to conditionally display Campaigns card later.
2022-12-24 01:14:02 +08:00
Gan Eng Chin e950417542
Move useRegisteredChannels and useRecommendedChannels into shared hooks directory. 2022-12-24 00:48:03 +08:00
Gan Eng Chin 7bd32ba638
Remove useChannels and use useRegisteredChannels and useRecommendedChannels directly. 2022-12-24 00:32:23 +08:00
Gan Eng Chin 9e0b71ff1c
Rename CollapsibleRecommendedChannels to RecommendedChannels. 2022-12-23 22:12:16 +08:00
Gan Eng Chin af2f4eb904
CSS for "Add channels" button. 2022-12-23 22:08:50 +08:00
Gan Eng Chin 31b635b888
Code refactor: move CSS code to corresponding SCSS file. 2022-12-23 21:53:42 +08:00
Gan Eng Chin 06a303fc33
Types for useRegisteredChannels. 2022-12-23 21:21:52 +08:00
Gan Eng Chin 4fa4f802e9
Check for empty recommended channels. 2022-12-23 21:19:00 +08:00
Gan Eng Chin d0de1b5c21
Add border and change padding for recommended channels in create campaign modal. 2022-12-23 02:00:45 +08:00
Gan Eng Chin 07894d42e3
Code refactor for Campaigns component, remove unneeded CampaignsCardHeader. 2022-12-22 01:52:24 +08:00
Gan Eng Chin a3c8680789
Use perPage variable instead of duplicated number. 2022-12-22 01:34:46 +08:00
Gan Eng Chin 321145eb2e
Better code clarity with woocommerce-marketing-campaigns-table class name. 2022-12-21 23:12:10 +08:00
Gan Eng Chin 894b77dc96
Code refactor with CreateNewCampaignModal. 2022-12-21 22:56:22 +08:00
Gan Eng Chin 5caffb6c63
Make create campaign button open in new tab depending on createUrl origin. 2022-12-21 21:26:57 +08:00
Gan Eng Chin 6b3fbdf16b
Display new campaign types in create campaign modal. 2022-12-21 02:38:56 +08:00
Gan Eng Chin 24d59f7316
Hide the recommended channels section if it is empty. 2022-12-20 22:39:00 +08:00
Gan Eng Chin 17f2072d9f
Display recommended channels in create campaign modal. 2022-12-20 02:37:02 +08:00
Gan Eng Chin 5f50e63a1e
Move useRecommendedChannels to shared hooks directory. 2022-12-20 02:35:37 +08:00
Gan Eng Chin 6de95c78a1
Move RecommendedChannelsList to shared components directory. 2022-12-20 02:33:35 +08:00
Gan Eng Chin 33998743d6
Remove unneeded imports in RecommendedChannelsList. 2022-12-20 02:29:42 +08:00
Gan Eng Chin 08661353eb
Add CampaignsCardHeader component with modal. 2022-12-20 01:17:30 +08:00
Gan Eng Chin 558ddf2609
Use Campaign type in useCampaigns. 2022-12-19 20:54:01 +08:00
Gan Eng Chin c67e479162
Add Campaign type. 2022-12-19 20:53:31 +08:00
Gan Eng Chin cbc616a9f3
Set cost column as numeric in Campaigns card.
This makes the column right-aligned.
2022-12-18 20:38:07 +08:00
Gan Eng Chin 32cf8d1341
Add pagination to Campaigns card. 2022-12-18 20:37:25 +08:00
Gan Eng Chin c444dbd126
CSS for campaign rows in Campaigns card. 2022-12-18 20:08:21 +08:00
Gan Eng Chin f5799c8721
Display campaign data in table in Campaigns card. 2022-12-18 19:34:16 +08:00
Gan Eng Chin af4f79ab28
Add loading state for Campaigns card. 2022-12-17 21:08:14 +08:00
Gan Eng Chin 30d316886c
Add empty state Campaigns card. 2022-12-16 01:13:32 +08:00
Gan Eng Chin 2e8b5227e4
Move RecommendedChannel type. 2022-12-14 20:54:29 +08:00
Gan Eng Chin 6f4e05945b
Add dummy data for testing in useRecommendedChannels. 2022-12-14 20:19:20 +08:00
Gan Eng Chin 6c127d70c8
Add dummy data for testing. 2022-12-14 20:11:40 +08:00
Gan Eng Chin 6b80109754
Code refactor with RecommendedChannelsList. 2022-12-14 02:07:35 +08:00
Gan Eng Chin 4a2205bcd1
Display recommended channels in a collapsible list in Channels card. 2022-12-14 01:13:00 +08:00
Gan Eng Chin 9963fd07ab
Display description and button based on channel setup status in Channels card. 2022-12-13 23:23:13 +08:00
Gan Eng Chin f713c01f56
Add more properties into InstalledChannel type. 2022-12-13 23:22:27 +08:00
Gan Eng Chin e6e6dc19ef
Display issue status in Channels card. 2022-12-13 22:47:16 +08:00
Gan Eng Chin 437ebb20a8
Display sync status in Channels card. 2022-12-13 21:36:09 +08:00
Gan Eng Chin 02ce7cccc5
Modify PluginCardBody to accept className, and change description type. 2022-12-13 21:35:01 +08:00
Gan Eng Chin be621df8da
Add more data for testing. 2022-12-10 02:29:58 +08:00
Gan Eng Chin a9010ffd68
Add InstalledChannelCardBody to Channels. 2022-12-10 02:29:58 +08:00
Gan Eng Chin 92112e27a1
Add InstalledChannel type. 2022-12-10 02:29:58 +08:00
Gan Eng Chin 7852448a7a
Use SmartPluginCardBody in Channels component. 2022-12-10 02:29:58 +08:00
Gan Eng Chin 5da2385d41
Add SmartPluginCardBody component. 2022-12-10 02:29:58 +08:00
Gan Eng Chin 542b26e346
Move and rename type Plugin to RecommendedPlugin. 2022-12-10 02:29:58 +08:00
Gan Eng Chin 0229354da0
Rename file Plugin to InstalledPlugin. 2022-12-10 02:29:58 +08:00
Gan Eng Chin 56dbf53a35
Rename type Plugin to InstalledPlugin. 2022-12-10 02:29:57 +08:00
Gan Eng Chin 5cd1d0fe3f
Add CardHeaderDescription in Channels card. 2022-12-10 02:29:57 +08:00
Gan Eng Chin 995fb7e02d
Code refactor with CardHeaderTitle component.
This component will be used in other components later.
2022-12-10 02:29:57 +08:00
Gan Eng Chin a8c8be7c26
Use CenteredSpinner in Channels. 2022-12-10 02:29:57 +08:00
Gan Eng Chin 5216643465
Code refactor with CenteredSpinner. 2022-12-10 02:29:57 +08:00
Gan Eng Chin dc7a233cb1
Add Channels card into Marketing page. 2022-12-10 02:29:57 +08:00
Gan Eng Chin a811009a06
Add one-click installation for recommended extensions in multichannel Marketing page (#35542) 2022-11-24 21:46:08 +08:00
Gan Eng Chin 9e697cdf0a
Add tests for UI Revamp on Marketing page (#34840) 2022-09-27 22:25:48 +08:00
Gan Eng Chin 4b4b5f36e2
Feature integration: UI Revamp on Marketing Page (#34642)
Co-authored-by: Nima <nima.karimi@automattic.com>
Co-authored-by: Nima Karimi <73110514+nima-karimi@users.noreply.github.com>
2022-09-14 15:43:30 +08:00
Gan Eng Chin a197622df1
Replace Facebook icon (#34592)
* Replace facebook icon.

* Use facebook.svg file instead of duplicating svg.

* Add changelog.
2022-09-07 22:45:05 +08:00
aezazs-multidots f9642fedc8
fix-marketing-slider-image-size (#34589) 2022-09-07 16:32:46 +08:00
Gan Eng Chin 945a55adbc
Update Google logo icon (#34471)
* Update Google logo icon.

* Update Google logo icon to use img element with svg file.

* Simplify ProductIcon CSS with size prop.

This applies to svg and image icons, not just svg.

* Add changelog.

* Set style for Google logo icon.

We set white background to override the gray backgroun in ProductIcon.

Padding is used to make it look visually similar size with other icons.

* Update style for Google logo.
2022-08-26 19:24:19 +08:00
Rodrigue 0b772e31e3
Add back FB extension to Installed marketing extensions list. (#34259)
* Update FB icon component SVG to latest FB icon.
2022-08-26 19:36:44 +09:30
Chi-Hsuan Huang 7068c78101
Fix JS lint errors (#33484)
* Fix @woocommerce/data lint errors

* Fix internal-e2e-builds lint error

* Fix lint errors
2022-06-21 16:37:34 +08:00
RJChow 26ec889111 Manually change i18n text domain from 'woocommerce-admin' to 'woocommerce' in WCA Client .md files 2022-04-01 11:41:32 +08:00
RJChow 1ba60ee69d Codemod to change i18n text domain from 'woocommerce-admin' to 'woocommerce' in WCA Client 2022-04-01 11:41:32 +08:00
Chi-Hsuan Huang c05ed7777a Update dependencies to support react 17 (https://github.com/woocommerce/woocommerce-admin/pull/8305)
* Upgrade dependencies to support react17

Update pkg

Update @wordpress/api-fetch and gridicons

* Update test snapshots

* Update SnackbarList with latest react-spring

* Mock data.dispatch for task-list-item.test.tsx

* Remove '@wordpress/components/src/visually-hidden/style' import

wp-components has included it

* Update interpolateComponents import path

* Fix display-options test

* Add changelogs

Update changelogs

* Add @automattic/explat-client-react-helpers back

* Update webpack.config for explat-client-react-helpers

Update webpack config comment

Fix grammar
2022-02-21 10:34:25 +08:00
louwie17 83e1addd82 Fix minor process issues (https://github.com/woocommerce/woocommerce-admin/pull/8279) 2022-02-08 18:22:26 -04:00
louwie17 3998f88597 Remove unpublished wc-admin-settings package and update getSetting usage (https://github.com/woocommerce/woocommerce-admin/pull/8057)
* Remove use of wc-admin-settings from packages

* Move getSetting to getAdminSetting and remove wc-admin-settings package

* Add changelog

* Update package.json and remove last use of wc-admin-settings
2022-01-06 08:53:30 -04:00
And Finally 1a48569af9 Allow for 9 items in Marketing recommended lists (https://github.com/woocommerce/woocommerce-admin/pull/7887)
* - Increased `per_page` parameter of API request in `getRecommendedPlugins` from 6 to 9, to accommodate additional MailPoet item.
- Added new `mailpoet.js` with SVG icon for MailPoet, and corresponding entry to list of product icons.

* Changelog for this change.

* Renamed changelog.

* Added PR number to changelog content.

* Fix formatting

Co-authored-by: Adrian Duffell <9312929+adrianduffell@users.noreply.github.com>
2021-11-05 12:08:35 +08:00
Rua Haszard 0225ffdb8d show Pinterest for WooCommerce in `Marketing > Installed` (https://github.com/woocommerce/woocommerce-admin/pull/7417)
* show Pinterest for WooCommerce in `Marketing > Installed`

* tweak Pinterest bounding rect so padding is consistent with other icons

* add changelog entry

* add testing instructions

* tweak wording for clarity

* link to correct Pinterest admin settings URL

* detect if Pinterest is set up & link to onboarding if appropriate

* add utm_medium campaign link tracker tag to docs link

* change all the logs 🪵

* Remove redundant changelog entry from readme

Co-authored-by: Adrian Duffell <9312929+adrianduffell@users.noreply.github.com>

* remove todo for Pinterest onboarded/setup status (now implemented)

Co-authored-by: Rua Haszard <rua@automattic.com>
Co-authored-by: Adrian Duffell <9312929+adrianduffell@users.noreply.github.com>
2021-08-26 15:47:17 +12:00
louwie17 022f7a173a Remove depreciated shared settings hook (https://github.com/woocommerce/woocommerce-admin/pull/7480)
* Initial set up for the WCAdminSettingsRegistry

* Make use of filter for admin settings

* Add wc/settings package and remove depreciated dropzone wrapper

* Make use of the getSetting function instead of accessing window directly

* Add comments

* Add changelog

* Remove un needed changes

* Update dropzone provider logic and fix styling

* Remove old css
2021-08-24 08:39:48 -03:00
Sam Seay 27e7c5831c Update outgoing woocommerce.com links to include `utm_medium=product` (https://github.com/woocommerce/woocommerce-admin/pull/7408) 2021-08-04 08:56:43 +12:00
Jeff Stieler 8e61f55017 Allow packages to be built in isolation. (https://github.com/woocommerce/woocommerce-admin/pull/7286)
* Use yarn instead of npm.

In prep for workspaces, since we're locked to npm < 7. See: https://github.com/woocommerce/woocommerce-admin/pull/7126#issue-661287749

* Initial workspace creation.

* Add initial tsc build to @woocommerce/number.

* Attempt to build experimental package.

* Try currency package.

* Define all packages as workspaces.

* Use tsconfig common to packages.

* Fix currency package build.

* Build csv-export with tsc.

* Try to build customer-effort-score with tsc.

* Fix JSX pragma.

* Build data package with tsc.

* Build date package with tsc.

* Build experimental package with tsc.

* Try to build explat package with tsc.

* Build navigation package with tsc.

* Build notices package with tsc.

* Build onboarding package with tsc.

* Build components package with tsc.

* Swap in package JS build into main script.

* Fix experimental package build.

* Try per-package css build with components.

* Try to run components package tests in isolation.

Broken on JSX in test files not being transformed.

* Move @woocommerce/wc-admin-settings into a package.

* Try to fix components package tests.

Fails because we aren't setting up the jest/jest-dom globals.

* Move JS test code to reusable (private) package.

* Enable incremental TS builds.

* Use workspaces to run JS tests.

* Use new jest configs for update snapshot scripts.

* Fix style builds.

* Fix package version in components.

* Fix client test debug and watch scripts.

* Update yarn lock.

* Update test-staged behavior.

* Try to fix storybook.

* Fix storybook.

* Update more npm commands to yarn.

* Add changelog.

* Fix lint errors.

* Update packages readme script references.

* Clean up unused gitignore match.

* Fix another npm command.

* Fix JS builds on watch.

* Fix start script.

* Fix start scripts for packages.

* Use tsc to build packages before tests

* yarn -> npm.

# Conflicts:
#	package-lock.json
#	package.json

* Fix linter error.

* Remove workspace definitions.

* Fix missing Fragment import.

* Fix package lock.

* Fix missing reference.

* Only build commonjs module for js-tests helper.

* Remove errant dependency from components.

* Remove noop scripts.

* Fix package JS build before testing.

* Revert noisy formatting changes.

* Fix precommit and test scripts.

* Fix minimum expected recommended extension count.

Japan test case breaks this.

* Revert babel config changes.

* chore(release): publish

 - @woocommerce/components@7.2.0
 - @woocommerce/csv-export@1.4.0
 - @woocommerce/currency@3.2.0
 - @woocommerce/customer-effort-score@1.1.0
 - @woocommerce/data@1.4.0
 - @woocommerce/date@3.1.0
 - @woocommerce/dependency-extraction-webpack-plugin@1.7.0
 - @woocommerce/eslint-plugin@1.3.0
 - @woocommerce/experimental@1.5.0
 - @woocommerce/explat@1.1.0
 - @woocommerce/js-tests@1.1.0
 - @woocommerce/navigation@6.1.0
 - @woocommerce/notices@3.1.0
 - @woocommerce/number@2.2.0
 - @woocommerce/onboarding@1.1.0
 - @woocommerce/tracks@1.1.0
 - @woocommerce/wc-admin-settings@1.1.0

* Add script for running 'start' in a package.

* Remove yarn from gitignore.

* Update package changelogs, prep versions for release.

* Try to fix E2E tests after main merge.

* Some cleanup.

* Add changelog.

Co-authored-by: Paul Sealock <psealock@gmail.com>
2021-07-14 16:38:57 -04:00
Ilyas Foo 3b7c05a845 WordPress 5.8 compatibility UI fixes (https://github.com/woocommerce/woocommerce-admin/pull/7255)
* Add appropriate text props to supplement variant revamp

* Add font styles to navigation title since its removed in wp.components

* Add more missing styles

* Accidental change

* Add changelog

* Fix lint

* Update jest snapshots
2021-06-28 09:14:59 +08:00
Mik 3240132eb2 Replace marketing extension - Google Listings and Ads - fix (https://github.com/woocommerce/woocommerce-admin/pull/7029)
* Replace list of installed extensions

* Remove clipping path from Google icon

* Add changelog entry
2021-05-24 16:39:04 +08:00
Mik 820bf30e29 Replace marketing extension - Google Listings and Ads (https://github.com/woocommerce/woocommerce-admin/pull/6939)
* Replace google icon

* Remove note for Google Ads extension

* Replace extension in API OnboardingProfile

* Record event for new extension

* Replace extension in onboarding flow

* Replace extension benefits

* Change background colour of Google icon

* Fix svg warnings

* Add changelog entry

* Fix prettier error

* Add old note to obsolete list for removal
2021-05-10 10:56:47 +01:00
Darren Ethier 4210b6f0a8 Update @wordpress/eslint-plugin dependency to latest version. (https://github.com/woocommerce/woocommerce-admin/pull/5856)
* update @wordpress/eslint-plugin dependency to latest version

* local prettier config isn’t needed anymore because of fix in upstream package

* add jsdoc config to use typescript format for jsdocs

* update changelog

* update packages and include .prettierrc.js back in for code editor support of prettier

* add docs

* minor prettier fix in test file

* Convert all new eslint rules throwing errors to warnings temporarily to be handled in separate prs

* updated changelog

* fix package-lock.json

* prettier auto-fixes

* add prettier dependency at root

* sigh prettier is being finicky

* version bump

Co-authored-by: Paul Sealock <psealock@gmail.com>
2021-01-26 13:24:28 +13:00
Joshua T Flowers bc998444a3 Future proof experimental components (https://github.com/woocommerce/woocommerce-admin/pull/5961)
* Possibly use safe Text component

* Possibly use safe navigation components

* Add experimental package

* Update components to import from woocommerce/experimental

* Make experimental package private

* Reference experimental package relatively

* Update packages/experimental/README.md

Co-authored-by: Paul Sealock <psealock@gmail.com>

* Update packages/experimental/CHANGELOG.md

Co-authored-by: Paul Sealock <psealock@gmail.com>

* Update history state instead of mocking getQuery in tests

* Handle PR feedback

* Create excluded externals array and return early

Co-authored-by: Paul Sealock <psealock@gmail.com>
2021-01-07 18:57:09 -05:00
Tomek Wytrębowicz da14803c64 Add fancy placeholders for Marketing components (https://github.com/woocommerce/woocommerce-admin/pull/5611)
- Add placeholders for `RecommendedExtensionsItem` and `KnowledgebaseCardPost`. Addresses https://github.com/woocommerce/woocommerce-admin/issues/5375.
- Fix translation of "By" in KnowledgeBase Card. Addresses https://github.com/woocommerce/woocommerce-admin/pull/5611#discussion_r525406563 (comment).
2020-11-23 11:15:07 +01:00
Sam Seay be47d9d795 Only import the Gridicons we need, to reduce package size. (https://github.com/woocommerce/woocommerce-admin/pull/5668) 2020-11-19 09:52:24 +13:00
Gan Eng Chin 43a54106f3 Convert the marketing tab cards to use the new @wordpress/components Card component. (https://github.com/woocommerce/woocommerce-admin/pull/5428)
* Change WooCommerce Card to WordPress Card in the WelcomeCard component.

Use isElevated and margin-bottom to make the Card look close to previous UI.

* Use WordPress Card in KnowledgeBase.

For the description in Card header, it will be rendered as a p element instead of h2, which should be more semantically correct. Test is updated to reflect this.

* Add Card component wrapper that supports title and description props.

* Use WordPress Card component wrapper in recommended extensions.

* Code refactor to use WordPress Card wrapper.

* Use WordPress Card wrapper in installed extension.

* Use margin-bottom for children layout at the parent CSS level.

* Add test for Card.

* Fix no margin between cards in Coupons page, and remove previous css for WooCommerce Card.

* Remove old WooCommerce Card css.

* Don't use isElevated in Card, to match the style in WooCommerce Home screen.

* Make item border color consistent with WordPress Card in Installed Extension card.

Use WordPress Card without CardBody here because we don't want the padding from CardBody.

* Make the card description look similar to previous WooCommerce Card description.

* Fix spelling in CSS class names.

* Fix WooCommerce spelling in comment.

* Change the Marketing Card style to match with WooCommerce Home style.

Also change the text gray color to use CSS variable instead of hardcoded gray value.

Also remove the usage of h2 in the Card header to follow WooCommerce Home style.

* Use $gray-200 as light borders between items in card.

* Remove unneeded CSS code based on TODO in comment.
2020-10-23 14:41:45 +08:00
Gan Eng Chin f5432beb72 Display a "read blog" message (https://github.com/woocommerce/woocommerce-admin/pull/5453)
* Display a "read blog" message when there is an error in getting blog posts or there is no blog posts.

* Simplify ReadBlogMessage with interpolateComponents and Link.
2020-10-23 14:07:58 +08:00
Gan Eng Chin 523eac0131 Display messages for empty content and network request error (https://github.com/woocommerce/woocommerce-admin/pull/5411)
* Code refactor with reducer and new action type SET_ERROR.

* Add default state for errors and code for SET_ERROR for blogPosts.

* Don't use handleFetchError, instead save the error and blogPosts category into redux store.

* Display message for error and empty content.

* Fix grammar; fix relevant test.

* Code refactor: put action type strings in one place.

* Add tests for error UI.

* Remove illustration for empty content with no blog posts.
2020-10-19 23:18:21 +08:00
Jeff Stieler 7ca9e691d4 Migrate Enzyme tests to React Testing Library (https://github.com/woocommerce/woocommerce-admin/pull/5299)
* Migrate leaderboard tests to RTL.

* Remove test of default prop value.

* Migrate ReportSummary tests to RTL.

* Migrate ActivityCard tests to RTL.

* Migrate ActivityCardPlaceholder tests to RTL.

* Migrate remaining ProductType tests to RTL.

* Migrate Card tests to RTL.

* Update RTL and user event packages.

* Migrate Date tests to RTL.

* Migrate D3Legend tests to RTL.

* Migrate D3Base tests to RTL.

* Migrate Gravatar tests to RTL.

* Migrate ImageUpload tests to RTL.

* Migrate ProductImage tests to RTL.

* Migrate Rating tests to RTL.

* Migrate Search tests to RTL.

* Migrate Plugins tests to RTL.

* Migrate SelectControl tests to RTL.

* Migrate Timeline tests to RTL.

Remove tests that inspect DOM since there are snapshots.

* Migrate DismissModal tests to RTL.

* Migrate SetupNotice tests to RTL.

* Migrate WelcomeCard tests to RTL.

* Fix setup error reason retrieval in ShippingBanner.

* Migrate ShippingBanner tests to RTL.

* Migrate RecommendedExtensions tests to RTL.

* Migrate KnowledgeBase tests to RTL.

* Rename enzyme setup file, modify to setup RTL.

* No need to import jest-dom in test files.

* Remove enzyme dependency.

* Use snapshot for testing Leaderboard markup.

* Switch from "not to be empty" to "be in the document".

* No need to waitFor() recordEvent mock.

* Be specific about clicking the "hide" button.

* Use toBeVisible() instead of checking style property.
2020-10-15 08:41:39 -04:00
Daniel Bitzer d8098d6fd7 Adds `@woocommerce/tracks` package (https://github.com/woocommerce/woocommerce-admin/pull/5017)
* Add @woocommerce/tracks package.json

* Add @woocommerce/tracks .npmrc

* Move lib/tracks.js in to tracks package

* Add tracks package debug dependency

* Add readme for tracks package

* Add changelog for tracks package

* Add info about debugging and opt-ins to tracks package readme

* Load tracks package script

* Add tracks package to packages readme

* Add tracks package to webpack config

* Add tracks package external to starter-pack

* Replace lib/tracks uses with @woocommerce/tracks

* Update package-lock.json
2020-08-20 14:29:52 +09:30
Paul Sealock c145783e0a Fix dependency declarations (https://github.com/woocommerce/woocommerce-admin/pull/4972)
* renmove WC comment block

* client routes

* more fixes

* moar search

* getting there

* by hand now

* david beating goliath

* mission accomplished

* client filepath

* save

* got it

* remove script

* fixes

* deal with package internal dep

* remove webpack alias

* fix webpack relative paths

* remove commented rule

* remove extra line

* remove unused modules entry
2020-08-13 14:05:22 +12:00
Jason Conroy b078134073 Add product and category props to mock RecommendedExtensionsItem (https://github.com/woocommerce/woocommerce-admin/pull/4912) 2020-08-04 15:04:27 -07:00
Jason Conroy a8275715e3 Use clipRule and fillRule props (https://github.com/woocommerce/woocommerce-admin/pull/4889) 2020-07-31 09:44:56 +09:30
Darren Ethier dc5304823b Add @woocommerce/eslint-plugin (https://github.com/woocommerce/woocommerce-admin/pull/4714)
* add new woocommerce/eslint-plugin

* implement eslint-plugin (switch scripts to use wp-scripts etc)

* various linting fixes

* more lint fixes

* improve fix script

* more eslint fixes

* more eslint fixes

* temporary convert rules to warnings until they are all handled

* linting fixes

* update package-lock.json

* remove duplicates

* remove unnecessary `@wordpress/dependency-group` rule config

* add docs and adjust rules

* prettier fix

* fix merge artifact

* convert more rules to warnings

* change order to reflect importance

* install babel-preset-default

* remove unnecessary configuration for babel

* fix dependency group rule and test

* fix test

* handle collapsible whitespace

* add react testing library eslint plugin

* linter errors

* Add back in prettierrc

* package-lock update

* js lint fix with --fix

* disable whitespace in translation

* package-lock update

* make eslint actual dependency, not peer dependency

* pin eslint to v7

* I don't know why, but its working

* fix lint js

Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-07-28 14:32:58 +12:00
Sam Seay b448ff60b7 Update @wordpress/base-styles and replace deprecated variables (https://github.com/woocommerce/woocommerce-admin/pull/4759)
Fixes woocommerce/woocommerce-admin#4732

This updates `@wordpress/base-styles`, and because `@wordpress/components` depends on variables from it, that must be updated as well.

There are 3 major changes required as part of updating:

1. The $theme-color variable is no longer exposed by base-styles. Instead there are 3 css vars exposed. These are made available by use of a provided mixin. Situations where $theme-color was darkened using scss have been mapped as best as possible to the 2 other darkened shades of the css var that are available such as `--wp-admin-theme-color-darker-20` and `--wp-admin-theme-color-darker-10`. In some cases this means the colors are not exactly the same as before.

2. The post css `theme()` call is no longer available. All uses of this have been consolidated to use of the main theme css var `--wp-admin-theme-color`. This means that calls like `theme(secondary)` or `theme(outline)` etc have all been consolidated to the one color.

3. Many of the variables used for different shades of gray have been deprecated. These have been mapped across to the new gray variables. (Mapped according to the list described in woocommerce/woocommerce-admin#4732)
2020-07-17 12:11:42 +12:00
Jason Conroy 8afaa58b9e Update marketing tab styles (https://github.com/woocommerce/woocommerce-admin/pull/4794)
* Fix incorrect woocommere-admin spelling

* Update styles

* Add icons

* Add hover effect for coupon icons

* Remove variable comment

* Update color case

* Style lint fixes

* Use $theme-color

* Update icons, use wordpress/icons where possible

* Adjustment for using smaller default icons and no fills in the svgs

* Use var(--wp-admin-theme-color) instead of $theme-color

* Reorg coupons stylesheet

* Update PropTypes for ProductIcon

* Adjust icon export

* Rever to using $theme-color

* Add versions of link, people and currency-dollar

* Overide coupons icon background color

* Add background transition to icon wrapper
2020-07-16 15:22:06 +09:30
Jason Conroy 4cf586c4f1 Add Coupon feature (https://github.com/woocommerce/woocommerce-admin/pull/4526)
* Handle new object for posts and recommendations

* Set breadcrumb parent for woocommerce-coupons to be woocommerce-marketing

* Add main coupon wrapping component

* Render coupon wrapper element below coupon table using wp-admin-scripts

* Finish off implementing category param for data store resolvers

* Create a helper trait for legacy coupons

* Add coupon related titles and descriptions

* Add note for the coupons being moved

* Allow for querying by note name in the notes Data Store

* Revamp coupon moved trait

* Add the new note only if we don't have an unactioned note and perform a redirect to ensure menu updates

* set_icon is deprecated

* Move coupon menu, adding a note for customers

* Translate title and descriptions

* Whitespace

* Account for coupon functionality being disabled

* Hide legacy menu before redirect

* Don’t keep adding the note if customer dismisses it from inbox

* Move behind feature flag

* Add note if feature enabled

* Add filter to override coupon feature

* Tweak option name to refer to wc_admin

To help with finding etc.

* use css variables

* Add the new note only if we don't have an unactioned note

* Switch the filter logic so `false` turns off the feature

This is a bit more intuitive when utilizing the filter

* Remove extraneous string and add trailing new lines

* Use correct posts object in tests

* Revert accidental removal of where_types

* Add coupons category to RecommendedExtensions

* Use 1.1 api to get categorized recommendations

* Add missing text domains

* Fix menu handling to point to woocommerce-marketing

* Only load coupon scripts on the coupon page

* Rework marketing menu logic to register pages more properly

* Use correct wc-admin path for marketing page

* Remove separate feature flag

WC Admin has existing feature flags to load enable/disable the feature

* Only set the coupon parent to marketing when the feature is enabled

* Only load coupon feature if marketing feature is enabled

Co-authored-by: Dan Bitzer <danielbitzer@gmail.com>
Co-authored-by: Jeremy Pry <jeremy.pry@gmail.com>
2020-06-16 12:00:41 +09:30
Jason Conroy 8f291d2ec3 Refactor marketing components to make more reusable. (https://github.com/woocommerce/woocommerce-admin/pull/4524)
* refactor slider component to be functional

* Refactor RecommendedExtensions

* Refactor KnowledgeBase

* Refactor API to account for component location changes and categories

* Fix missing param description

* Remove unnessary use

* Pass down the category of the received plugins.

* Store the recommended plugins for the different categories separately.

* Pass down the category.

* Add new functions to get by category.

* set categories

* Handle new object for posts and recommendations

* Update tests

* Finish off implementing category param for data store resolvers

* Update js tests

* Fix incorrect reference to kb component

Co-authored-by: Dan Bitzer <danielbitzer@gmail.com>
2020-06-12 16:47:17 +09:30
Paul Sealock 41481a7299 Button: Remove deprecated isDefault (https://github.com/woocommerce/woocommerce-admin/pull/4548) 2020-06-12 07:22:20 +12:00
Paul Sealock 41eeb4f9f9 Options: Add data store (https://github.com/woocommerce/woocommerce-admin/pull/4144) 2020-06-11 11:49:27 +12:00
Jason Conroy 987b2bf5eb Refactor and add tests for the marketing WelcomeCard component (https://github.com/woocommerce/woocommerce-admin/pull/4495)
* Convert welcome card to functional component

* Add tests for the WelcomeCard
2020-06-10 11:00:25 +09:30
Jason Conroy 9e03657451 Correctly remove reference to debounced updateSliderHeight method (https://github.com/woocommerce/woocommerce-admin/pull/4522) 2020-06-09 11:39:43 +09:30
Jason Conroy 308a14ff38 Bind onClick event handler for marketing kb article click (https://github.com/woocommerce/woocommerce-admin/pull/4437) 2020-05-26 08:33:58 +09:30
Daniel Bitzer c6371c32db Fix in app purchase back link for recommend marketing extensions card (https://github.com/woocommerce/woocommerce-admin/pull/4301)
* Add getInAppPurchaseUrl lib function

* Implement getInAppPurchaseUrl for marketing tab

* Include the directory with the wccom-site param

* use getInAppPurchaseUrl helper function in onboarding CartModal component

* Fix 'addQueryArgs' is defined but never used

* Fix Missing JSDoc @return description

* Make connectNonce setting a global setting rather than a marketing once

Co-authored-by: Jason Conroy <jason@findingsimple.com>
2020-05-20 15:03:58 +09:30
Daniel Bitzer 16fdae3d06 Hide Marketing Tab Recomended Extensions card if marketing suggestions are disabled (https://github.com/woocommerce/woocommerce-admin/pull/4194)
* Add allowMarketplaceSuggestions to woocommerce_shared_settings

* Convert to functional component

* Hide ReccomendedExtensions card if opted out from marketing suggestions
2020-04-24 15:41:57 -07:00
Daniel Bitzer bceb25ba0f Improve layout of Installed Extensions marketing card for tablet and mobile screens (https://github.com/woocommerce/woocommerce-admin/pull/4063)
* Set a max word length for the installed extension descriptions

* Improve InstalledExtensions layout for tablet and mobile

Mobile still needs work…

* Align product icon to top

* Tweak WelcomeCard mobile appearance

* Fix alignment
2020-04-17 11:27:22 -07:00
Daniel Bitzer ae526f7e1e Fix confusing UX when knowledge base card fails to retreive posts (https://github.com/woocommerce/woocommerce-admin/pull/4133)
* Use EmptyContent component when there are no knowledge base posts

* Reduce transient timeout to 15 mins when remote get fails

* Satisfy phpcs

* Satisfy jslint
2020-04-16 10:19:20 +09:30
Jeff Stieler 851d826634 Replace welcome image on marketing tab with svg. closes woocommerce/woocommerce-admin#4057 (https://github.com/woocommerce/woocommerce-admin/pull/4066)
Co-authored-by: James Koster <james@jameskoster.co.uk>
2020-04-06 16:39:18 -06:00
Jason Conroy e5bd8f3184 Marketing Tab MVP (https://github.com/woocommerce/woocommerce-admin/pull/3953)
* Add Marketing feature flag

* Add marketing page and menu item

* Register marketing page with layout controller

* Add initial marketing cards

* Add max-width to marketing overview page

* Add initial marketing WelcomeCard component

* Make marketing welcome card permanently dismiss

* Add a readme for the marketing page components

* Record tracks event when marketing welcome dismissed

* Match design width

* Add welcome image and initial styles

* Use gridicon for close button

* Fix whitespace

* Add PluginsHelper::get_plugin_data()

* Add initial Marketing\InstalledExtensions class

* Preload installed marketing extensions data

* Tweak extension statuses

* Add InstalledExtensionRow component

* Add initial extension data to InstalledExtensions card

* Refactor PluginsHelper::get_plugin_data method

Using the new get_plugin_path_from_slug method

* Ensure get_plugins() function is available for PluginsHelper

* Simplify using PluginsHelper method

* Add MailChimp configured status logic

* Add links to InstalledExtensionRow component

* Add key prop to extensions list

* Setup styles for InstalledExtensions card

* Display nothing if no installed extensions

* Add InstalledExtensions::get_allowed_plugins()

* Setup Marketing Overview API controller

* Add /activate-plugin marketing endpoint

* Add more extensions URL props

* Add Facebook extension configured status logic

* Update Facebook extension URL props

* Fix extenion data logic

* Move component into it’s own directory

* Setup /marketing/overview/recommended endpoint

* Initial marketing page card header styles

* Add basic extension data to RecommendedExtensions

* Use color as variable

* Tweak card header padding for design

* Add basic styling to RecommendedExtensions card

* settingsUrl is not available if the plugin is not active

* Add /marketing/overview/installed-plugins REST endpoint

* Add basic activation functionality to InstalledExtensions component

* Don’t throw error on success

* Add MVP data store for installed extensions card

* Add core dark blue color variable

* Add styles for installed extensions card

* Move knowledge-base component to its own directory

* Pull recommended marketing plugins from remote test site

* Hide description when configured

As per design

* Tweak colors based on design

* Finish off styling for RecommendedExtensions

* Limit recommended extensions to 6 items

* Add error handling to RecommendedExtensions card

* Rename ‘copy’ extension prop

* Add marketing button component to match design

* Create ProductIcon component for marketing

* Add InstalledExtension icons

* Fix icon image paths

* Add ProductIcon to InstallExtensionRow

* Final styling to installed extensions card row

* Knowledge base card placeholders

* Fix missing icons when plugin not activated

* Remove logging

* Tweak array structure to ensure we have an array in JS

and not an object

* Refactor KnowledgeBase marketing component

- We don’t need loop through every post when rendering, just pick the posts we need
- Remove unused classes

* Move padding from each slide to the container

* Improve slider animations by absolute positioning the slides

* Reduce the slider animation timeout and add a note

* Add in-app purchase flow url params for recommended extensions

* Fix slider animation

* Reset slider height on window resize

* Short slider animation, fix double margin on smaller screens

* Add initial marketing/knowledge-base endpoint

* Pull knowledge base posts from API

* Rename welcome card dismiss tracks event

* Record event on recommended product click

* Recond onclick events for installed extensions card

* Record event when carousel navigation clicked

* img elements must have an alt prop

* Remove import that is never used

* use camelCase

* Decode HTML entities from API call

* Remove unused container div

* Add card loading state

* Add images to knowledge base card

* Link knowledge base posts

* Use the Pagination component rather than duplicate it’s functionality

* Clean up and rename knowledge base slider

* Clean knowledge base CSS and update responsive styles for single post slide

* Add a README for button component

* Add README for product icon component

* Add initial readme for Slider component

* Add correct image sizes to knowledge base slider, finalize styles

* Fix extension link urls

* Resolve some code formatting issue

* Bind class click methods to this

* Wrap nodes in Fragment

* Fix wccom-back path

* Add placeholder author and gravatar

Default avatar url size returned from the API is currently set to 96 so I’ve done a simple replace with 16

* Fix style-lint expected new line

* Add docblock for get_knowledge_base_posts()

* Setup data store for marketing to handle installedExtensions card

* Fix function names

“Activating” not “installing”

* Move welcome card component to its own dir

* IconButton component is going to be deprecated

ref: https://github.com/WordPress/gutenberg/pull/19299

* Support multiple activating plugins in the data store

* Rename extension to plugin for consistency

* Add propTypes to component

* Rename data-store/ to data/

* Fix import paths

* Extract isActivatingPlugin logic into datastore

* Move data store selectors into own file

* POST requests are not cached

* Export apiFetch action

* Don’t wrap API response in object

* Implement data store for recommended extensions

* Implement data store for marketing knowledge base

* Tidy getRecommendedPlugins resolver

* Try a cross browser cover/crop image effect to fit proposed design

And help fit longer titles in

* Add caught errors to handler

* Adjust positioning so watermater is displayed

* InstalledExtensions phpcs fixes

* Marketing phpcs fixes

* Alignment fix

* MarketingOverview phpcs fixes

* Missing full stop

* Update breadcrumbs to use new approach

* Fix style lint issues

* Record `marketing_knowledge_article` track event on knowledge base post click

* Import apiFetch and controls from @wordpress/data-controls

* Hex color to lowercase

* Remove duplicate method after rebase

* Use new showPageArrowsLabel rather than hide with CSS

* Fix blurry avatars on hidpi displays

* Hide avatar if URL is falsy

* Replace test author data with live data

* Combine conditionals into ternary

* Combine conditionals into ternary

* Simplify class column logic

* Only preload option and component settings in the admin

* Fix isActivatingPlugin not updating

Component was not re-rendeding.

* Use querySelector over getElementsByClassName

* Hide Marketing Welcome Card immediately on click

* Use create-a-ticket url for supportUrl and make that the default

* Add getInstalledPlugins resolver with preloaded data

* Revert "Add getInstalledPlugins resolver with preloaded data"

This reverts commit b8b127ec6411bef15616576b3bb189dc31777c13.

* Load plugin data in a separate request after activation

* Update welcome image

* Don’t return plugin data in the activation request.

* A space is required before closing bracket

* Update Jest config to gracefully handle static assets

Ref: https://jestjs.io/docs/en/webpack#handling-static-assets

* Remove unused onExit property

* Remove placeholder README

* Use prop directly

* yield createNotice

* Add note to indicate which Category

* Increase transient time to 3 days

* Use $gap-small

* Add proptype

* Add debounce to slider height resize listener

* Clean up isLoading logic

* Dont show image elements if image data is empty

* Open knowledge base posts in a new window

* Add “noreferrer”

* Turn the tab on in all env

Co-authored-by: Daniel Bitzer <danielbitzer@gmail.com>
2020-03-28 06:48:27 -07:00