@akinon/pz-theme 2.0.165-rc.0 → 2.0.165

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +10 -51
  2. package/package.json +4 -4
  3. package/src/__tests__/editor-locale-bridge.test.tsx +1 -32
  4. package/src/__tests__/profile-form-composed.test.tsx +795 -0
  5. package/src/auth/auth-field-errors.tsx +59 -13
  6. package/src/auth/form-field-defaults.tsx +74 -0
  7. package/src/blocks/__tests__/text-block.test.tsx +6 -34
  8. package/src/blocks/auth-consent-block.tsx +78 -19
  9. package/src/blocks/auth-field-block.tsx +212 -50
  10. package/src/blocks/auth-form-block.tsx +3 -4
  11. package/src/blocks/birth-date-selects.tsx +206 -0
  12. package/src/blocks/forgot-password-block.tsx +3 -4
  13. package/src/blocks/order-detail-block.tsx +95 -113
  14. package/src/blocks/otp-form-block.tsx +3 -4
  15. package/src/blocks/profile-form-block.tsx +353 -10
  16. package/src/blocks/register-form-block.tsx +12 -6
  17. package/src/blocks/reset-password-block.tsx +3 -4
  18. package/src/blocks/text-block.tsx +2 -5
  19. package/src/custom/README.md +219 -100
  20. package/src/custom/__tests__/use-theme-setting.test.tsx +0 -97
  21. package/src/custom/collect.ts +9 -4
  22. package/src/custom/property-types.ts +15 -15
  23. package/src/custom/use-theme-setting.ts +5 -21
  24. package/src/editor-locale-bridge.tsx +11 -39
  25. package/src/theme-placeholder-wrapper.tsx +0 -3
  26. package/src/blocks/__tests__/order-line-actions.test.tsx +0 -54
  27. package/src/blocks/order-line-actions.ts +0 -45
  28. package/src/utils/__tests__/sanitize-rich-text.test.ts +0 -80
  29. package/src/utils/sanitize-rich-text.ts +0 -215
package/src/blocks/order-detail-block.tsx CHANGED
@@ -9,7 +9,6 @@ import { getResponsiveValue, partAttrs } from '../utils';
9
9
  import { formatDate, formatMoney } from './commerce-format';
10
10
  import { readMoneyStyle } from './money-style';
11
11
  import { hasItemTemplate, ItemTemplateList } from './item-template';
12
- import { renderOrderLineActions } from './order-line-actions';
13
12
  import { BlockRendererProps } from './block-renderer-registry';
14
13
  import {
15
14
  DesignerPlaceholder,
@@ -25,7 +24,7 @@ import {
25
24
  useOrderActionRules
26
25
  } from '../utils/order-action-rules';
27
26
 
28
- type OrderItemLike = {
27
+ interface OrderItemLike {
29
28
  id?: number;
30
29
  price?: string;
31
30
  quantity?: string | number;
@@ -44,7 +43,7 @@ type OrderItemLike = {
44
43
  absolute_url?: string;
45
44
  attributes?: Record<string, unknown>;
46
45
  } | null;
47
- };
46
+ }
48
47
 
49
48
  interface AddressLike {
50
49
  first_name?: string;
@@ -409,7 +408,7 @@ const formatAddress = (address: AddressLike | null | undefined): string[] => {
409
408
  * currencyText, currencyPosition.
410
409
  * Parts: detail, header, number, date, header-total, status,
411
410
  * invoice-link, cancel-link, return-link, list, item, image, name, quantity,
412
- * color, size, item-status, item-tracking, item-return-code, item-actions,
411
+ * color, size, item-status, item-tracking, item-return-code,
413
412
  * item-return-method, item-return-carrier, item-pickup-date, price, shipment,
414
413
  * delivery, tracking, addresses, address, address-label, totals, total-row,
415
414
  * total-label, total-value, grand-total, payment-info, payment-info-label.
@@ -956,21 +955,6 @@ const OrderDetailBlock = ({
956
955
  showPickupDate && returnDetails.pickupDate
957
956
  ? formatPickupDate(returnDetails.pickupDate, locale)
958
957
  : '';
959
- const lineActions = renderOrderLineActions({
960
- order,
961
- line,
962
- isDesigner
963
- });
964
- const showLineMeta =
965
- showShipmentStatus &&
966
- Boolean(
967
- item.status?.label ||
968
- trackingValue ||
969
- returnCodeValue ||
970
- returnMethodValue ||
971
- returnCarrierValue ||
972
- pickupDateValue
973
- );
974
958
 
975
959
  return (
976
960
  <li
@@ -1086,100 +1070,98 @@ const OrderDetailBlock = ({
1086
1070
  </div>
1087
1071
  </div>
1088
1072
 
1089
- {(showLineMeta || lineActions) && (
1090
- <div
1091
- style={{
1092
- display: 'flex',
1093
- flexDirection: 'column',
1094
- alignItems: isMobile ? 'flex-start' : 'flex-end',
1095
- textAlign: isMobile ? 'left' : 'right',
1096
- gap: '4px',
1097
- flex: isMobile ? '1 1 100%' : '0 0 auto'
1098
- }}
1099
- >
1100
- {lineActions && (
1101
- <div
1102
- data-order-detail-item-actions=""
1103
- {...partAttrs('item-actions')}
1104
- >
1105
- {lineActions}
1106
- </div>
1107
- )}
1108
- {showLineMeta && item.status?.label && (
1109
- <span
1110
- data-order-detail-item-status=""
1111
- data-order-status-value={item.status.value}
1112
- {...partAttrs('item-status')}
1113
- style={{ display: 'inline-block' }}
1114
- >
1115
- {item.status.label}
1116
- </span>
1117
- )}
1118
- {/* Label and value in their own spans, so a
1119
- composition can colour them apart. */}
1120
- {showLineMeta && returnMethodValue && (
1121
- <span
1122
- data-order-detail-item-return-method=""
1123
- {...partAttrs('item-return-method')}
1124
- style={{ opacity: 0.8 }}
1125
- >
1126
- <span data-label="">{returnMethodLabel}</span>{' '}
1127
- <span data-value="">{returnMethodValue}</span>
1128
- </span>
1129
- )}
1130
- {showLineMeta && returnCarrierValue && (
1131
- <span
1132
- data-order-detail-item-return-carrier=""
1133
- {...partAttrs('item-return-carrier')}
1134
- style={{ opacity: 0.8 }}
1135
- >
1136
- <span data-label="">{returnCarrierLabel}</span>{' '}
1137
- <span data-value="">{returnCarrierValue}</span>
1138
- </span>
1139
- )}
1140
- {showLineMeta && pickupDateValue && (
1141
- <span
1142
- data-order-detail-item-pickup-date=""
1143
- {...partAttrs('item-pickup-date')}
1144
- style={{ opacity: 0.8 }}
1145
- >
1146
- <span data-label="">{pickupDateLabel}</span>{' '}
1147
- <span data-value="">{pickupDateValue}</span>
1148
- </span>
1149
- )}
1150
- {showLineMeta && trackingValue && (
1151
- <span
1152
- data-order-detail-item-tracking=""
1153
- {...partAttrs('item-tracking')}
1154
- style={{ opacity: 0.8 }}
1155
- >
1156
- {lineTrackingLabel}{' '}
1157
- {item.tracking_url ? (
1158
- <a
1159
- href={isDesigner ? '#' : item.tracking_url}
1160
- onClick={guard}
1161
- target={isDesigner ? undefined : '_blank'}
1162
- rel="noreferrer"
1163
- style={{ color: 'inherit' }}
1164
- >
1165
- {item.tracking_number || item.tracking_url}
1166
- </a>
1167
- ) : (
1168
- trackingValue
1169
- )}
1170
- </span>
1171
- )}
1172
- {showLineMeta && returnCodeValue && (
1173
- <span
1174
- data-order-detail-item-return-code=""
1175
- {...partAttrs('item-return-code')}
1176
- style={{ opacity: 0.8 }}
1177
- >
1178
- {returnCodeLabel} {returnCodeValue}
1179
- </span>
1180
- )}
1181
- </div>
1182
- )}
1073
+ {showShipmentStatus &&
1074
+ (item.status?.label ||
1075
+ trackingValue ||
1076
+ returnCodeValue ||
1077
+ returnMethodValue ||
1078
+ returnCarrierValue ||
1079
+ pickupDateValue) && (
1080
+ <div
1081
+ style={{
1082
+ display: 'flex',
1083
+ flexDirection: 'column',
1084
+ alignItems: isMobile ? 'flex-start' : 'flex-end',
1085
+ textAlign: isMobile ? 'left' : 'right',
1086
+ gap: '4px',
1087
+ flex: isMobile ? '1 1 100%' : '0 0 auto'
1088
+ }}
1089
+ >
1090
+ {item.status?.label && (
1091
+ <span
1092
+ data-order-detail-item-status=""
1093
+ data-order-status-value={item.status.value}
1094
+ {...partAttrs('item-status')}
1095
+ style={{ display: 'inline-block' }}
1096
+ >
1097
+ {item.status.label}
1098
+ </span>
1099
+ )}
1100
+ {/* Label and value in their own spans, so a
1101
+ composition can colour them apart. */}
1102
+ {returnMethodValue && (
1103
+ <span
1104
+ data-order-detail-item-return-method=""
1105
+ {...partAttrs('item-return-method')}
1106
+ style={{ opacity: 0.8 }}
1107
+ >
1108
+ <span data-label="">{returnMethodLabel}</span>{' '}
1109
+ <span data-value="">{returnMethodValue}</span>
1110
+ </span>
1111
+ )}
1112
+ {returnCarrierValue && (
1113
+ <span
1114
+ data-order-detail-item-return-carrier=""
1115
+ {...partAttrs('item-return-carrier')}
1116
+ style={{ opacity: 0.8 }}
1117
+ >
1118
+ <span data-label="">{returnCarrierLabel}</span>{' '}
1119
+ <span data-value="">{returnCarrierValue}</span>
1120
+ </span>
1121
+ )}
1122
+ {pickupDateValue && (
1123
+ <span
1124
+ data-order-detail-item-pickup-date=""
1125
+ {...partAttrs('item-pickup-date')}
1126
+ style={{ opacity: 0.8 }}
1127
+ >
1128
+ <span data-label="">{pickupDateLabel}</span>{' '}
1129
+ <span data-value="">{pickupDateValue}</span>
1130
+ </span>
1131
+ )}
1132
+ {trackingValue && (
1133
+ <span
1134
+ data-order-detail-item-tracking=""
1135
+ {...partAttrs('item-tracking')}
1136
+ style={{ opacity: 0.8 }}
1137
+ >
1138
+ {lineTrackingLabel}{' '}
1139
+ {item.tracking_url ? (
1140
+ <a
1141
+ href={isDesigner ? '#' : item.tracking_url}
1142
+ onClick={guard}
1143
+ target={isDesigner ? undefined : '_blank'}
1144
+ rel="noreferrer"
1145
+ style={{ color: 'inherit' }}
1146
+ >
1147
+ {item.tracking_number || item.tracking_url}
1148
+ </a>
1149
+ ) : (
1150
+ trackingValue
1151
+ )}
1152
+ </span>
1153
+ )}
1154
+ {returnCodeValue && (
1155
+ <span
1156
+ data-order-detail-item-return-code=""
1157
+ {...partAttrs('item-return-code')}
1158
+ style={{ opacity: 0.8 }}
1159
+ >
1160
+ {returnCodeLabel} {returnCodeValue}
1161
+ </span>
1162
+ )}
1163
+ </div>
1164
+ )}
1183
1165
  </div>
1184
1166
  </li>
1185
1167
  );
package/src/blocks/otp-form-block.tsx CHANGED
@@ -24,6 +24,7 @@ import {
24
24
  AuthFieldErrors,
25
25
  AuthFieldErrorsProvider,
26
26
  clearAuthFieldError,
27
+ eventFieldName,
27
28
  collectAuthFieldErrors
28
29
  } from '../auth/auth-field-errors';
29
30
  import {
@@ -424,11 +425,9 @@ const OtpFormBlock = ({
424
425
  * `change`.
425
426
  */
426
427
  const handleInput = (event: React.FormEvent<HTMLFormElement>) => {
427
- const target = event.target as { name?: string } | null;
428
+ const name = eventFieldName(event.target);
428
429
 
429
- setFieldErrors((current) =>
430
- clearAuthFieldError(current, target?.name || '')
431
- );
430
+ setFieldErrors((current) => clearAuthFieldError(current, name));
432
431
  };
433
432
 
434
433
  const submitPhone = async (event: React.FormEvent<HTMLFormElement>) => {