Skip to content

Commit

Permalink
Merge branch 'fix/Address_fields_for_Stripe_Payment' of github.com:th…
Browse files Browse the repository at this point in the history
…e-events-calendar/event-tickets into fix/Address_fields_for_Stripe_Payment

* 'fix/Address_fields_for_Stripe_Payment' of github.com:the-events-calendar/event-tickets:
  Updating snapshots
  ⏩ the-events-calendar/tribe-common@eb6385b
  Indentation
  Design/QA review changes
  Grammar Check
  • Loading branch information
George Pattichis committed Jul 25, 2024
2 parents 23271c2 + 1fe8a8b commit 8856068
Show file tree
Hide file tree
Showing 17 changed files with 77 additions and 30 deletions.
2 changes: 1 addition & 1 deletion src/Tickets/Commerce/Gateways/Stripe/Settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ public function get_settings() {

$payment_methods_tooltip = sprintf(
// Translators: %1$s: Opening `<span>` tag. %2$s: The currency name. %3$s: Closing `</span>` tag. %4$s: Opening `<a>` tag for Stripe link. %5$s: Closing `</a>` tag.
__( '%1$sPayment methods available for %2$s%3$s.<br /><br /> The payment methods listed here are dependent on the currency selected for Tickets Commerce and the currency each payment method support. If you select a payment provider outside of Credit Cards, additional billing information fields will display on checkout as required by Stripe. You can review the payment methods and their availablity for each currency on %4$sStripe\'s documentation%5$s.<br /><br />', 'event-tickets' ),
__( '%1$sPayment methods available for %2$s%3$s.<br /><br /> The payment methods listed here depend on the currency selected for Tickets Commerce and the currency supported by each payment method. If you select a payment provider other than Credit Cards, additional billing information fields will be displayed at checkout as required by Stripe. You can review the payment methods and their availablity for each currency on %4$sStripe\'s documentation%5$s.<br /><br />', 'event-tickets' ),
'<span class="tec-tickets__admin-settings-tickets-commerce-gateway-currency">',
$currency_name,
'</span>',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
<?php
printf(
// Translators: %1$s: opening `a` tag to the knowledge base article. %2$s: closing `a` tag.
esc_html__( 'If you use certain payment providers with Stripe including Afterpay, Klarna or Clearpay additional Billing Fields will be displayed at checkout as required by Stripe. %1$sLearn More%2$s.', 'event-tickets' ),
esc_html__( 'If you use certain payment providers with Stripe, including Afterpay, Klarna, or Clearpay, additional Billing Fields will be displayed at checkout as required by Stripe. %1$sLearn More%2$s.', 'event-tickets' ),
'<a href="https://theeventscalendar.com/knowledgebase/k/pci-compliance/" target="_blank" rel="noopener noreferrer" class="tribe-common-anchor-alt">',
'</a>'
);
Expand Down
3 changes: 3 additions & 0 deletions src/resources/js/commerce/gateway/stripe/checkout.js
Original file line number Diff line number Diff line change
Expand Up @@ -529,9 +529,11 @@ tribe.tickets.commerce.gateway.stripe.checkout = {};
let valid = true;
fields.each((index, field) => {
field.classList.remove('error');
field.nextElementSibling.classList.add( obj.selectors.hiddenElement.className() );
if (field.required && field.value === '') {
valid = false;
field.classList.add('error');
field.nextElementSibling.classList.remove( obj.selectors.hiddenElement.className() );
}
});

Expand Down Expand Up @@ -578,6 +580,7 @@ tribe.tickets.commerce.gateway.stripe.checkout = {};
setTimeout(() => {
$('.tribe-tickets__commerce-checkout-gateways').get(0).scrollIntoView({behavior: 'smooth'});
$( obj.selectors.submitButton ).removeClass( obj.selectors.hiddenElement.className() );
$('.tribe-tickets__commerce-checkout-section-header').removeClass( obj.selectors.hiddenElement.className() )
}, 2000);
}

Expand Down
20 changes: 16 additions & 4 deletions src/resources/postcss/tickets-commerce/_checkout.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -320,7 +320,11 @@

.tribe-tickets__form-field-description {
color: var(--tec-color-icon-primary-alt);
margin: var(--tec-spacer-1) 0;
margin: var(--tec-spacer-1) 0 0;

&.error {
color: red;
}
}

&.disabled {
Expand All @@ -339,7 +343,7 @@
}

.tribe-tickets__commerce-checkout-purchaser-info-title {
margin-bottom: var(--tec-spacer-3);
margin: var(--tec-spacer-3) 0;
}

.tribe-tickets__commerce-checkout-form-submit-button {
Expand All @@ -348,6 +352,15 @@
width: 100%;
}

.tribe-tickets__form-field-input-wrapper {

input::placeholder {
color: var(--tec-color-border-tertiary);
font-size: var(--tec-font-size-2);
opacity: 1;
}
}

/* -------------------------------------------------------------------------
* Theme Overrides - Twenty Twenty
* ------------------------------------------------------------------------- */
Expand All @@ -356,8 +369,7 @@

h1,
h2,
h3,
h4 {
h3 {
margin: initial;
}

Expand Down
3 changes: 1 addition & 2 deletions src/resources/postcss/tickets-commerce/_success.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,7 @@

h1,
h2,
h3,
h4 {
h3 {
margin: initial;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
*/
.event-tickets {
.tribe-tickets__commerce-checkout-section-header {
display: none;
margin-bottom: var(--tec-spacer-5);
}
}
4 changes: 2 additions & 2 deletions src/views/v2/commerce/checkout/gateways.php
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@

?>
<div class="tribe-tickets__commerce-checkout-gateways">
<h4 class="tribe-common-h5 tribe-tickets__commerce-checkout-section-header">
<?php esc_html_e( 'Payment', 'event-tickets' ); ?>
<h4 class="tribe-common-h5 tribe-tickets__commerce-checkout-section-header tribe-common-a11y-hidden">
<?php esc_html_e( 'Payment info', 'event-tickets' ); ?>
</h4>
<?php
foreach ( $gateways as $gateway ) {
Expand Down
10 changes: 8 additions & 2 deletions src/views/v2/commerce/checkout/purchaser-info/address.php
Original file line number Diff line number Diff line change
Expand Up @@ -30,30 +30,36 @@
?>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--text">
<label for="tec-tc-purchaser-address1" <?php tribe_classes( $label_classes ); ?>>
<?php esc_html_e( 'Address Line 1:', 'event-tickets' ); ?>
<?php esc_html_e( 'Address line 1', 'event-tickets' ); ?>
</label>
<div class="tribe-tickets__form-field-input-wrapper">
<input
type="text"
id="tec-tc-purchaser-address1"
name="purchaser-address1"
autocomplete="off"
placeholder="<?php esc_attr_e( 'Street address', 'event-tickets' ); ?>"
<?php tribe_classes( $field_classes ); ?>
required
/>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error">
<?php esc_html_e( 'Your address is required', 'event-tickets' ); ?>
</div>
</div>
</div>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--text">
<label for="tec-tc-purchaser-address2" <?php tribe_classes( $label_classes ); ?>>
<?php esc_html_e( 'Address Line 2 (optional):', 'event-tickets' ); ?>
<?php esc_html_e( 'Address line 2', 'event-tickets' ); ?>
</label>
<div class="tribe-tickets__form-field-input-wrapper">
<input
type="text"
id="tec-tc-purchaser-address2"
name="purchaser-address2"
placeholder="<?php esc_attr_e( 'Apt., suite, unit number, etc (optional)', 'event-tickets' ); ?>"
autocomplete="off"
<?php tribe_classes( $field_classes ); ?>
/>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error"></div>
</div>
</div>
5 changes: 4 additions & 1 deletion src/views/v2/commerce/checkout/purchaser-info/city.php
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
?>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--city">
<label for="tec-tc-purchaser-city" <?php tribe_classes( $label_classes ); ?>>
<?php esc_html_e( 'City:', 'event-tickets' ); ?>
<?php esc_html_e( 'City', 'event-tickets' ); ?>
</label>

<div class="tribe-tickets__form-field-input-wrapper">
Expand All @@ -43,5 +43,8 @@
<?php tribe_classes( $field_classes ); ?>
required
/>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error">
<?php esc_html_e( 'Your city is required', 'event-tickets' ); ?>
</div>
</div>
</div>
5 changes: 4 additions & 1 deletion src/views/v2/commerce/checkout/purchaser-info/country.php
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
?>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--country">
<label for="tec-tc-purchaser-country" <?php tribe_classes( $label_classes ); ?>>
<?php esc_html_e( 'Country:', 'event-tickets' ); ?>
<?php esc_html_e( 'Country or region', 'event-tickets' ); ?>
</label>

<div class="tribe-tickets__form-field-input-wrapper">
Expand All @@ -51,5 +51,8 @@
>
<?php echo $options; // phpcs:ignore WordPress.Security.EscapeOutput,StellarWP.XSS.EscapeOutput ?>
</select>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error">
<?php esc_html_e( 'Your country is required', 'event-tickets' ); ?>
</div>
</div>
</div>
5 changes: 4 additions & 1 deletion src/views/v2/commerce/checkout/purchaser-info/email.php
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
?>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--email">
<label for="tec-tc-purchaser-email" <?php tribe_classes( $label_classes ); ?>>
<?php esc_html_e( 'Email address:', 'event-tickets' ); ?>
<?php esc_html_e( 'Email address', 'event-tickets' ); ?>
</label>

<div class="tribe-tickets__form-field-input-wrapper">
Expand All @@ -43,6 +43,9 @@
<?php tribe_classes( $field_classes ); ?>
required
/>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error">
<?php esc_html_e( 'Your email address is required', 'event-tickets' ); ?>
</div>
<div class="tribe-common-b3 tribe-tickets__form-field-description">
<?php esc_html_e( 'Your tickets will be sent to this email address', 'event-tickets' ); ?>
</div>
Expand Down
6 changes: 5 additions & 1 deletion src/views/v2/commerce/checkout/purchaser-info/name.php
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,20 @@
?>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--text">
<label for="tec-tc-purchaser-name" <?php tribe_classes( $label_classes ); ?>>
<?php echo $show_address ? esc_html__( 'Full name:', 'event-tickets' ) : esc_html__( 'Person purchasing tickets:', 'event-tickets' ); ?>
<?php echo $show_address ? esc_html__( 'Full name', 'event-tickets' ) : esc_html__( 'Person purchasing tickets:', 'event-tickets' ); ?>
</label>
<div class="tribe-tickets__form-field-input-wrapper">
<input
type="text"
id="tec-tc-purchaser-name"
name="purchaser-name"
autocomplete="off"
placeholder="<?php esc_attr_e( 'First and last name', 'event-tickets' ); ?>"
<?php tribe_classes( $field_classes ); ?>
required
/>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error">
<?php esc_html_e( 'Your first and last names are required', 'event-tickets' ); ?>
</div>
</div>
</div>
5 changes: 4 additions & 1 deletion src/views/v2/commerce/checkout/purchaser-info/state.php
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
?>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--state">
<label for="tec-tc-purchaser-state" <?php tribe_classes( $label_classes ); ?>>
<?php esc_html_e( 'State:', 'event-tickets' ); ?>
<?php esc_html_e( 'State', 'event-tickets' ); ?>
</label>

<div class="tribe-tickets__form-field-input-wrapper">
Expand All @@ -43,5 +43,8 @@
<?php tribe_classes( $field_classes ); ?>
required
/>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error">
<?php esc_html_e( 'Your state is required', 'event-tickets' ); ?>
</div>
</div>
</div>
5 changes: 4 additions & 1 deletion src/views/v2/commerce/checkout/purchaser-info/zip.php
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
?>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--zip">
<label for="tec-tc-purchaser-zip" <?php tribe_classes( $label_classes ); ?>>
<?php esc_html_e( 'Zip/Postal Code:', 'event-tickets' ); ?>
<?php esc_html_e( 'Zip/Postal code', 'event-tickets' ); ?>
</label>

<div class="tribe-tickets__form-field-input-wrapper">
Expand All @@ -43,5 +43,8 @@
<?php tribe_classes( $field_classes ); ?>
required
/>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error">
<?php esc_html_e( 'Your Zip or Postal code is required', 'event-tickets' ); ?>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,7 @@ class="tribe-common-b2 tribe-common-b3--min-medium tribe-tickets__commerce-check
<div class="tribe-common-b2 tribe-tickets-notice__content tribe-tickets__commerce-checkout-notice-content" >
Something went wrong! </div>
</div>
<div class="tribe-tickets__form tribe-tickets__commerce-checkout-purchaser-info-wrapper tribe-common-b2">
<div class="tribe-tickets__form tribe-tickets__commerce-checkout-purchaser-info-wrapper tribe-common-b2">
<h4 class="tribe-common-h5 tribe-tickets__commerce-checkout-purchaser-info-title">Purchaser info</h4>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--text">
<label for="tec-tc-purchaser-name" class="tribe-tickets__form-field-label tribe-tickets__commerce-checkout-purchaser-info-name-field-label" >
Expand All @@ -110,13 +109,16 @@ class="tribe-common-b2 tribe-common-b3--min-medium tribe-tickets__commerce-check
id="tec-tc-purchaser-name"
name="purchaser-name"
autocomplete="off"
placeholder="First and last name"
class="tribe-tickets__commerce-checkout-purchaser-info-form-field tribe-tickets__commerce-checkout-purchaser-info-form-field-name tribe-common-form-control-text__input tribe-tickets__form-field-input" required
/>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error">
Your first and last names are required </div>
</div>
</div>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--email">
<label for="tec-tc-purchaser-email" class="tribe-tickets__form-field-label tribe-tickets__commerce-checkout-purchaser-info-email-field-label" >
Email address: </label>
Email address </label>
<div class="tribe-tickets__form-field-input-wrapper">
<input
Expand All @@ -126,11 +128,13 @@ class="tribe-tickets__commerce-checkout-purchaser-info-form-field tribe-tickets_
autocomplete="off"
class="tribe-common-b2 tribe-tickets__commerce-checkout-purchaser-info-form-field tribe-tickets__commerce-checkout-purchaser-info-form-field-email tribe-common-form-control-text__input tribe-tickets__form-field-input" required
/>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error">
Your email address is required </div>
<div class="tribe-common-b3 tribe-tickets__form-field-description">
Your tickets will be sent to this address </div>
Your tickets will be sent to this email address </div>
</div>
</div>
</div>
</div>
<footer class="tribe-tickets__commerce-checkout-footer">
<div id="tribe-tickets__commerce-checkout-footer-notice-error--no-gateway" class="tribe-tickets__notice tribe-tickets__notice--error tribe-tickets__commerce-checkout-footer-notice-error--no-gateway" >
<h3 class="tribe-common-h7 tribe-tickets-notice__title">Checkout Unavailable!</h3>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,7 @@ class="tribe-common-b2 tribe-common-b3--min-medium tribe-tickets__commerce-check
<div class="tribe-common-b2 tribe-tickets-notice__content tribe-tickets__commerce-checkout-notice-content" >
Something went wrong! </div>
</div>
<div class="tribe-tickets__form tribe-tickets__commerce-checkout-purchaser-info-wrapper tribe-common-b2">
<div class="tribe-tickets__form tribe-tickets__commerce-checkout-purchaser-info-wrapper tribe-common-b2">
<h4 class="tribe-common-h5 tribe-tickets__commerce-checkout-purchaser-info-title">Purchaser info</h4>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--text">
<label for="tec-tc-purchaser-name" class="tribe-tickets__form-field-label tribe-tickets__commerce-checkout-purchaser-info-name-field-label" >
Expand All @@ -121,13 +120,16 @@ class="tribe-common-b2 tribe-common-b3--min-medium tribe-tickets__commerce-check
id="tec-tc-purchaser-name"
name="purchaser-name"
autocomplete="off"
placeholder="First and last name"
class="tribe-tickets__commerce-checkout-purchaser-info-form-field tribe-tickets__commerce-checkout-purchaser-info-form-field-name tribe-common-form-control-text__input tribe-tickets__form-field-input" required
/>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error">
Your first and last names are required </div>
</div>
</div>
<div class="tribe-tickets__commerce-checkout-purchaser-info-field tribe-tickets__form-field tribe-tickets__form-field--email">
<label for="tec-tc-purchaser-email" class="tribe-tickets__form-field-label tribe-tickets__commerce-checkout-purchaser-info-email-field-label" >
Email address: </label>
Email address </label>
<div class="tribe-tickets__form-field-input-wrapper">
<input
Expand All @@ -137,11 +139,13 @@ class="tribe-tickets__commerce-checkout-purchaser-info-form-field tribe-tickets_
autocomplete="off"
class="tribe-common-b2 tribe-tickets__commerce-checkout-purchaser-info-form-field tribe-tickets__commerce-checkout-purchaser-info-form-field-email tribe-common-form-control-text__input tribe-tickets__form-field-input" required
/>
<div class="tribe-common-b3 tribe-tickets__form-field-description tribe-common-a11y-hidden error">
Your email address is required </div>
<div class="tribe-common-b3 tribe-tickets__form-field-description">
Your tickets will be sent to this address </div>
Your tickets will be sent to this email address </div>
</div>
</div>
</div>
</div>
<footer class="tribe-tickets__commerce-checkout-footer">
<div id="tribe-tickets__commerce-checkout-footer-notice-error--no-gateway" class="tribe-tickets__notice tribe-tickets__notice--error tribe-tickets__commerce-checkout-footer-notice-error--no-gateway" >
<h3 class="tribe-common-h7 tribe-tickets-notice__title">Checkout Unavailable!</h3>
Expand Down

0 comments on commit 8856068

Please sign in to comment.