JezK
Edit File: sc-cancel-survey2.js.map
{"file":"sc-cancel-survey2.js","mappings":";;;;;;;;;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,mEAAmE,CAAC;AAC9F,6BAAe,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oWCgGiB,UAAE,iTAKW,UAAE,4OAQ/C,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controllers/dashboard/sc-cancel-survey/sc-cancel-survey.scss?tag=sc-cancel-survey&encapsulation=shadow","src/components/controllers/dashboard/sc-cancel-survey/sc-cancel-survey.tsx"],"sourcesContent":[".cancel-survey {\n &__abort-link {\n color: var(--sc-input-help-text-color);\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\nimport apiFetch from '../../../../functions/fetch';\nimport { CancellationReason, ResponseError, SubscriptionProtocol } from '../../../../types';\n\n@Component({\n tag: 'sc-cancel-survey',\n styleUrl: 'sc-cancel-survey.scss',\n shadow: true,\n})\nexport class ScCancelSurvey {\n private textArea: HTMLScTextareaElement;\n @Prop() protocol: SubscriptionProtocol;\n @Prop({ mutable: true }) reasons: CancellationReason[];\n @State() loading: boolean;\n @State() selectedReason: CancellationReason;\n @State() comment: string;\n @State() error: ResponseError;\n @Event() scAbandon: EventEmitter<void>;\n @Event() scSubmitReason: EventEmitter<{ reason: CancellationReason; comment: string }>;\n\n componentWillLoad() {\n if (!this.reasons) {\n this.fetchReasons();\n }\n }\n\n @Watch('selectedReason')\n handleSelectedReasonChange() {\n if (this.selectedReason?.comment_enabled) {\n setTimeout(() => {\n this.textArea.triggerFocus();\n }, 50);\n }\n }\n\n async fetchReasons() {\n try {\n this.loading = true;\n this.reasons = await apiFetch({\n path: 'surecart/v1/cancellation_reasons',\n });\n } catch (e) {\n console.error(e);\n this.error = e;\n } finally {\n this.loading = false;\n }\n }\n\n async handleSubmit(e) {\n e.preventDefault();\n e.stopImmediatePropagation();\n try {\n this.scSubmitReason.emit({ reason: this.selectedReason, comment: this.comment });\n } catch (e) {\n console.error(e);\n this.error = e;\n }\n }\n\n renderReasons() {\n if (this.loading) {\n return (\n <sc-choice>\n <sc-skeleton></sc-skeleton>\n </sc-choice>\n );\n }\n\n return (this.reasons || []).map(reason => (\n <sc-choice\n value={reason?.id}\n name=\"reason\"\n onScChange={e => {\n if (e.target.checked) {\n this.selectedReason = reason;\n }\n }}\n >\n {reason?.label}\n </sc-choice>\n ));\n }\n\n render() {\n const { reasons_title, reasons_description, skip_link } = this.protocol?.preservation_locales || {};\n\n if (this.loading) {\n return <sc-skeleton></sc-skeleton>;\n }\n\n return (\n <div class=\"cancel-survey\">\n <sc-dashboard-module heading={reasons_title} style={{ '--sc-dashboard-module-spacing': '2em' }}>\n <span slot=\"description\">{reasons_description}</span>\n <sc-form onScSubmit={e => this.handleSubmit(e)} style={{ '--sc-form-row-spacing': '2em' }}>\n <sc-choices showLabel={false} label={__('Choose a reason', 'surecart')} style={{ '--columns': '2' }} required>\n {this.renderReasons()}\n </sc-choices>\n {this.selectedReason?.comment_enabled && (\n <sc-textarea\n label={this.selectedReason?.comment_prompt || __('Additional Comments', 'surecart')}\n required\n ref={el => (this.textArea = el as HTMLScTextareaElement)}\n onScInput={e => (this.comment = e.target.value)}\n ></sc-textarea>\n )}\n <sc-flex justifyContent=\"flex-start\">\n <sc-button type=\"primary\" submit>\n {__('Continue', 'surecart')}\n <sc-icon name=\"arrow-right\" slot=\"suffix\" />\n </sc-button>\n {!!skip_link && (\n <sc-button class=\"cancel-survey__abort-link\" type=\"text\" onClick={() => this.scAbandon.emit()}>\n {skip_link}\n </sc-button>\n )}\n </sc-flex>\n </sc-form>\n </sc-dashboard-module>\n </div>\n );\n }\n}\n"],"version":3}