ActiveCampaignConfig.js
5 years ago
ChooseProvider.js
3 months ago
FluentCRMConfig.js
1 month ago
MailchimpConfig.js
5 years ago
MailerLiteConfig.js
5 years ago
WebhooksConfig.js
3 years ago
YoutubeChannelId.js
1 month ago
YoutubeChannelId.scss
1 month ago
YoutubeChannelId.js
97 lines
| 1 | /** |
| 2 | * WordPress dependencies |
| 3 | */ |
| 4 | const { __ } = wp.i18n; |
| 5 | const { TextControl, ExternalLink, Button, Flex } = wp.components; |
| 6 | const { useState, useEffect } = wp.element; |
| 7 | const { useSelect, dispatch } = wp.data; |
| 8 | |
| 9 | import "./YoutubeChannelId.scss"; |
| 10 | |
| 11 | export default ({ onClose, value, setValue }) => { |
| 12 | const [saving, setSaving] = useState(false); |
| 13 | |
| 14 | const userCanReadSettings = wp.data.useSelect((select) => |
| 15 | select("core").canUser("read", "settings") |
| 16 | ); |
| 17 | |
| 18 | const youtube = useSelect((select) => { |
| 19 | return select("presto-player/player").youtube(); |
| 20 | }); |
| 21 | |
| 22 | useEffect(() => { |
| 23 | setValue(youtube.channel_id); |
| 24 | }, [youtube?.channel_id]); |
| 25 | |
| 26 | const handleSubmit = async (e) => { |
| 27 | e.preventDefault(); |
| 28 | setSaving(true); |
| 29 | dispatch("presto-player/player").updateYoutube({ channel_id: value }); |
| 30 | |
| 31 | const data = { |
| 32 | ...youtube, |
| 33 | ...{ channel_id: value }, |
| 34 | }; |
| 35 | |
| 36 | try { |
| 37 | let response = await wp.apiFetch({ |
| 38 | path: "wp/v2/settings", |
| 39 | method: "POST", |
| 40 | data: { |
| 41 | presto_player_youtube: data, |
| 42 | }, |
| 43 | }); |
| 44 | if (response?.presto_player_youtube) { |
| 45 | dispatch("presto-player/player").setYoutube( |
| 46 | response?.presto_player_youtube |
| 47 | ); |
| 48 | onClose(); |
| 49 | } |
| 50 | } catch (e) { |
| 51 | } finally { |
| 52 | setSaving(false); |
| 53 | } |
| 54 | }; |
| 55 | |
| 56 | // use must be able to read settings |
| 57 | if (!userCanReadSettings) { |
| 58 | return ""; |
| 59 | } |
| 60 | |
| 61 | return ( |
| 62 | <form onSubmit={handleSubmit}> |
| 63 | <TextControl |
| 64 | className="presto-youtube-channel__input" |
| 65 | label={__("Youtube Channel ID", "presto-player")} |
| 66 | help={ |
| 67 | <p> |
| 68 | <ExternalLink href="https://support.google.com/youtube/answer/3250431?hl=en"> |
| 69 | {__("Find my channel id", "presto-player")} |
| 70 | </ExternalLink> |
| 71 | </p> |
| 72 | } |
| 73 | value={value} |
| 74 | onChange={(channel_id) => setValue(channel_id)} |
| 75 | // required |
| 76 | /> |
| 77 | |
| 78 | <Button |
| 79 | disabled={saving} |
| 80 | isBusy={saving} |
| 81 | className="presto-youtube-channel__button" |
| 82 | isPrimary |
| 83 | type="submot" |
| 84 | > |
| 85 | {__("Save", "presto-player")} |
| 86 | </Button> |
| 87 | <Button |
| 88 | onClick={onClose} |
| 89 | className="presto-youtube-channel__button" |
| 90 | isTertiary |
| 91 | > |
| 92 | {__("Cancel", "presto-player")} |
| 93 | </Button> |
| 94 | </form> |
| 95 | ); |
| 96 | }; |
| 97 |