save placeholder_id

includes/Admin.php

@@ -26,6 +26,7 @@
 defined( 'ABSPATH' ) || exit;
 
 use WooCommerce\Square\Admin\Analytics\Revenue;
+use WooCommerce\Square\Handlers\Products;
 use WooCommerce\Square\Handlers\Product;
 
 /**
@@ -161,6 +162,8 @@ private function load_scripts_styles( $hook ) {
 				Plugin::VERSION
 			);
 
+			wp_enqueue_media();
+
 			wp_enqueue_script(
 				'wc-square-admin-settings',
 				$this->get_plugin()->get_plugin_url() . '/build/assets/admin/wc-square-admin-settings.js',
@@ -233,15 +236,22 @@ private function load_scripts_styles( $hook ) {
 				)
 			);
 
+			$gift_card_placeholder_url = Products::get_gift_card_default_placeholder_url();
+
+			if ( empty( $gift_card_placeholder_url ) ) {
+				$gift_card_placeholder_url = WC_SQUARE_PLUGIN_URL . 'build/images/gift-card-featured-image.png';
+			}
+
 			wp_localize_script(
 				'woocommerce-square-settings-js',
 				'wcSquareSettings',
 				array(
-					'nonce'     => wp_create_nonce( 'wc_square_settings' ),
-					'homeUrl'   => home_url(),
-					'adminUrl'  => admin_url(),
-					'ajaxUrl'   => admin_url( 'admin-ajax.php' ),
-					'depsCheck' => $this->get_plugin()->get_dependency_handler()->meets_php_dependencies(),
+					'nonce'            => wp_create_nonce( 'wc_square_settings' ),
+					'homeUrl'          => home_url(),
+					'adminUrl'         => admin_url(),
+					'ajaxUrl'          => admin_url( 'admin-ajax.php' ),
+					'depsCheck'        => $this->get_plugin()->get_dependency_handler()->meets_php_dependencies(),
+					'gcPlaceholderUrl' => esc_url( $gift_card_placeholder_url ),
 				)
 			);
 

includes/Admin/Rest/WC_REST_Square_Gift_Cards_Settings_Controller.php

@@ -48,6 +48,7 @@ public function __construct() {
 			'title',
 			'description',
 			'is_default_placeholder',
+			'placeholder_id',
 		);
 
 		add_action( 'rest_api_init', array( $this, 'register_routes' ) );
@@ -94,6 +95,11 @@ public function register_routes() {
 						'type'              => 'string',
 						'sanitize_callback' => '',
 					),
+					'placeholder_id' => array(
+						'description'       => __( 'ID of the placeholder media.', 'woocommerce-square' ),
+						'type'              => 'integer',
+						'sanitize_callback' => '',
+					),
 				),
 			)
 		);

includes/Gateway/Gift_Card.php

@@ -6,6 +6,7 @@
 
 use WooCommerce\Square\Plugin;
 use WooCommerce\Square\Framework\Square_Helper;
+use WooCommerce\Square\Handlers\Products;
 use WooCommerce\Square\Handlers\Product;
 use WooCommerce\Square\Utilities\Money_Utility;
 use WooCommerce\Square\Framework\PaymentGateway\Payment_Gateway;
@@ -202,12 +203,12 @@ public static function does_checkout_support_gift_card() {
 	 *
 	 * @since 4.2.0
 	 */
-	public function add_gift_card_image_placeholder() {
+	public function add_gift_card_image_placeholder( $settings ) {
 		if ( ! \WooCommerce\Square\Handlers\Products::should_use_default_gift_card_placeholder_image() ) {
 			return;
 		}
 
-		$placeholder_image = get_option( 'wc_square_gift_card_placeholder_id', false );
+		$placeholder_image = Products::get_gift_card_default_placeholder_id();
 
 		if ( ! empty( $placeholder_image ) ) {
 			if ( ! is_numeric( $placeholder_image ) ) {
@@ -226,7 +227,8 @@ public function add_gift_card_image_placeholder() {
 		}
 
 		if ( ! file_exists( $filename ) ) {
-			update_option( 'wc_square_gift_card_placeholder_id', 0 );
+			$settings['placeholder_id'] = 0;
+			update_option( 'woocommerce_gift_cards_pay_settings', $settings );
 			return;
 		}
 
@@ -242,11 +244,13 @@ public function add_gift_card_image_placeholder() {
 		$attach_id = wp_insert_attachment( $attachment, $filename );
 
 		if ( is_wp_error( $attach_id ) ) {
-			update_option( 'wc_square_gift_card_placeholder_id', 0 );
+			$settings['placeholder_id'] = 0;
+			update_option( 'woocommerce_gift_cards_pay_settings', $settings );
 			return;
 		}
 
-		update_option( 'wc_square_gift_card_placeholder_id', $attach_id );
+		$settings['placeholder_id'] = $attach_id;
+		update_option( 'woocommerce_gift_cards_pay_settings', $settings );
 
 		// Make sure that this file is included, as wp_generate_attachment_metadata() depends on it.
 		require_once ABSPATH . 'wp-admin/includes/image.php';
@@ -265,7 +269,7 @@ public function add_gift_card_image_placeholder() {
 	 * @param int $post_id Attachment ID of the media being deleted.
 	 */
 	public function delete_gift_card_image_placeholder( $post_id ) {
-		$attachment_id      = (int) get_option( 'wc_square_gift_card_placeholder_id' );
+		$attachment_id      = Products::get_gift_card_default_placeholder_id();
 		$gift_card_settings = get_option( 'woocommerce_gift_cards_pay_settings', array() );
 
 		if ( $attachment_id !== $post_id ) {
@@ -274,10 +278,9 @@ public function delete_gift_card_image_placeholder( $post_id ) {
 
 		if ( isset( $gift_card_settings['is_default_placeholder'] ) && 'yes' === $gift_card_settings['is_default_placeholder'] ) {
 			$gift_card_settings['is_default_placeholder'] = 'no';
+			$gift_card_settings['placeholder_id']         = 0;
 
-			if ( update_option( 'woocommerce_gift_cards_pay_settings', $gift_card_settings ) ) {
-				delete_option( 'wc_square_gift_card_placeholder_id' );
-			}
+			update_option( 'woocommerce_gift_cards_pay_settings', $gift_card_settings );
 		}
 	}
 

includes/Handlers/Products.php

@@ -1268,7 +1268,7 @@ public function filter_gift_card_product_featured_image_placeholder( $image, $pr
 			return $image;
 		}
 
-		$placeholder_image_id = get_option( 'wc_square_gift_card_placeholder_id', 0 );
+		$placeholder_image_id = self::get_gift_card_default_placeholder_id();
 
 		$default_attr = array(
 			'class' => 'woocommerce-placeholder wp-post-image',
@@ -1322,7 +1322,7 @@ public function filter_single_product_featured_image_placeholder( $html ) {
 			return $html;
 		}
 
-		$placeholder_image_id = get_option( 'wc_square_gift_card_placeholder_id', false );
+		$placeholder_image_id = self::get_gift_card_default_placeholder_id();
 
 		if ( wp_attachment_is_image( $placeholder_image_id ) ) {
 			$html = wc_get_gallery_image_html( $placeholder_image_id, true );
@@ -1530,7 +1530,7 @@ public function gift_card_product_image_id( $image_id, $product ) {
 		}
 
 		if ( empty( $image_id ) ) {
-			$placeholder_image_id = get_option( 'wc_square_gift_card_placeholder_id', 0 );
+			$placeholder_image_id = self::get_gift_card_default_placeholder_id();
 
 			if ( $placeholder_image_id ) {
 				$image_id = $placeholder_image_id;
@@ -1564,4 +1564,40 @@ public static function should_use_default_gift_card_placeholder_image() {
 
 		return true;
 	}
+
+	/**
+	 * Returns the default placeholder image ID for gift card products.
+	 *
+	 * @since x.x.x
+	 *
+	 * @return int
+	 */
+	public static function get_gift_card_default_placeholder_id() {
+		$settings = get_option( 'woocommerce_gift_cards_pay_settings', array() );
+
+		return (int) ( $settings['placeholder_id'] ?? 0 );
+	}
+
+	/**
+	 * Returns the default placeholder image URL for gift card products.
+	 *
+	 * @since x.x.x
+	 *
+	 * @return string|bool
+	 */
+	public static function get_gift_card_default_placeholder_url() {
+		$placeholder_id = self::get_gift_card_default_placeholder_id();
+
+		if ( ! $placeholder_id ) {
+			return '';
+		}
+
+		$attachment = get_post( $placeholder_id );
+
+		if ( ! $attachment ) {
+			return '';
+		}
+
+		return wp_get_attachment_url( $attachment->ID );
+	}
 }

src/new-user-experience/onboarding/data/reducers.js

@@ -55,6 +55,7 @@ export const GIFT_CARDS_DEFAULT_STATE = {
 	enabled: 'no',
 	title: __( 'Square Gift Cards', 'woocommerce-square' ),
 	is_default_placeholder: 'no',
+	placeholder_id: 0,
 	description: __(
 		'Allow customers to purchase and redeem gift cards during checkout.',
 		'woocommerce-square'

src/new-user-experience/onboarding/steps/gift-card/index.js

@@ -2,7 +2,8 @@
  * External dependencies.
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { ToggleControl } from '@wordpress/components';
+import { ToggleControl, Button } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 import parse from 'html-react-parser';
 
 /**
@@ -24,13 +25,33 @@ export const GiftCardSetup = ( { origin = '' } ) => {
 		setGiftCardData,
 	} = usePaymentGatewaySettings();
 
+	const [ defaultPlaceholderUrl, setDefaultPlaceholderUrl ] = useState( wcSquareSettings.gcPlaceholderUrl );
+
 	const { enabled, is_default_placeholder } = giftCardsGatewaySettings;
 
 	if ( ! giftCardsGatewaySettingsLoaded ) {
 		return null;
 	}
 
-	const mediaId = 0;
+	function openMediaLibrary() {
+		const imageUploader = wp.media( {
+			title: __( 'Select or Upload an image to use as the Gift card placeholder:' ),
+			library : {
+				type : 'image'
+			},
+			button: {
+				text: 'Use this image'
+			},
+			multiple: false
+		} ).on( 'select', function() {
+			const attachment = imageUploader.state().get( 'selection' ).first().toJSON();
+
+			setGiftCardData( { placeholder_id: attachment.id } );
+			setDefaultPlaceholderUrl( attachment.url );
+		} );
+
+		imageUploader.open();
+	}
 
 	return (
 		<>
@@ -120,8 +141,15 @@ export const GiftCardSetup = ( { origin = '' } ) => {
 								/>
 								<img
 									style={ { maxWidth: '350px' } }
-									src={ `${wcSquareSettings.homeUrl}/wp-content/plugins/woocommerce-square/src/images/gift-card-featured-image.png`}
+									src={ defaultPlaceholderUrl }
 								/>
+								<Button
+									variant='link'
+									onClick={ openMediaLibrary }
+									style={ { width: 'auto' } }
+								>
+									{ __( 'Replace image', 'woocommerce-square' ) }
+								</Button>
 							</InputWrapper>
 						</>
 					) }

src/new-user-experience/utils.js

@@ -61,6 +61,7 @@ export const getGiftCardsSettingsData = async () => {
 	const giftCard = {
 		enabled: settings.enabled || GIFT_CARDS_DEFAULT_STATE.enabled,
 		is_default_placeholder: settings.is_default_placeholder || GIFT_CARDS_DEFAULT_STATE.is_default_placeholder,
+		placeholder_id: settings.placeholder_id || GIFT_CARDS_DEFAULT_STATE.placeholder_id,
 	};
 
 	return { giftCard };